Browse by Tags
All Tags »
HTML5 (
RSS)
בתאריך ה-20.11.2012 התקיים כנס HTML5 Fest של משרד ה-W3C הישראלי. למי שלא יודע, ה-W3C הוא הגוף האחראי על התקינה ברשת האינטרנט – במסגרת הפעילות הוא מפעיל קבוצות דיון, מחקר ופיתוח ברחבי העולם. הנציגות בישראל מתוחזקת על ידי איגוד האינטרנט הישראלי. במסגרת הכנס, העברתי הרצאה בנושא ממשק המשתמש החדש של Windows 8 והדגמתי מספר אפליקציות מובילות בישראל. צפיה מהנה! ממשק המשתמש המודרני של Windows 8 תהנו!
תבנית ה- Grid ב- Visual Studio היא התבנית הפופולרית ביותר לפיתוח אפליקציות Windows 8. בפוסט בניית קורא RSS ל- Windows 8 עם HTML5 עשיתי שימוש בתבנית הזאת לבניית קורא RSS פשוט, ואני ממליץ להתחיל בו לצורך לימוד פיתוח אפליקציות ל- Windows 8 עם HTML ו- JavaScript. ברוב המקרים, נרצה לקסטם את מראה האפליקציה שלנו, וכדי שנוכל לעשות את זה באופן יעיל ופשוט, כדאי להכיר את מבנה ה- Layout של תבנית ה- Grid. תבנית ה- Grid מורכבת מ- 3 סוגי מסכים: המסך הראשי , הכולל נתונים מקובצים לפי קטגוריות, עמוד קטגוריה , המכיל...
בעולם ה- Print אנחנו רגילים למצוא עיצובים בהם הטקסט מחולק למספר עמודות. העיצוב מפחית את האיזורים הריקים מטקסט בשל שורות לא שלמות ובנוסף, אנשים אוהבים לקרוא שורות טקסט עם בין 8 ל- 12 מילים. במשך שנים, עיצוב מרובה עמודות היה אחד היתרונות של עולם ה- Print לעומת ה- Web, אך עם CSS3, יש לנו תמיכה מצויינת בעימוד דפים מרובי עמודות עם CSS3 Multi-column , ללא צורך ב- JavaScript. נכון לכתיבת הפוסט הזה, תקן ה- W3C של CSS Multi-column Layout נמצא בשלב של Candidate Recommendation ומשולב בדפדפנים רבים (והחל מאקספלורר...
דפים רבים באינטרנט וכן אפליקציות רבות מעוצבים ע”י חלוקה לגריד עם עמודות ושורות. בעת שימוש בטכנולוגיות Web עם HTML ו- CSS ניתן לעשות ע”י שימוש באלמנט <table>, אך לרוב זה לא מומלץ, והחלופה של עימוד עם <div> הוא טיפה יותר מסובך ופחות קריא. החל מ- CSS3, ניתן להשתמש בעימוד Grid המאפשר את הפשטות שבטבלאות, אך ע”י שימוש רק ב- CSS ובאופן קריא. בפוסט זה ארחיב על עימוד Grid של CSS3, בו נעשה שימוש רחב באפליקציות Windows 8 שנכתבות עם HTML5 ו- JavaScript. איך היינו עושים את זה פעם: עימוד עם טבלאות...
במדריך זה נראה צעד אחרי צעד כיצד לבנות אפליקציית קורא RSS בסגנון מטרו ל- Windows 8 באמצעות JavaScript ו- HTML5 . האפליקציה מציגה את הכתבות האחרונות מאתר חדשות כלשהו בחלוקה לקטגוריות השונות. עדכון 1.9.2012 : המדריך מבוסס על הגירסה הסופית של Windows 8 ועל הגירסה הסופית של Visual Studio 2012. מה צריך להכין לפני? כדי לפתח אפליקציות ל- Windows 8 צריך להוריד ו להתקין Windows 8 . ניתן גם להתקין כ- Dual boot או כמכונה וירטואלית. Visual Studio 2012 Express for Windows 8 – כלי הפיתוח החינמי לפיתוח אפליקציות...
בפוסט הקודם שלי הכרזתי בגאווה שהתאמתי את הבלוג שלי לתצוגת מובייל . לאור פניות הגולשים, להלן הנחיות כיצד תוכלו לעשות זאת עבור הבלוג שלכם, במידה ואתם משתמשים בתבנית ה- Paper Clip הפופולרית. לצורך ההדגמה אשתמש בבלוג של גדי, העושה שימוש בתבנית ה- Paper Clip בסטנדרטית בעברית, אך כל ההגדרות שאציג כאן מתאימות בדיוק באותו אופן לתבנית האנגלית. לפני ביצוע ההתאמות הבלוג של גדי נראה כך: ובתצוגות מובייל: ניתן לראות שהדפדפן הסלולרי מכווץ את התצוגה כדי להכיל את כל רוחב התוכן המוצג, ומספר חוויה לא מיטבית לקורא....
רוב הפוסטים שאני כותב הם מדריכים ארוכים עם קטעי קוד, צילומי מסך והרבה טקסט, המצריכים חווית קריאה נוחה. לאור פניות הגולשים, התאמתי את הבלוג שלי לקריאה נוחה יותר ממכשירי מובייל / טאבלט שונים. תצוגת דסקטופ: תצוגת אייפד לרוחב: תצוגת אייפד לאורך: תצוגת סלולר לאורך: תצוגת סלולר לרוחב: תהנו!
במדריך זה נראה צעד אחרי צעד כיצד לבנות אפליקציית מטרו ל- Windows 8 באמצעות JavaScript ו- HTML5 . האפליקציה מציגה את הכתבות האחרונות מניוזגיק בחלוקה לקטגוריות השונות. המדריך מבוסס על גירסת ה- Consumer Preview של Windows 8 ועל גירסת ה- Beta של Visual Studio 11, כך שיתכנו שינויים בתבניות, ב- API’s ובכלי הפיתוח ביום בו תעשו שימוש במדריך הזה. מה צריך להכין לפני? כדי לפתח אפליקציות ל- Windows 8 צריך להוריד ו להתקין Windows 8 . ניתן גם להתקין כ- Dual boot או כמכונה וירטואלית. Visual Studio 11 Beta Express...
תכנות אסינכרוני הופך פופולרי יותר ויותר באפליקציות ה- Web, אך מצד שני, ב- JavaScript הוא אינו קל לביצוע כיום. ספריות ה- JavaScript הפופולריות (כמו jQuery, Dojo ועוד) הוסיפו רמת אבסטרקציה בשם Promise (לפעמים נקראת deferred) כדי להפוך את התכנות האסינכרוני ב- JavaScript לפשוט יותר. בפוסט זה נראה איך להשתמש ב- Promises באפליקציות Web. נדגים את השימוש ב- Promisses עם XMLHttpRequest2 (בקיצור XHR2). תכנות אסינכרוני: למה זה כ”כ קשה? די ברור שאפליקציה שמבצעת חלק מהעבודה ברקע מגיבה טוב יותר למשתמש ויכולה לבצע...
אפליקציות רבות מציגות נתונים בצורת רשימות, ובעת התאמת האפליקציות לדפדפן סלולרי עלינו להשקיע מחשבה לגבי איך יראו הרשימות באפליקציה הסלולרית. jQuery Mobile מכילה תמיכה מצויינת ברשימות, ובפוסט זה נראה זאת ע”י בניית אפליקציה המציגה רשימה מעוצבת שלמשתמשים בטוויטר התומכת בקטגוריות, סינון ועוד, שנראית כך: בסוף הפוסט תמצאו את ה- HTML המלא של הדוגמא. רשימה פשוטה נתחיל מרשימה פשוטה של הכינויים בטוויטר של מספר אנשי מיקרוספוט מוכרים וכן מספר MVP’s, הבנוייה מתגיות HTML סטנדרטיות. < div data-role = "content"...
בפרק הקודם ב מדריך jQuery Mobile יצרנו אפליקציה בסיסית המורכבת מדף בודד וראינו את המבנה הבסיסי שלו. בפרק הזה נרחיב את האפליקציה למספר דפים ונדבר על הניווט ביניהם. ניווט בסיסי בין דפים באפליקציה נוסיף לאפליקציה 3 דפים נוספים: products.html, services.html ו- about.html. בתור תוכן לדפים האלה, נשתמש בתבנית הבסיסית של עמוד באפליקציית jQuery Mobile עם מעט תוכן, כדי שנוכל להבדיל בין הדפים (שינוי ה- title ותוכן ה- h1 באיזור ה- header). לדוגמא, תוכן עמוד ה- about יהיה: <! DOCTYPE html > <...
עם עליית הפופולריות של התקנים ניידים (טלפונים חכמים, מחשבי לוח ועוד), אפליקציות Web התומכות בעבודה Offline הופכות נפוצות יותר ויותר. HTML5 מגדיר דרך סטנדרטית לשמירת משאבים (קבצים, תמונות וכו’) ב- Cache מקומי ע”י ה- Application Cache (בקיצור AppCache ). עם ה- HTML5 Application Cache ניתן לשפר את ביצועי האפליקציות ע”י הורדת כמות הפניות לרשת ולתמוך בעבודה Offline כאשר האתר או החיבור לרשת לא זמינים. הכירות עם HTML5 AppCache HTML5 Application Cache מאפשר לדפים לשמור משאבים (קבצים, תמונות) באופן מקומי...
פיתוח ב- JavaScript, בהשוואה לסביבות פיתוח אחרות, סבל עד לאחרונה ממגבלה קשה: ביצוע של קוד ה- JavaScript היה מוגבל ל- Thread בודד בדפדפן . לאור העובדה שמשתמשים דורשים כיום אפליקציות עשירות עם חווית משתמש טובה, וכן רוב המחשבים כוללים יותר ממעבד אחד – נדרשת כיום גישה שונה לפיתוח אפליקציות ב- JavaScript, העושה שימוש ביותר מ- Thead בודד. לפני עידן ה- HTML5 Web Workers משום שריצת קוד JavaScript מוגבלת ל- Thread בודד, סקריפט שרץ במשך זמן רב גורם לדף להתקע מבלי אפשרות להגיב לפעולות המשתמש ומביא לחווית המשתמש...
מאפייני ה- *-data החדשים ב- HTML5 מאפשרים לנו לשמור מידע חופשי על אלמנטים ב- HTML ולעשות בהם שימוש בלוגיקה של האתר (לרוב ה- JavaScript). בפוסט הזה נראה איך עשינו את זה עד היום, נבין למה זה לא היה מוצלח ונבין לעומק את הפיתרון ב- HTML5. איך אנחנו עושים את זה היום? את האמת – נכון שיצא לכם פעם להשתמש ב- CSS Classes או במאפיינים לא סטנדרטים של אלמנטים כדי לשמור עליהם מידע ולהשתמש בו בקוד JavaScript? לדוגמא, נניח שאנחנו רוצים להציג מאפיינים של רכב ב- div כלשהו, ולשמור מידע כלשהו על הרכב. עד היום היינו...
בפוסט בבלוג צוות הפיתוח של אינטרנט אקספלורר, נכתב השבוע כי במסגרת השיפורים במנוע הדפדפן תוסר התמיכה ב- Conditional Comments החל מאינטרנט אקספלורר 10. לוודא שאתרי אינטרנט נראים טוב ומתפקדים טוב בכל הדפדפנים זו משימה לא קלה בכלל, והיא הופכת עוד יותר קשה כאשר קצב שחרור גירסאות הדפדפנים הולך ומתגבר מצד אחד, בעוד משתמשים עדיין משתמשים בגירסאות ישנות של דפדפנים . אינטרנט אקספלורר 6 שוחרר ב- 2001, אינטרנט אקספלורר 7 ב- 2006, כאשר האינטרנט היה שונה מאד ממה שהוא היום, ואי אפשר לצפות שדפדפן בן 10 שנים יציג...
More Posts
Next page »