Bootstrap – המדריך – פרק 6 – עבודה עם תמונות

יום שלישי, נובמבר 24, 2015

לתוכן העניינים.   בפרק הקודם למדנו על טבלאות, הפעם נראה מה יש לספרייה להציע לנו בעבודה עם תמונות.   הספרייה נותנת שני שירותים עיקריים בעבודה עם תמונות: תמיכה בהקטנת והגדלת התמונה לפי המקום שיש לה, בעזרת שימוש במחלקה img-responsive. מתן “מסגרת” לתמונה בעזרת אחד משלושת המחלקות הבאות: img-rounded – המעגל את הפינות של התמונה. img-circle – המעגל את כל התמונה img-thumbnail – הנותן מסגרת לתמונות.   כל תמונה הנמצאת בתוך col--xx כלשהו (size כמובן זה הרזולוצייה הרלוונטית, כפי שלמדנו כאן) ו – xx זה המקום שניתן לעמודה (בין 1 ל – 12), התמונה תגדל ותקטן בהתאם למקום שיש לה תוך שמירה על יחס רוחב-גובה. כל תמונה שתקבל את אחת משלושת המחלקות...
תגיות: , ,
אין תגובות

Bootstrap – המדריך – פרק 5 – עבודה עם Tables

יום ראשון, אוקטובר 18, 2015

לתוכן העניינים.   בפרק הקודם, למדנו על Panels ותוך כדי עשינו חזרה על ה – Grid System, היום נראה מה נקבל בעבודה עם טבלאות פשוטות. כפי שדברנו בהקדמה, ובפרקים הראשונים כשעסקנו בעבודה עם ה – Grid System, הבנו שלא נכון לעמד את המסך בעזרת טבלאות ותתי טבלאות, אלא עם Div, אמנם עדיין יש שימוש בטבלאות, כגון תצוגה של סיכומים, או עבודה עם גרידים (רגילים, המאפשרים מיון, חיפוש וכדו’). כדי לקבל עיצוב נחמד ועדין לטבלאות, נוסיף את המחלקה (class) בשם table לאלמנט ה – table שלנו, בנוסף נוכל להוסיף את אחד מהמחלקות הבאות: table-striped – נותן צבע רקע שונה לשורות. (לא זמין ב – IE8) table-bordered...
תגיות: , , ,
3 תגובות

Bootstrap – המדריך – פרק 4 – עבודה עם Panels

יום חמישי, יולי 30, 2015

לתוכן העניינים בפרק הקודם למדנו על עבודה עם מערכת ה – Grid system המאפשרת לנו לכתוב בצורה לוגית של טבלאות (שורות ועמודות) ומצד שני לעבוד עם div ולוודא תמיכה ברזולוציות שונות. היום נלמד להכיר את אחד מהאלמנטים הנחמדים של הספריה בשם Panels המאפשרים בצורה יחסית קלה להגדיר Container עם עיצוב בסיסי ויפה, על הדרך נכיר מספר מחלקות בסיסיות נוספות לעיצוב ונעשה חזרה קצרה בשימוש ב – Grid system.   נסתכל על דוגמת הקוד הבאה: Code Snippet <div class="row"> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> This is Header <span class="pull-right glyphicon glyphicon-edit"></span> </div> <div class="panel-body"> bla bla bla bla bla <br /> bla bla bla bla bla <br /> bla bla bla bla bla <br /> bla bla bla...
תגיות: , , , ,
אין תגובות

Bootstrap – המדריך – פרק 3 – הגדרת תפריטים ושימוש במערכת הגרידים.

יום חמישי, יולי 16, 2015

לתוכן העניינים. בפרק הקודם ראינו את המסך הראשון שלנו תוך שימוש בספרייה, הכרנו מספר מחלקות ודברנו על ארבעת הגדלים הנתמכים.   היום נראה כיצד להגדיר תפריט ולהשתמש ב – Grid System של הספרייה. (הקוד בדוגמאות, מתבסס שיש לכם את ה – starter מהפרקים הקודמים) Grid System. כפי שדברנו בהקדמה, אחד הבעיות שהספרייה באה לפתור זה העימוד של התוכן בעזרת טבלאות שזה לוגי יותר אבל שגוי מכל בחינה שהיא, בעזרת ה – Grid System נוכל לעמד בעזרת שימוש ב – div אבל נחשוב לוגית על שורות ועמודות. אלו המחלקות שאנחנו צריכים להכיר: row – מתאר שורה שניתנת לחלוקה ל – 12 עמודות. col-resolution-width – מתאר עמודה בתוך שורה,...
תגיות: , , , ,
אין תגובות

IndexedDB

יום שני, אפריל 20, 2015

