HTML5 – New Elements

10 בינואר 2012

תגיות: , ,
תגובה אחת


 


כפי שהבטחתי בפוסט הקודם אני אדבר הפעם על אלמנטים חדשים ב – HTML5.

 

כמובן שיש יותר מידי אלמנטים חדשים, ולכן אנסה לחלק לוגית בין הסוגים השונים ולספר על חלק מהאלמנטים החדשים מכל סוג.

 

 

כשאנחנו מנסים לחלק לוגית את האלמנטים החדשים, אנחנו רואים את הסוגים הבאים:



  • אלמנטים לוגיים – כלומר אלמנטים שאין להם כמעט משמעות מבחינת הפונקציונליות שלהם – אלא הם משמשים אותנו לחלוקה הגיונית יותר של האלמנטים בעמוד.


  • אלמנטים אמיתיים – אלמנטים המכילים פונקציונליות חדשה לחלוטין.


  • מאפיינים חדשים – אלמנטים קיימים שקבלו מאפיינים חדשים המאפשרים פונקציונליות חדשה.

 

 

אלמנטים לוגיים.


עד היום כשאנחנו מעמדים את עמודי ה – html אנחנו משתמשים או ב – divs או ב – tables, אין משמעות לוגית וסמנטית לאלמנטים בהקשר לתוכן שלהם, מה שמקשה את הקריאה וההבנה של התוכן למפתחים ולרובטים החוקרים את התוכן, בעזרת האלמנטים החדשים נוכל לצקת משמעות לעטיפה של התגים בהתאם לתוכן שנמצא בפנים – חשוב לזכור אין כמעט משמעות פונקציונלית בשימוש באותם אלמנטים.

 


דוגמא לאלמנטים החדשים.



  • Article – המקבילה הכי דומה ל – div, אלמנט המכיל תוכן מסויים.


  • Footer – מידע כמו זכויות יוצרים, מידע משפטי וכן הלאה.


  • Header – מידע בכותרת העמוד.


  • Nav – לינקים וניווט.


  • Section – עוטף כמה Article (דומה ל – div שעוטף div)


  • Aside – מכיל מידע ליד (על) Article


  • Figure – תמונה המסבירה תוכן של מאמר.


  • Dialog – אלמנטים כמו צ'אט וכדומה.


  • dt – מידע של משתתף אחד בדיאלוג.


  • dd – מידע של משתתף שני בדיאלוג.

 

 


שימוש באלמנטים הללו מאפשר להסתכל על האלמנטים מבלי לקרוא את התוכן שלהם ולהבין במה מדובר – לדוגמא כשרואים אלמנט מסוג nav מבינים שמדובר בניווט של העמוד, וכן הלאה.

 

 

 

אלמנטים אמיתיים.


יש הרבה אלמנטים חדשים, נראה דוגמאות לחלק מהם.

 

Mark – מאפשר לסמן מידע חשוב בתוך טקסט, לדוגמא:

 


My Name Is: <mark>Shlomo</mark>


ייתן את התוצאה הבאה

mark - html5


Progress – מאפשר לנו להשתמש ב – Progress bar אמיתי של מערכת ההפעלה כדי להציג התקדמות כלשהי למשתמש.

 


<progress max="100" value="30"></progress>

Progress HTML5


Details, Summary – מאפשר לנו להסתיר תוכן ולהציג בעזרת משהו שדומה ל – Expander

 

 


<details open="open">
    <summary>The title of the details</summary>
    <p style="padding-left:20px">
        Content Content Content Content <br />
        Content Content Content Content <br />
        Content Content Content Content <br />
        Content Content Content Content <br />
    </p>
</details>
 
Details, Summary - HTML5

 


אלו דוגמאות לאלמנטים חדשים המאפשרים לנו לעשות דברים חדשים שחלקם לא יכולנו לעשות ועבור חלקם היינו צריכים לעבוד קשה, (כמובן שיש עוד אלמנטים שלא תיארתי כאן.)

 

 

מאפיינים חדשים.


לכל מיני אלנטים קיימים נוספו מאפיינים חדשים המאפשרים יכולות חדשות, לדומא לאלמנט input עבור המאפיין type נוספו היכולות הבאות:

 


Range  – מאפשר לקבוע תחום.

 

 

Range - HTML5

 


דוגמא נחמדה לשימוש תהיה לקשר בן ה – Range לבין ה – Progress

 


<progress max="100" 
            value="30" 
            id="prog"></progress>
 
<input type="range" 
        min="0" 
        max="100" 
        value="30" 
        onchange="document.getElementById('prog').value=this.value" />

 


Email המאפשר לקבוע שבתיבת טקסט מסויימת יצטרכו להכניס Email, יחד עם מאפיין חדש בשם requierd המגדיר שבזמן submit חייב להיות שם ערך.

<input type="email" required="required" />


email requierd - HTML5


 


חשוב לשים לב שלא צריך לכתוב קוד javascript כדי לקבל את ההודעות על מה שחסר (או על התוכן שהוא מייל לא תקין).

 

יש עוד רבים כמו color, time שמאפשרים יכולות חדשות שבעבר היינו צריכים לעבוד קשה בשביל להשיג אותם (time נותן לוח שנה)

 

יש גם מאפיין בשם placeholder המאפשר להגדיר טקסט בצבע אפור כטקסט התחלתי לפני שהמשתמש התחיל לכתוב

 


<input type="text" placeholder="הקלד שם" />
plceholder - HTML5

 


(נלקח מהקורס של מכללת סלע על HTML5)

inputs - HTML5

 

 

 


אחד מהאלמנטים החדשים מאפשר לנו לעשות autocomplete מבלי תוספות רק לדאוג למידע)

 


<input type="text" list="list1" />
<datalist id="list1">
    <option value="שלמה גולדברג"></option>
    <option value="שלום כץ"></option>
    <option value="נועם כפיר"></option>
    <option value="מנחם הולידר"></option>
    <option value="חיים בריקמן"></option>
    <option value="יוסי גולדברג"></option>
    <option value="שמוליק סגל"></option>
</datalist>
 
datalist - HTML5

 

כמובן שיש עוד הרבה ולא אפרט כאן, חשוב לראות ולהבין שהיכולות של HTML5 מקילות עלינו את החיים.

 

נקודה חשובה נוספת, לא כל הפיצ'רים שתארתי כאן נתמכים בכל הדפדפנים (כל פיצ'ר ודפדפנו) – אבל הדרך לא ארוכה עד שכולם יתמכו בהכול.

 

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

תגובה אחת

  1. תותל10 בינואר 2012 ב 17:00

    תותח אחלה פוסט!! האם יהיה חלק 2 ?

    הגב