הכירות עם מבנה ה- Layout של אפליקציית Grid ב- Windows 8

יום שלישי, ספטמבר 18, 2012

תבנית ה- Grid ב- Visual Studio היא התבנית הפופולרית ביותר לפיתוח אפליקציות Windows 8. בפוסט בניית קורא RSS ל- Windows 8 עם HTML5 עשיתי שימוש בתבנית הזאת לבניית קורא RSS פשוט, ואני ממליץ להתחיל בו לצורך לימוד פיתוח אפליקציות ל- Windows 8 עם HTML ו- JavaScript. ברוב המקרים, נרצה לקסטם את מראה האפליקציה שלנו, וכדי שנוכל לעשות את זה באופן יעיל ופשוט, כדאי להכיר את מבנה ה- Layout של תבנית ה- Grid. תבנית ה- Grid מורכבת מ- 3 סוגי מסכים: המסך הראשי, הכולל נתונים מקובצים לפי קטגוריות, עמוד קטגוריה, המכיל...
no comments

עימוד דפים מרובי עמודות עם CSS3 Multi-column

יום ראשון, ספטמבר 16, 2012

בעולם ה- Print אנחנו רגילים למצוא עיצובים בהם הטקסט מחולק למספר עמודות. העיצוב מפחית את האיזורים הריקים מטקסט בשל שורות לא שלמות ובנוסף, אנשים אוהבים לקרוא שורות טקסט עם בין 8 ל- 12 מילים. במשך שנים, עיצוב מרובה עמודות היה אחד היתרונות של עולם ה- Print לעומת ה- Web, אך עם CSS3, יש לנו תמיכה מצויינת בעימוד דפים מרובי עמודות עם CSS3 Multi-column, ללא צורך ב- JavaScript. נכון לכתיבת הפוסט הזה, תקן ה- W3C של CSS Multi-column Layout נמצא בשלב של Candidate Recommendation ומשולב בדפדפנים רבים...
no comments

CSS3 Grid Layout: עימוד טבלאי באפליקציות Windows 8

דפים רבים באינטרנט וכן אפליקציות רבות מעוצבים ע”י חלוקה לגריד עם עמודות ושורות. בעת שימוש בטכנולוגיות Web עם HTML ו- CSS ניתן לעשות ע”י שימוש באלמנט <table>, אך לרוב זה לא מומלץ, והחלופה של עימוד עם <div> הוא טיפה יותר מסובך ופחות קריא. החל מ- CSS3, ניתן להשתמש בעימוד Grid המאפשר את הפשטות שבטבלאות, אך ע”י שימוש רק ב- CSS ובאופן קריא. בפוסט זה ארחיב על עימוד Grid של CSS3, בו נעשה שימוש רחב באפליקציות Windows 8 שנכתבות עם HTML5 ו- JavaScript. איך היינו עושים את זה פעם: עימוד...
no comments

כך תתאימו את הבלוג שלכם לתצוגת מובייל ב- 10 דקות

יום חמישי, מאי 17, 2012

בפוסט הקודם שלי הכרזתי בגאווה שהתאמתי את הבלוג שלי לתצוגת מובייל. לאור פניות הגולשים, להלן הנחיות כיצד תוכלו לעשות זאת עבור הבלוג שלכם, במידה ואתם משתמשים בתבנית ה- Paper Clip הפופולרית. לצורך ההדגמה אשתמש בבלוג של גדי, העושה שימוש בתבנית ה- Paper Clip בסטנדרטית בעברית, אך כל ההגדרות שאציג כאן מתאימות בדיוק באותו אופן לתבנית האנגלית. לפני ביצוע ההתאמות הבלוג של גדי נראה כך: ובתצוגות מובייל: ניתן לראות שהדפדפן הסלולרי מכווץ את התצוגה כדי להכיל את...
2 comments

טיפ CSS: איך יוצרים תיבת מידע במאמר

יום שני, יולי 18, 2011

במאמר הזה נראה איך ליצור סגנון עיצוב לפסקה במאמר, כך שתיראה כתיבת הודעה / מידע שחשוב שהמשתמש ישים לב אליו. לדוגמא: כמה דברים שיש לשים לב בתיבה הנ”ל: צבע רקע שונה מצבע הרקע של האתר, אך משאיר מספיק מקום לטקסט להופיע עליו באופן ברור. מסגרת בצבע טיפה יותר כהה מצבע הרקע של התיבה עצמה אייקון קטן המסמל את המסר: מידע (Information), אזהרה, שגיאה, חשוב! או כל מסר אחר שאנשים מכירים. הטקסט מרוחק מתחילת התיבה כדי להשאיר מקום לאייקון. בואו נבנה את זה שלב אחרי שלב: נתחיל מעמוד HTML עם 3 פסקאות (השתמשתי בטקסט סמתי מתוך האתר Lorem Ipsum). <!DOCTYPE html><html><head>  <title>Article</title></head><body>  <p>    Lorem ipsum...
tags: , , ,
no comments