מדריך jQuery Mobile – רשימות

יום רביעי, אוקטובר 19, 2011

אפליקציות רבות מציגות נתונים בצורת רשימות, ובעת התאמת האפליקציות לדפדפן סלולרי עלינו להשקיע מחשבה לגבי איך יראו הרשימות באפליקציה הסלולרית. jQuery Mobile מכילה תמיכה מצויינת ברשימות, ובפוסט זה נראה זאת ע”י בניית אפליקציה המציגה רשימה מעוצבת שלמשתמשים בטוויטר התומכת בקטגוריות, סינון ועוד, שנראית כך: בסוף הפוסט תמצאו את ה- HTML המלא של הדוגמא. רשימה פשוטה נתחיל מרשימה פשוטה של הכינויים בטוויטר של מספר אנשי מיקרוספוט מוכרים וכן מספר MVP’s, הבנוייה מתגיות HTML סטנדרטיות. <div data-role="content">  <ul>    <li>@bursteg</li>    <li>@maordp</li>    <li>@scottgu</li>   ...
8 comments

מדריך jQuery Mobile – ניווט וכפתורים

יום שבת, אוקטובר 15, 2011

בפרק הקודם במדריך jQuery Mobile יצרנו אפליקציה בסיסית המורכבת מדף בודד וראינו את המבנה הבסיסי שלו. בפרק הזה נרחיב את האפליקציה למספר דפים ונדבר על הניווט ביניהם. ניווט בסיסי בין דפים באפליקציה נוסיף לאפליקציה 3 דפים נוספים: products.html, services.html ו- about.html. בתור תוכן לדפים האלה, נשתמש בתבנית הבסיסית של עמוד באפליקציית jQuery Mobile עם מעט תוכן, כדי שנוכל להבדיל בין הדפים (שינוי ה- title ותוכן ה- h1 באיזור ה- header). לדוגמא, תוכן עמוד ה- about יהיה: <!DOCTYPE html><html><head>  <title>About...
3 comments

בניית אפליקציות Offline ב- HTML5: שימוש ב- Application Cache (בקיצור AppCache)

יום ראשון, אוקטובר 2, 2011

עם עליית הפופולריות של התקנים ניידים (טלפונים חכמים, מחשבי לוח ועוד), אפליקציות Web התומכות בעבודה Offline הופכות נפוצות יותר ויותר. HTML5 מגדיר דרך סטנדרטית לשמירת משאבים (קבצים, תמונות וכו’) ב- Cache מקומי ע”י ה- Application Cache (בקיצור AppCache). עם ה- HTML5 Application Cache ניתן לשפר את ביצועי האפליקציות ע”י הורדת כמות הפניות לרשת ולתמוך בעבודה Offline כאשר האתר או החיבור לרשת לא זמינים. הכירות עם HTML5 AppCache HTML5 Application Cache מאפשר לדפים לשמור משאבים (קבצים, תמונות) באופן מקומי. את המשאבים שנרצה לשמור נגדיר בתוך קובץ manifest...
no comments

HTML5: מבוא ל- HTML5 Web Workers ותכנות מקבילי ב- JavaScript

יום ראשון, אוגוסט 7, 2011

פיתוח ב- JavaScript, בהשוואה לסביבות פיתוח אחרות, סבל עד לאחרונה ממגבלה קשה: ביצוע של קוד ה- JavaScript היה מוגבל ל- Thread בודד בדפדפן. לאור העובדה שמשתמשים דורשים כיום אפליקציות עשירות עם חווית משתמש טובה, וכן רוב המחשבים כוללים יותר ממעבד אחד – נדרשת כיום גישה שונה לפיתוח אפליקציות ב- JavaScript, העושה שימוש ביותר מ- Thead בודד. לפני עידן ה- HTML5 Web Workers משום שריצת קוד JavaScript מוגבלת ל- Thread בודד, סקריפט שרץ במשך זמן רב גורם לדף להתקע מבלי אפשרות להגיב לפעולות המשתמש ומביא...
tags: , , , ,
3 comments

מיקרוסופט מבטלת את התמיכה ב- 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

הכירו את WebMatrix: חבילת טכנולוגיות וכלי לבניית אתרים בחינם מבית מיקרוסופט

יום שישי, יולי 9, 2010

WebMatrix היא חבילה חינמית המכילה את כל מה שבוני אתרים צריכים כדי לבנות אתר לאינטרנט ובחינם: היא כוללת שרת Web, שפת סקריפט בשם CSHTML (שילוב של #C ושל HTML), מסד נתונים, וכלי אחד לבניית האתר וניהול הנתונים שלו. עם WebMatrix ו- CSHTML אפשר לבנות בקלות אתר דינמי גם ללא רקע בתכנות, לנהל את מסד הנתונים של האתר, לבצע אופטימיזציה למנועי חיפוש ולהעלות אותו לחברת האחסון בלחיצת כפתור כדי לחשוף אותו לאינטרנט. החבילה, שמשקלה הוא פחות מ- 50Mb וניתן להורדה כחבילה אחת, כוללת 4 רכיבים: IIS Developer...
no comments

How to create a CSHTML and WebMatrix TweetMeme Helper

יום רביעי, יולי 7, 2010

How to create a CSHTML and WebMatrix TweetMeme Helper Microsoft has recently introduced the first beta of its new stack for building great web sites – WebMatrix. One of the key components of WebMatrix is the ASP.Net Web Pages “Razor” Syntax (or simply: CSHTML) that lets you write C# code inside the HTML markup. Helpers in WebMatrix Among the new possibilities and simplicity that this approach brings to people who build web sites, there is also the notion of Helper. Helpers are a way to use a single line of code for a common task that...

משתתפי WebsiteSpark יכולים לזכות ב- X-Box 360

יום שני, מאי 3, 2010

משתתפי WebsiteSpark יכולים לזכות ב- X-Box 360 משתתפי תוכנית WebsiteSpark מוזמנים להשתתף בתחרות Website Spark 360 בה הם יכולים לזכות בקונסולת X-Box 360! בתחרות, עליהם להזין את רשימת האתרים שפיתחו באמצעות כלי הפיתוח והשרתים שניתנו להם במסגרת WebsiteSpark בפורטל הניהול של התוכנית. החברה שתרשום את הכמות האתרים הגדולה ביותר תזכה בפרס הראשון: X-Box 360. התחרות תתקיים בין התאריכים 2.5.2010 ל- 23.5.2010, בכפוף לתקנון התחרות.   איך מצטרפים לתחרות? משתתפי WebsiteSpark: כנסו לפורטל התוכנית בכתובת http://click.email.microsoftemail.com/?qs=aac7df282d6a2a77ae2ea6a67627a3c99eec74528a22fc2463c7e28c9892d08f עם שם המשתמש והסיסמא איתם נרשמתם לתוכנית. בממשק הניהול, כנסו לתפריט Update your deployed sites והזינו את כתובות האתרים שפיתחתם במסגרת התוכנית. על האתרים להיות כאלו...
no comments