בפוסט זה נלמד אודות IndexedDB, וכיצד משתמשים בזה, הפוסט מסתבסס ברובו על מה שנכתב כאן. אנחנו נלמד על העבודה עם IndexedDB תוך כדי שנעבור על הנושאים הבאים: יצירת DB. הכנסת נתונים. שליפה. עדכון ומחיקה. שינוי הסכמה.   ראשית חשוב להבין ש – IndexedDB אינו DB רגיל (כמו SQL Server ודומיו – אלא הוא דומה יותר ל – NoSql, ובקיצור – המבנה אינו טבלאי אלא אובייקטלי) לפני שנמשיך ונראה דוגמאות קוד, חשוב להבין את המטרה – היום אנחנו מפתחים הרבה מערכות ב – WEB, לפעמים אנחנו רוצים לשמור מידע בצד הלקוח, אם בשביל מטמון, אם...
תגיות: ,
אין תגובות

Simple jQuery menu

יום שני, דצמבר 2, 2013

לא מזמן כתבתי אתר קטן אשר מדגים יכולות של HTML5, כחלק מהאתר רציתי תפריט פשוט אשר יהיה לא את היכולות הבאות: לחיצה פתיחה וסגירה של תפריטים המכילים תוכן פנימי. אפשרות קלה לעצב בעזרת CSS. זכירת הפריט הנבחר בתפריט (מכיוון שהתפריט הינו Link) אשר מנווט לדף אחר) לא רציתי להוריד משהו מוכן, מכיוון שהדרישות נראו לי מאוד פשוטות לכתיבה לבד ולא רציתי לסבך את האתר עם עוד ספריה, לכן כתבתי קוד קטנטן אשר מיד אציג אותו. לפני כן נראה כיצד התוצאה הסופית נראית (כמובן שניתן לשנות את ההגדרות ב - CSS) קוד...
תגיות: , , , , ,
תגובה אחת

הפיתוח בעולם החדש

יום חמישי, נובמבר 21, 2013

לאחרונה הרציתי במרכז השתלמויות של בית יעקב בירושלים, על הפיתוח בעולם המתחדש ומה הכיוון שאילו אנחנו הולכים בעולם ה - WEB וה -Windows (בהתמקדות בטכנולוגיות מייקרוסופט) מצורפת המצגת. (מומלץ להוריד - הצפייה ב - google docs הופכת את העברית אנגלית) אורך ההרצאה כשעה וחצי, אולי בהמשך אדאג להעלות הסרטה שלה, בכל מקרה לבקשת משתתפות אני מעלה כרגע את המצגת לבלוג. להלן רשימת הנושאים: HTML5 קצת היסטוריה על עולם ה – WEB ותהליך התקדמות התקן. מדוע ועל מה יצא הקצף על HTML4. מה הבשורה ומה מיוחד ב – HTML5. ממה מורכב HTML5. האם אפשר כבר היום לפתח עם התקן החדש (רמז – דפדפנים). HTML6, HTML7 ??? ASP.NET MVC  היסטוריית טכנולוגיות פיתוח אתרים בעולם...
תגובה אחת

Ajax inside html5 worker

יום שלישי, אוקטובר 1, 2013

אחד מהדברים שפחות עושים ב – Worker זה פנייה לשרת ב – ajax. אבל יש מקרים שבהם עושים זאת, הבעייה עם אותם מקרים, שלא ניתן להשתמש ב – jQuery ajax מכיוון ש – jQuery הינה ספריית DOM ואין גישה ל – UI בתוך ה – worker, הפיתרון הפשוט (או המסובך) זה כמובן להשתמש ב – XMLHttpRequest – אבל זה בהחלט לא יהיה כיף. כתבתי אובייקט קטן העוטף את XMLHttpRequest לשימושים פשוטים כדי שהשימוש יהיה יותר נוח. דוגמא לשימוש: ...
תגיות: , , , , , ,
3 תגובות

Using HTML5 FileApi to show images from byte array

יום שני, יוני 24, 2013

הרבה מאוד פעמים יהיה לנו קוד שפונה ב – ajax לשרת מקבל מידע כלשהו, וחלק מהמידע מחזיק url לתמונה כלשהו שנטען דינמית,. קוד מהסוג הזה יכול להיראות כך, המודל שנחזיר מהשרת. Code Snippet public class DataModel {     public int Id { get; set; }...
תגיות: , , , , , ,
אין תגובות

Content property – CSS3

יום רביעי, ינואר 2, 2013

המאפיין content ב – css3 מאפשר לכתוב טקסטים בעזרת css. לכאורה זה נראה מוזר, למה צריך לכתוב טקסטים בעזרת css, בהמשך נראה שזה יכול לחסוך הרבה עבודה ב – JS, וגם לאפשר לעשות דברים שאי אפשר אחרת. ראשית נכיר חלק מהאופציות לכתיבה. המאפיין content יכול לבוא רק עם selctor של after או before, ה – selctor-ים הללו, מאפשרים לעצב מה יהיה לפני או אחרי האלמט, לדוגמא: ...
תגיות: , , , ,
2 תגובות