HTML5: הוספת מידע חופשי לאלנטים עם data- attributes ו- datasets

30 ביולי 2011

מאפייני ה- *-data החדשים ב- HTML5 מאפשרים לנו לשמור מידע חופשי על אלמנטים ב- HTML ולעשות בהם שימוש בלוגיקה של האתר (לרוב ה- JavaScript). בפוסט הזה נראה איך עשינו את זה עד היום, נבין למה זה לא היה מוצלח ונבין לעומק את הפיתרון ב- HTML5. איך אנחנו עושים את זה היום? את האמת – נכון שיצא לכם פעם להשתמש ב- CSS Classes או במאפיינים לא סטנדרטים של אלמנטים כדי לשמור עליהם מידע ולהשתמש בו בקוד JavaScript? לדוגמא, נניח שאנחנו רוצים להציג מאפיינים של...
tags: , , ,
one comment

מיקרוסופט מבטלת את התמיכה ב- Conditional Comments החל מאינטרנט אקספלורר 10

26 ביולי 2011

בפוסט בבלוג צוות הפיתוח של אינטרנט אקספלורר, נכתב השבוע כי במסגרת השיפורים במנוע הדפדפן תוסר התמיכה ב- Conditional Comments החל מאינטרנט אקספלורר 10. לוודא שאתרי אינטרנט נראים טוב ומתפקדים טוב בכל הדפדפנים זו משימה לא קלה בכלל, והיא הופכת עוד יותר קשה כאשר קצב שחרור גירסאות הדפדפנים הולך ומתגבר מצד אחד, בעוד משתמשים עדיין משתמשים בגירסאות ישנות של דפדפנים. אינטרנט אקספלורר 6 שוחרר ב- 2001, אינטרנט אקספלורר 7 ב- 2006, כאשר האינטרנט היה שונה מאד ממה שהוא היום, ואי אפשר לצפות שדפדפן בן 10 שנים יציג אתרים באותו אופן...
tags: , , , , , ,
one comment

פיתוח אתרי HTML5 מודרניים עם Modernizr

25 ביולי 2011

בזמן שפיתוח אתרים מודרניים העושים שימוש במגוון יכולות של HTML5, CSS3 ו- JavaScript API’s חדשים הולך וצובר תאוצה, עלינו להתמודד עם בעיית התאימות למגוון גירסאות הדפדפנים שנמצאים בשימוש אצל המשתמשים. כיוון שכל דפדפן תומך באלמנטים אחרים של הסטנדרטים המתקדמים באופן טיפה שונה וקצב שונה, עלינו לדעת אילו יכולות עומדות לרשות המשתמש שלנו בדפדפן בו הוא משתמש כדי להציג לו את האתר ולאפשר לו להינות ממנו. Feature Detection במקום Browser Detection במשך שנים הדרך לזהות אילו יכולות נתמכות בדפדפן המשתמש הייתה לבדוק את ה- user agent של...
4 comments

HTML5: קריאת תוכן קובץ בצד הלקוח ב- JavaScript עם File API

22 ביולי 2011

פוסט זה הוא פוסט נוסף בסדרה עבודה עם קבצים בצד הלקוח באמצעות File API. בפוסט הקודם הבנו את המוטיבציה לשימוש ב- File API, הכרנו את האובייקטים המרכזיים ב- API וראינו דוגמא פשוטה לקבלת פרטי קבצים שנבחרו ע”י המשתמש. בפוסט זה, נראה כיצד לקרוא את תוכן הקובץ בצד הלקוח ב- JavaScript ומה אפשר לעשות עם התוכן הזה. קריאת תוכן הקובץ עם האובייקט FileReader בפוסט הקודם, ראינו דוגמא שבה המשתמש בוחר קבצים מהמחשב המקומי, ובפונקציית הטיפול באירוע בחירת הקבצים קיבלנו גישה לאובייקטים מסוג File, שאפשר לנו ללמוד מספר פרטים בסיסיים על הקובץ...
one comment

HTML5: עבודה עם קבצים בצד הלקוח באמצעות File API

20 ביולי 2011

HTML5 מאפשר לגשת בצד הלקוח לקבצים המקומיים באמצעות ספסיפיקציית ה- File API. בפוסט זה אתן מעט רקע ומוטיבציה לשימוש ב- File API ואציג דוגמא בסיסית לשימוש בו. למה בכלל צריך את זה? עד היום, מפתחים נאלצו להעלות את קבצים לשרתי האתר כדי לפתוח אותם ולעבוד עם התוכן שלהם, לעיתים, רק כדי לגלות שה- mime type של הקובץ אינו נכון, או שהוא גדול מדי לדרישות האתר. חוסר היכולת לגשת לקובץ בצד הלקוח, הביא לא פעם לעומס מיותר על הרשת, בזבוז שטח אחסון וניצול זמן CPU מיותר בצד השרת. ...
no comments

סקירה: אפליקציית ה- Foursquare החדשה ל- Windows Phone 7

19 ביולי 2011

בתחילת החודש עלתה לחנות האפליקציות של Windows Phone 7 גירסה חדשה של אפליקציית ה- Foursquare הרשמית. בפוסט זה אני יוצא לטיול בניו יורק כדי לסקר את האפליקציה החדשה ומציג צילומי מסך שנותנים תחושה של שימוש אמיתי באפליקציה בממשק המשתמש החדש של Windows Phone 7. מתוך ההכרזה הרשמית של שחרור הגירסא החדשה של האפליקציה: “שיתפנו פעולה עם מיקרוסופט כדי לפתח אפליקצייה חדשה לגמרי המבוססת על ה- API החדש, ועושה שימוש אמיתי ונכון ביכולות של ממשק המשתמש והייחודי של Windows Phone 7. מה...
no comments

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

18 ביולי 2011

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

HTML5: טעינה וביצוע של JavaScript באופן אסינכרוני

14 ביולי 2011

טעינת קבצי JavaScript היא אחד הגורמים הפופולרים לבעיות ביצועים של אפליקציות באינטרנט. כאשר הדפדפן נתקל בתגית script, הוא עוצר את תהליך הרינדור, טוען את קובץ ה- script ומריץ את הקוד. באותו זמן, הדפדפן לא ממשיך את תהליך הרינדור של הדף או מבצע שום דבר שימושי אחר, כיוון שהסקריפט יכול לכתוב לדף, לשנות אלמנטים קיימים או אפילו לנתב את הגולש לדף אחר. פיתרון נפוץ – סקריפט בסוף הדף פיתרון נפוץ, הוא לשים את תגי ה- script בסוף עמוד ה- HTML, ממש לפני התגית <body/>. אמנם זה לא יפתור את העובדה שהדפדפן...
no comments