אינדקס מדריך HTML5

הקדמה ל-HTML5

 

הקדמה ל-HTML5

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

מניפולציה לתמונות עם Canvas - בעזרת הכלי הזה תוכלו לבצע שינויים ועריכה של תמונות או לצייר תמונות משלכים על אלמנט Canvas ולעשות דברים באמת מרהיבים. כך יהיה יותר קל לבנות משחקים למשל בדפדפן שלא בנויים (ותלויים) בפלאש או בתוכנה חיצונית אחרת. ה-canvas עובד עם JS ודומה לקאנבאס שיש בפלאש או ב-java.

אחסון מידע - עם sessionStorage ועם localStorage תוכלו לאחסן מידע לגבי המשתמש מבלי שום צורך בעוגיות או בבניה של פונקציות מסורבלות ב-JS שינתחו את הפלט המתקבל של העוגיה (למי שמכיר את הטרחה באחסון מידע בעזרת JS). בעזרת HTML5 נוכל לאחסן מידע שרלוונטי למשתמש בקלות רבה מאוד וגם לקרא את המידע שאחסנו אצל המשתמש בקלות מאוד.

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

טיפול ואימות טפסים - מעכשיו ב-HTML5 לא צריך סקריפטים או פלאגינים מיוחדים ב-JS כדי לבצע אימות של המידע המוקלד לתוך הטופס על ידי הגולש. ישנם אלמנטים נוספים לטופס HTML הרגיל והמוכר שיאפשרו לנו לבצע ולידציה (אימות) של המידע ללא כל צורך בשבירת ראש. למשל שדה input עם type של email, לא עוד טקסט חופשי אלא אימייל מאומת על ידי הדפדפן! עוד דוגמא טובה היא placeholder שזה בעצם מלל עם הסבר שיופיע בתוך ה-input ויעלם כאשר המשתמש ילחץ על ה-input כדי להקליד. כך אפשר להכיל דוגמא למשתמש על מנת שיבין מה נכנס בתוך השדה הזה. כמובן שיש עוד אלמנטים רבים שעליהם נלמד במדריכים הבאים.

דברים נוספים: הפיכת אלמנטים לבעלי אפשרות לגרירה (drag And drop), מיקרו-מידע שעוזר למנועי חיפוש להבין את הדף, Geolocation (מציאת המיקום הפיזי של המשתמש!), יצירת attributes מותאמים לצרכינו (לפחות בצורה תיקנית) ועוד שינויים רבים.

HTML5 נראה כמו הבטחה גדולה, שישפר את היכולות של בוני אתרים ויעלה את כולנו רמה אחת למעלה בפיתוח אתרים באינטרנט ויותר מזה. HTML5 יאפשר פיתוח אפליקציות מורכבות אונליין ואפילו משחקים מורכבים שבעבר לא היה ניתן לפתח ב-HTML ולא בשום שפת תכנות שלא תלויה באיזשהו תוסף מעיק חיצוני כמו flash או java.



יש בעיה? קושי או שאתם רוצים לשאול שאלה? הכנסו לפורום שלנו תשאלו ואנחנו נשמח לעזור!



תפריט


רשימת מדריכים