‫Htm - אחלה טיפים לבניית אתרים » HTML 5‬ http://www.htm.co.il ‫מדריכים ומאמרים בנושא בניית אתרים. כל יום משהו חדש ללמוד, וליישם.‬ Wed, 18 Jan 2012 09:32:13 +0000 http://wordpress.org/?v=2.9.2 il hourly 1 ‫ב-2010 אנחנו עוברים ל-Offline‬ http://www.htm.co.il/2010/02/28/%d7%91-2010-%d7%90%d7%a0%d7%97%d7%a0%d7%95-%d7%a2%d7%95%d7%91%d7%a8%d7%99%d7%9d-%d7%9c-offline/ http://www.htm.co.il/2010/02/28/%d7%91-2010-%d7%90%d7%a0%d7%97%d7%a0%d7%95-%d7%a2%d7%95%d7%91%d7%a8%d7%99%d7%9d-%d7%9c-offline/#comments Sun, 28 Feb 2010 15:04:38 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=1045

כחלק מתקן HTML 5 שקורם עור וגידים בימים אלו, הולכת להיכנס לחיינו אופציה חדשה, חשובה ומעניינת – Offline. המימוש של אופציה זאת תאפשר לנו בתור בוני אתרים, לבנות אפליקציות אינטרנט שיודעות לגלות מתי היוזר עובד במצב לא-מקוון, ליצור פתרונות משלימים לגולש להמשך עבודה במצב לא מקוון וכך למעשה להרחיב את האפלקציה האינטרנטית שלנו למצב בו היוזר מחובר לאינטרנט ולמצב בו הוא לא מחובר. בפוסט זה אני אנסה לסקור את הטכנולוגיה החדשה, לתת לכם אסבר כיצד תוכלו אתם לבנות אפלקציות לא מקוונות וכמובן, כהרגלי בקודש, לתת לכם דוגמא פועלת לאפליקציה כזו. יאללה בואו נרוץ על זה.

חשוב לדעת שעל-מנת לראות את הדוגמא שהכנתי, אתם צריכים לגלוש בדפדפן Firefox, החל מגרסה 3 ומעלה. בעתיד שתקן HTML 5 ישוחרר, כל הדפדפנים יתמכו, בצורה זו או אחרת בשירותים לא-מקוונים, בינתיים, אני לא ממליץ להשתמש בטכנולוגיות לא-מקוונות באתרים שתכינו (כמובן מחוסר תמיכה בשאר הדפדפנים).

לפני שאני אתן דוגמא חשוב להסביר את הצורך של הגולש במתן שירותים במצב לא-מקוון.

למה אנחנו צריכים את זה?

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

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

כיצד זה עובד?

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

אם נסכם את הפסקה הקודמת לבניית האפלקציה עצמה, נגלה שכדי לגרום לאפליקציה לעבוד במצב לא מקוון צריך לדאוג לשלושה דברים:

  1. הגדרת קבצי האתר שישמרו ב-catch באמצעות קובץ manifest.
  2. שמירת נתוני הגולש באמצעות אובייקט localStorage.
  3. טיפול בהתחברות והתנתקות הגולש באמצעות אירועי התחברות-התנתקות.

קובץ manifest

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

1
CACHE MANIFEST
1
 
1
2
3
4
5
6
# v2
index.htm
style.css
offline.js
canvas.js
images/pattern8-pattern-58a.png

כפי שאתם רואים, הקובץ מכילה רשימה של קבצים שאותם אני מעוניין לשמור במחשב הגולש לאפשרות בו הוא יעבוד במצב לא-מקוון. שמרתי קובץ תמונה, קובץ CSS, קבצי JS וקובץ htm. השורה השלישית היא כמובן הערה, חשוב לשים לב שהדפדפן פיירפוקס ישמור את רשימת הקבצים שמופיעים במאניפסט רק בפעם הראשונה שהוא מגיע לאתר ובכל פעם שנוצר שינוי בקובץ המאניפסט, כך שאם עדכנתם קובץ ואתם מעוניינים שהדפדפן ישמור מחדש את הקבצים ב-catch שנו פרט כלשהו בקובץ המאניפסט, לדוגמא: שנו את הערת הגרסה ל"v3".

לאחר שהבנו את הנקודה הזו נעבור לנקודה השנייה.

שמירת נתונים במחשב הגולש

ישנן שתי דרכים לשמור נתונים במחשב הגולש:

  • window.sessionStorage – שמירת נתונים כל עוד הדפדפן פתוח. ברגע שייסגר ימחקו כל הנתונים.
  • window.localStorage – שמירת נתונים לאורך זמן. הנתונים ישמרו גם לאחר יציאה מהדפדפן ואף כיבוי המחשב.

לשני האובייקטים הללו ישנם אותן פעולות ומאפיינים:

  • setItem(שם מפתח, ערך) – הוסף או עדכן ערך באובייקט האחסון.
  • getItem(שם מפתח) – אחזור ערך מתוך אובייקט האחסון.
  • removeItem(שם מפתח) – מחיקת ערך מתוך אובייקט האחסון.
  • length - מספר הערכים ששמורים.
  • key(אינדקס) – שם המפתח באינדקס.
  • clear() – אתחול אובייקט האחסון (מחיקת כל הערכים).

לדוגמא:

1
2
//שמירת ערך חדש
window.sessionStorage.setItem("key", "my data");
1
 
1
2
// אחזור ערך - יחזיר "my data", מחרוזת.
window.sessionStorage.getItem("key");

חשוב לציין שבדומה לעוגיות, אחסון מקומי נשמר יחסית לאתר. כלומר, מאתר htm לא נוכל לגשת לנתוני אחסון מקומי שנשמרו מאתר gmail.

אירועי אונליין/אופליין

שמרנו את כל הנתונים הרצויים על מחשב הגולש, כעת אנו צריכים להאזין לאירועים בהם הגולש עובר למצב לא-מקוון והפוך. זאת ניתן לעשות באמצעות קריאה לאירועי online ו-offline.

1
2
3
// הדרך הרגילה לקריאה לאירועי אונליין/אופליין
window.addEventListener("online", function() { ... });
window.addEventListener("offline", function() { ... });
1
 
1
2
// אפשרות לקריאה דרך jQuery
$(window).bind("online offline", function() { ... });

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

בנוסף המאפיין navigator.onLine, מחזיר true או false כאשר הדפדפן במצב אונליין, אופליין בהתאמה. המאפיין הזה נתמך ברוב הדפדפנים.

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

סיכום ודוגמא

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

בדוגמא, עברו למצב אופליין (file-> Work Offline) שנו את שורת הטקסט ולחצו save. כאשר תעברו חזרה למצב אונליין הדפדפן יעלה את התוכן שהזנתם אוטומטית לשרת ויעדכן את מסד הנתונים. שימו לב שבמצב אופליין תוכלו לגשת לעמוד האינטרנט של הדוגמא למרות שהוא נמצא בשרת מרוחק (כי למעשה קבצי האתר שמורים אצלכם במחשב בזכות קובץ המאניפסט).

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

עוד באותו נושא:

]]> http://www.htm.co.il/2010/02/28/%d7%91-2010-%d7%90%d7%a0%d7%97%d7%a0%d7%95-%d7%a2%d7%95%d7%91%d7%a8%d7%99%d7%9d-%d7%9c-offline/feed/ 12 ‫הוספת כתוביות לתגית וידאו‬ http://www.htm.co.il/2009/12/15/%d7%94%d7%95%d7%a1%d7%a4%d7%aa-%d7%9b%d7%aa%d7%95%d7%91%d7%99%d7%95%d7%aa-%d7%9c%d7%aa%d7%92%d7%99%d7%aa-%d7%95%d7%99%d7%93%d7%90%d7%95/ http://www.htm.co.il/2009/12/15/%d7%94%d7%95%d7%a1%d7%a4%d7%aa-%d7%9b%d7%aa%d7%95%d7%91%d7%99%d7%95%d7%aa-%d7%9c%d7%aa%d7%92%d7%99%d7%aa-%d7%95%d7%99%d7%93%d7%90%d7%95/#comments Tue, 15 Dec 2009 14:48:31 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=973

הוספת כתוביות לסרטון וידאו זה בהחלט לא דבר חדש. בטכניקת הארדסאב (hard-sub) ניתן לצרוב את הכתוביות על גבי הסרטון ולעלות אותו לאינטרנט ובטכניקת סופטפאב (soft-sub) ניתן להציג סרטון עם כתוביות באמצעות שילוב של טכנולוגיית פלאש. מה שאני אלמד אתכם היום היא טכניקת סופטסאב להוספת כתוביות לסרטון המתנגן בתגית וידאו.

במדריך היום אנו נשתמש בסרטון וידאו בפורמט OGG או OGV (פורמט OGV הוא למעשה מקרה פרטי של OGG מכיוון ו-OGG יכול להתייחס גם לסאונד) ובכתוביות בפורמט SRT.

היתרונות של הטכניקה שנלמד היום היא שהיא משתמשת בפורמטים פתוחים (OGG ו-SRT), היישום שלה מאוד פשוט ודינאמי ובתוך קובץ הכתוביות אנחנו יכולים לשלב תגיות HTML שיופיעו מאוחר יותר כחלק מן הכתוביות.

קוד ה-HTML

בואו תחילה נביט בקוד ה-HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
    <head>
     
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/></script>
      <script type="text/javascript" src="video_subtitles.js"></script>

      <style type="text/css">
        #subtitle {
          background-color: rgba(255, 255, 255, 0.7);
          padding:10px 0;
          position: absolute;
          bottom: 0;
          width: 100%;
          color: black;
          visibility: hidden;
          font-size: 1em;
          text-align:center;
          direction:rtl;
        }

        #video {
          width:432px;
          height:240px;
          direction:ltr;
        }
      </style>
     
    </head>
   
    <body>

        <video id="video" src="video5.ogv" controls="" subtitles="en.srt"></video>
        <div id="subtitle" style="visibility: hidden;"></div>

    </body>
</html>

וכעת ההסבר. בשורה 4 אנחנו למעשה מוסיפים כהרגלנו בקודש את ספריית ה-jQuery מתוך google. בשורה הבא אנחנו נוסיף את הסקריפט שיגרום לכל הכתוביות להופיע (מקורהסקריפט הוא מהבלוג mozbox).

לאחר מכן בין שורות 7-26 אנחנו מגדירים עיצוב CSS לוידאו ולשורת הכתוביות, אני לא ארחיב על נושא העיצוב.

ועכשיו הגענו לעיקר, שורות 32-33 בואו נביט בהם שוב:

1
2
<video id="video" src="video5.ogv" controls="" subtitles="en.srt"></video>
<div id="subtitle" style="visibility: hidden;"></div>

הוספנו למעשה שני דברים:

תגית וידאו - התגית מכילה id בשם video, קישור לקובץ הוידאו (בפורמט OGV), לחצני פעולה (המאפיין controls לא צריך לקבל שום ערך) וקישור לקובץ הכתוביות שלנו (בפורמט SRT).

אלמנט div ריק - האלמנט מכיל id בשם subtitles והוא מוסתר.

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

שימו לב! הסרטון נתמך אך ורק בדפדפנים מודרנים שתומכים בתגית video (תקן HTML 5). קרי Firefox 3.1/3.5 או chorme.

עוד באותו נושא:

]]> http://www.htm.co.il/2009/12/15/%d7%94%d7%95%d7%a1%d7%a4%d7%aa-%d7%9b%d7%aa%d7%95%d7%91%d7%99%d7%95%d7%aa-%d7%9c%d7%aa%d7%92%d7%99%d7%aa-%d7%95%d7%99%d7%93%d7%90%d7%95/feed/ 4 ‫כנס יום ה-Usability העולמי 2009 בישראל‬ http://www.htm.co.il/2009/10/27/%d7%9b%d7%a0%d7%a1-%d7%99%d7%95%d7%9d-%d7%94-usability-%d7%94%d7%a2%d7%95%d7%9c%d7%9e%d7%99-2009-%d7%91%d7%99%d7%a9%d7%a8%d7%90%d7%9c/ http://www.htm.co.il/2009/10/27/%d7%9b%d7%a0%d7%a1-%d7%99%d7%95%d7%9d-%d7%94-usability-%d7%94%d7%a2%d7%95%d7%9c%d7%9e%d7%99-2009-%d7%91%d7%99%d7%a9%d7%a8%d7%90%d7%9c/#comments Tue, 27 Oct 2009 13:16:10 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=825

כבכל שנה, גם השנה ב-12 בנובמבר (יום חמישי), נחגוג את יום השנה לשימושיות (Usibility) ביום מלא הרצאות. השנה כנס השימושיות יערך בקריית האוניברסיטה הפתוחה רעננה, ויכלול תוכניה מגוונת, מלאת הרצאות, בנושאי שימושיות.

וכך נכתב באתר UPA Israel:

"יום ה-Usability העולמי, שמטרתו לקדם את המודעות לצרכי המשתמש במוצרי טכנולוגיה, תוכנות מחשב, אפליקציות ואתרי אינטרנט, מתקיים זו השנה החמישית בכ-40 מדינות ברחבי העולם, ומצויין בישראל, ע"י ארגון מומחי ה-Usability הישראלי, UPA Israel, המסונף ל-UPA העולמי. שתיים מההרצאות בכנס הישראלי יוקדשו לנושא העולמי השנתי – Design for sustainability."

תוכנית הכנס

    מעריסה לעריסה – על המאמץ לסגור את המעגל האקולוגי בחיי היום יום
    מר ליעד אורתר, יועץ סביבתי ומנכ"ל משותף בחברת ביונדביזנס
    מעבדת החדשנות במדיה: תהליכי עיצוב חוויות אינטראקטיביות ממוקדות צרכים אנושיים
    ד"ר אורן צוקרמן, ביה"ס סמי עופר לתקשורת, מסלול תקשורת אינטראקטיבית, המרכז הבינתחומי, הרצליה
    הרשתות החברתיות – הקלות הבלתי נסבלת של החיים
    מר רונן שמיר, יועץ ומנהל תוכן לניו מדיה, ביה"ס חשיפה, האוניברסיטה הפתוחה
    החיים בעולם הספרתי – מי סופר את הספר?
    פרופ' שיזף רפאלי, ראש בית הספר לניהול, אוניברסיטת חיפה
    Eco-Usability – ידידותי למשתמש ולסביבה
    גב' לאה אהרונוביץ, מנהלת מוצר בכירה בחברת Answers.com, חברת הנהלת UPA Israel
    חדשנות באתרי תוכן
    מר גל מור, יועץ לאסטרטגיות תוכן וממשקים
    על שימושיות, הקסמת המשתמש וחווית השימוש: משחק של איזונים
    ד"ר יעקב גרינשפן, מנכ"ל שותף, חברת UI
    HTML5 מבט על התקן ממשקפי שמישות וקיימות
    ד"ר ישע סיוון, בי"ס גבוה להנדסה ולעיצוב, שנקר – המחלקה להנדסת תוכנה

    המחיר לכנס הוא 240 ש"ח (או 200 לחברי איגוד האינטרנט הישראלי). אם תספיקו עוד היום לשלוח את טופס ההזמנה התענוג יעלה לכם רק 140 ש"ח.

    להורדת טופס הרשמה

    אני אהיה נוכח בכנס, מה איתכם? אם אתם מתכוונים להגיע שלחו תגובה כאן למטה!

    עוד באותו נושא:

    ]]> http://www.htm.co.il/2009/10/27/%d7%9b%d7%a0%d7%a1-%d7%99%d7%95%d7%9d-%d7%94-usability-%d7%94%d7%a2%d7%95%d7%9c%d7%9e%d7%99-2009-%d7%91%d7%99%d7%a9%d7%a8%d7%90%d7%9c/feed/ 4 ‫פורסמו ההקלטות והמצגות ממפגש ההעשרה של ISOC‬ http://www.htm.co.il/2009/10/27/%d7%a4%d7%95%d7%a8%d7%a1%d7%9e%d7%95-%d7%94%d7%94%d7%a7%d7%9c%d7%98%d7%95%d7%aa-%d7%95%d7%94%d7%9e%d7%a6%d7%92%d7%95%d7%aa-%d7%9e%d7%9e%d7%a4%d7%92%d7%a9-%d7%94%d7%94%d7%a2%d7%a9%d7%a8%d7%94-%d7%a9/ http://www.htm.co.il/2009/10/27/%d7%a4%d7%95%d7%a8%d7%a1%d7%9e%d7%95-%d7%94%d7%94%d7%a7%d7%9c%d7%98%d7%95%d7%aa-%d7%95%d7%94%d7%9e%d7%a6%d7%92%d7%95%d7%aa-%d7%9e%d7%9e%d7%a4%d7%92%d7%a9-%d7%94%d7%94%d7%a2%d7%a9%d7%a8%d7%94-%d7%a9/#comments Tue, 27 Oct 2009 10:50:12 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=816

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

    HTML 5 – ישע סיון

    תקן תקן תרדוף – אייל סלע

    היופי שבסמנטיקה – פיתוח צד לקוח בסביבה מרובת דפדפנים – יובל רז

    אתם מוזמנים כמובן לבקר באתר של ISOC ולראות את המצגות וההקלטות של ההרצאות.

    עוד באותו נושא:

    ]]>     http://www.htm.co.il/2009/10/27/%d7%a4%d7%95%d7%a8%d7%a1%d7%9e%d7%95-%d7%94%d7%94%d7%a7%d7%9c%d7%98%d7%95%d7%aa-%d7%95%d7%94%d7%9e%d7%a6%d7%92%d7%95%d7%aa-%d7%9e%d7%9e%d7%a4%d7%92%d7%a9-%d7%94%d7%94%d7%a2%d7%a9%d7%a8%d7%94-%d7%a9/feed/ 0     ‫HTML 5 – מה נכנס ומה יוצא? – חלק ב'‬ http://www.htm.co.il/2009/10/27/html-5-%d7%9e%d7%94-%d7%a0%d7%9b%d7%a0%d7%a1-%d7%95%d7%9e%d7%94-%d7%99%d7%95%d7%a6%d7%90-%d7%97%d7%9c%d7%a7-%d7%91/ http://www.htm.co.il/2009/10/27/html-5-%d7%9e%d7%94-%d7%a0%d7%9b%d7%a0%d7%a1-%d7%95%d7%9e%d7%94-%d7%99%d7%95%d7%a6%d7%90-%d7%97%d7%9c%d7%a7-%d7%91/#comments Tue, 27 Oct 2009 08:37:00 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=766

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

    התגיות שיעזבו אותנו

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

    התגיות מהן אנו נפרדים בתקן החדש

    התגיות מהן אנו נפרדים בתקן החדש

    ואלו התגיות שעתידות לצאת משימוש ב-HTML 5:

    <acronym>
    תגית זו אחראית להגדיר את משמעות רשי תיבות. תגית זו תוחלף בתגית המוכרת לנו, <abbr>, שמתפקדת בצורה דומה ותפקידה לתת הגדרה לכל דבר.
    <applet>
    התגית שימשה להצגת אפלקציות חיצוניות (כגון Java). ב-HTML 5 אנו נשתמש בתגית ה-object במקומה.
    <isindex>
    תגית שלא נתקלתי בה בחיי אבל משום מה קיימת ב-HTML 4. תגית זו תיפקדה בדרך מיושנת להצגת טופס של שורה אחת, בכל מקרה כל מה שהיא יכלה לעשות תגית form עושה, תשמשו בה.
    <xmp>
    תגית זו שיצאה משימוש כולל, גרמה לכל התוכן שבתוכה להיות מוצג כאילו היה טקסט (גם אם הכיל תגיות HTML בתוכו). הצגה של סימן >, כטקסט נוגדת את כללי ה-SGML ולכן במקום להשתמש בתגית xmp, השתמשו בתגית PRE עם התווים המיוחדים ;gt& ו- ;lt& לסימון תחילת תגיות HTML.
    <frame> <frameset> <noframes>
    תגיות ה-frame יוצאות משימוש ב-HTML 5. הסיבה להוצאתן מהתקן היא מכיוון ופריימים מקלקלים את הנגישות של דפי האינטרנט. התגית שנתמכת ב-HTML 5 היא iframe והפרמטר היחידי שמותר להזין אליה היא src (קישור לדף חיצוני), כל שאר העיצוב יעשה ב-CSS.
    <big> <center> <dir> <font> <basefont> <s> <strike> <tt> <u>
    כל התגיות הללו הן תגיות המשמשות לעיצוב ואין להן שום משמעות סמנטית. התגיות הללו לא יתמכו בתקן של HTML 5, ובמקומן נצטרך להשתמש ב-CSS.

    אני תוהה מדוע לא הוציאו את כל תגיות שאחראיות אך ורק על עיצוב מ-HTML 5? התגיות: b, i, sub, sup, small, hr – כולן מיותרות ב- HTML 5 שמתיימר להפריד בין עיצוב לתוכן. בתקן החדש (לפי W3C) כל התגיות הללו הוגדרו מחדש, אך עדיין לא ברור מה הצורך בהן בתור תגיות HTML.

    מה אתם חושבים על כך? האם גם אתם חושבים שהתגיות שתפקידן הוא רק תצוגתי צריכות לצאת מ-HTML 5?

    עוד באותו נושא:

    ]]>     http://www.htm.co.il/2009/10/27/html-5-%d7%9e%d7%94-%d7%a0%d7%9b%d7%a0%d7%a1-%d7%95%d7%9e%d7%94-%d7%99%d7%95%d7%a6%d7%90-%d7%97%d7%9c%d7%a7-%d7%91/feed/ 9     ‫HTML 5 – מה נכנס ומה יוצא? – חלק א'‬ http://www.htm.co.il/2009/10/26/html-5-%d7%9e%d7%94-%d7%a0%d7%9b%d7%a0%d7%a1-%d7%95%d7%9e%d7%94-%d7%99%d7%95%d7%a6%d7%90-%d7%97%d7%9c%d7%a7-%d7%90/ http://www.htm.co.il/2009/10/26/html-5-%d7%9e%d7%94-%d7%a0%d7%9b%d7%a0%d7%a1-%d7%95%d7%9e%d7%94-%d7%99%d7%95%d7%a6%d7%90-%d7%97%d7%9c%d7%a7-%d7%90/#comments Mon, 26 Oct 2009 15:04:16 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=731

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

    התגיות שנוספות ב-HTML 5

    נוספו כ-26 תגיות חדשות ל-HTML 5. חלקן מאוד אינטאוטיביות ושמענו על בואן (video, audio) וחלקן הזויות מאוד, אני אסביר כאן את שימושן של כולן. חילקתי את נושא התיגיות החדשות לכמה חלקים: האחד – תגיות המחלקות את הדף למקטעים, השני - תגיות המשמשות לאפיון של טקסט, השלישי- תגיות להצגת מולטימדיה והאחרון - תגיות נוספות.

    1. חלוקת הדף למקטעים:

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

    <header>
    תחילת העמוד – תגית זו תוחמת בתוכה את החלק העליון במסמך האתר, החלק שתואם לכל שאר הדפים. תגית זו יוצרת למעשה הפרדה של החלק העליון שברוב הפעמים הוא לא החלק המרכזי של הדף.
    <footer>
    כמו התגית הקודמת, אך הפעם התיחום הוא של החלק התחתון.
    <aside>
    תגית התוחמת בתוכה את החלק באתר שנמצא בצד (אם יש כזה).
    <nav>
    תגית זו תוחמת בתוכה את החלק במסמך אשר דרכו ניתן לנווט באתר. לרוב, התפריט של האתר.
    <section>
    תגית זו מחלקת את המסמך לחלקים, תגית זו היא כללית ונשתמש בה כאשר לא נמצא תגית מתאימה יותר. אני חושב שהיא תתן לנו חלופה לא רעה לשימוש המוגזם בתגית div.
    <article>
    תגית התוחמת בתוכה קטעי מאמר. באתרי מאמרים ובלוגים החלק המרכזי יתחם בתגית זו.
    HTML 5 - חלוקה הגיונית

    HTML 5 - חלוקה הגיונית

    2. תגיות טקסט:

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

    <time>
    כשמה כן היא, תגית התוחמת בתוכה זמן או תאריך.
    <details>
    תגית המכילה פרטים נוספים על אלמנט כלשהו. לתגית יש מאפיין open, שמקבל true או false, ולפיו מוצגים או לא מוצגים הפרטים שתחומים בתגית זו. ניתן לצרף לתגית זו כותרת באמצעות התגית legend. כותרת זו תשמש גם כפתור להצגה והסתרה של טקסט.
    <mark>
    בדומה לתגיות em ו-strong שתפקידן להדגיש, תגית זו תוחמת בתוכה טקסט מסומן.
    <progress>
    תפקיד תגית זו הוא להציג התקדמות של תהליך. לרוב תתחום בתוכה אחוזים להתקדמות של הורדה או טעינה.
    <meter>
    התגית הזאת מייצגת כמות. הכמות תיהיה יחסית למינימום מוגדר ומקסימום מוגדר. לדוגמא:

    1
    <meter max="10" min="0">2 from 10</meter>
    <output>
    בדומה לתגיות, code ו-samp, תגית output תפקידה לייצג סוג של פלט, כמו כזה של קוד תכנות.
    <dialog>
    תגית שתוחמת בתוכה שיחה. אם יש טקסט שמייצג שיחה בין אנשים רצוי לתחום אותו בתגית הזאת.
    תגיות טקסט ב-HTML 5

    תגיות טקסט ב-HTML 5

    3. תגיות מולטימדיה וטכנולוגיות חדשות:

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

    <video>
    כשמה כן היא תגית המציגה וידאו. בHTML 5 לא נהיה חייבים להיות תלויים בטכנולוגיות קוד סגור כמו פלאש להצגת וידאו, ונוכל פשוט להציג וידאו דרך הדפדפן בעזרת קוד html פשוט. לדוגמא:

    1
    2
    3
    <video src="שם קובץ.ogg" controls width="320" height="240">
            <a href="שם קובץ.ogg">אין לכם תמיכה ב-HTML 5 הורידו את הסרט</a>
    </video>

    והדוגמא בפועל:

    <audio>
    תגית שמע, פועלת כמו תגית וידאו למשמשת לניגון קבצי סאונד. נעבור לדוגמא:
    <figure>
    תגית זו משמשת על מנת לקבץ בתוכה תגיות מולטימדיה, כמו video ו- audio. ניתן להוסיף את תגית legend על מנת להציג כותרת לקבוצה זו.
    <source>
    תגית שמכילה URL לקובץ סאונד או וידאו. לרוב תופיע בתוך תגיות וידאו ואודיו.
    <embed>
    אנחנו מכירים כבר את התגית הזאת, מהקוד של הצגת פלאש, אבל רק ב-HTML 5 היא תיכנס באופן רשמי. תפקידה להציג תוכן מוטבע (חיצוני). לדוגמא:
    <canvas>
    אם עדיין לא שמעתם על canvas הגיע הזמן לשמוע. קאנבס זוהי טכנולוגיה ליצירת גרפיקה בעזרת קוד html. אני לא ארחיב על כך יותר במאמר זה אבל אני בוודאי אכתוב בעתיד כאן ב-htm מאמר על טכנולוגיה זו. צפו בדוגמא:

    דפדפן זה לא תומך בקאנבס!


    בדוגמא זו ציירתי ריבוע אדום בקאנבס, אבל אפשר לעשות הרבה יותר מזה, צפו בלינק הבא – ציור תמונות בקאנבס.

    4. תגיות נוספות:

    לאחר חלוקה יפה לשלוש קטגוריות של תגיות, אסביר עכשיו על שאר התגיות שיתוספו לנו ב-HTML 5:

    <datalist>
    בדומה למדריך שנתתי לכם לפני כמה ימים, שמסביר איך להוסיף תיבת הצעות לתיבת טקסט, תגית זאת למעשה מאפשרת להוסיף, דרך קוד ה-HTML, אפשרויות לבחירה לתיבת טקסט. קוד לדוגמא:

    1
    2
    3
    4
    5
    6
    7
    <input id="myCar" list="cars" />
                <datalist id="cars">
                <option value="BMW">
                <option value="Ford">
                <option value="Volvo">
                <option value="Porche">
                </datalist>

    וכעת לדוגמא בפועל (לי זה עבד רק באופרה, בגרסה החדשה ביותר):
    <command>
    עד שהומצאה התגית הזאת היינו משתמשים בתגית input על מנת ליצור כפתורים שמבצעים פעולות. בעזרת התגית החדשה נוכל ליצור כפתורים שיבצעו פעולות. ניתן לבחור את סוג כפתור הפעולה (מאפיין type) מתוך שלוש אפשרויות: command (ברירת המחדל, מתנהג כמו input type="button"), checkbox, radio.
    <event-source>
    בתגית זו פונים ל-URL (דרך מאפיין ה-src) של מסמך מסוג, text/event-stream. תגית זו יוצרת חיבור למסמך זה ומאפשרת לטעון אירועים מהמסמך. עוד לא נתקלתי בדוגמא לשימוש בתגית זו ברשת אך אני בטוח שנגלה דוגמאות רבות בעתיד.
    <input>
    אתם אולי חושבים שהתבלבלתי, נכון, תגית ה-input אומנם לא חדשה והיא קיימת כבר הרבה זמן, אך ב-HTML 5 נוצרו סוגי Input חדשים ומאוד שימושיים. בעוד שעד היום, כשרצינו לתת ממשק נוח למילוי טפסים השתמשנו בשפות צד לקוח (כמו JS), ב-HTML 5 הטיפול בצד הלקוח עובר לדפדפן. לשם הדוגמא, כאשר ארצה ליצור תיבת טקסט שמקבלת לתוכה תאריך, הפתרון הנוח ב-HTML 5 עושה לי את החיים קלים.
    הקוד:

    1
    <input type="datetime" />

    והתוצאה (על מנת לראות את התוצאה גלשו בגרסא האחרונה של אופרה):

    חוץ מ-datetime ישנם אפשרויות רבות חדשות. והן:

    datetime-local,date,time,month,week,number,range,email,url,search,tel,color.
    אתם מוזמנים לבדוק את התוצאה שלהן באופרה.

    זה הכל! במאמר זה נתתי לכם סקירה מלאה של התגיות החדשות שנזכה להכיר ב-HTML 5. אנחנו עדיין לא שם, והדפדפנים עדיין לא תומכים בתקן (שימו לב שהתקן עדיין לא נכתב במלואו ואושר ע"י W3C), אך בהחלט מעניין לגלות מה תומן לנו העתיד.

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

    קישורים קשורים:

    עוד באותו נושא:

    ]]>     http://www.htm.co.il/2009/10/26/html-5-%d7%9e%d7%94-%d7%a0%d7%9b%d7%a0%d7%a1-%d7%95%d7%9e%d7%94-%d7%99%d7%95%d7%a6%d7%90-%d7%97%d7%9c%d7%a7-%d7%90/feed/ 19     ‫סיכום מפגש העשרה של איגוד האינטרנט הישראלי 2009‬ http://www.htm.co.il/2009/09/28/%d7%a1%d7%99%d7%9b%d7%95%d7%9d-%d7%9e%d7%a4%d7%92%d7%a9-%d7%94%d7%a2%d7%a9%d7%a8%d7%94-%d7%a9%d7%9c-%d7%90%d7%99%d7%92%d7%95%d7%93-%d7%94%d7%90%d7%99%d7%a0%d7%98%d7%a8%d7%a0%d7%98-%d7%94%d7%99%d7%a9/ http://www.htm.co.il/2009/09/28/%d7%a1%d7%99%d7%9b%d7%95%d7%9d-%d7%9e%d7%a4%d7%92%d7%a9-%d7%94%d7%a2%d7%a9%d7%a8%d7%94-%d7%a9%d7%9c-%d7%90%d7%99%d7%92%d7%95%d7%93-%d7%94%d7%90%d7%99%d7%a0%d7%98%d7%a8%d7%a0%d7%98-%d7%94%d7%99%d7%a9/#comments Mon, 28 Sep 2009 18:53:43 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=613

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

    בהתחלה התכנסנו, באוויר נשמעו קולות על נגישות אינטרנט ו-HTML5, טוב הגעתי למקום הנכון. בין הבורקס לקפה השחור הספקתי להרשם לאיגוד האינטרנט הישראלי (70 ש"ח כולל מע"מ). אם תשאלו למה, אני אענה לכם מה שאמרה לי הבחורה הנחמדה שרשמה אותי:

    1. זה נותן לך כניסה להרצאה הזו בחינם ולכל ההרצאות הבאות השנה

    2. זה תורם לאיגוד האינטרנט הישראלי

    הנקודה הראשונה קנתה אותי ולגבי הנקודה השנייה אני עוד ארחיב בהמשך.
    לבסוף, התכנסנו קבוצה של כ-60 איש, בגילאים מגוונים והתחילה ההרצאה הראשונה, עתיד ה-web ותקניו, המרצה- ד"ר ישע סיוון.

    עתיד ה-web מפי ראש משרד ה-W3C

    ד"ר ישע הוא ראש משרד ה-W3C הישראלי (ההרצאה השנייה הסבירה לנו על הגוף האיזוטרי הזה) והיה המרצה הראשון. ישע התרכז בשני נושאים:

    • מה זה ISOC ישראל
    • HTML 5 והגעתו הקרובה (?)

    על מנת להסביר את הנקודה הראשונה אנא הביטו באיור הבא:

    אני רוצה להקדים ולומר למי שלא יודע: ISOC הוא איגוד האינטרנט הישראלי, הוא איגוד ללא מטרות רווח, הוא זה שרושם את הדומיינים עם סיומת IL (מכאן הכנסתו המרכזית), מפעיל את מחלף האינטרנט הישראלי (IIX) ואת שרת השורש של ישראל. מכיוון והאיגוד פועל ללא מטרות רווח (מנהלי הארגון פועלים בהתנדבות), הכסף שמגיע אליו (רישום דומיינים, תרומות ואנשים כמוני, שנרשמים לאיגוד) שנאסף משמש לקידום האינטרנט בישראל.

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

    STS – מאגר נתונים על האינטרנט בישראל. המאגר שISOC מעוניינים לבנות ירכז בתוכו נתונים כגון מספר הדומיינים הרשומים בישראל, מהירות הגלישה הממוצעת ומידע על השימוש באינטרנט במגזר העסקי. יכול להיות שכבר שמעתם על פרוייקט זה מכיוון ו-ISOC יצאה לפני מספר חודשים בקריאה לבעלי מידע ונתונים על האינטרנט בישראל לשתף אותו עם ISOC לצורך בניית המאגר.

    OPN – קידום מערכות פתוחות וקוד פתוח. ISOC נותנת תמיכה כללית (עד 50,000 ש"ח) בכל שנה לפרוייקטי קוד פתוח שיעזרו ויפתחו את האינטרנט בישראל, שם הפרוייקט הוא "קול קורא". ההרשמה לפרוייקט השנה כבר נסגרה, אבל אתם מוזמנים לחכות לשנה הבאה עם הרעיון שלכם.

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

    וכעת שדיברנו די והותר על ISOC נעבור לחלק המעניין של ההרצאה של ד"ר ישע. עתיד האינטרנט – HTML5.

    HTML 5, עתיד האינטרנט

    בחלק השני של הרצאה של ד"ר ישע, הוא פתח בנושא שמאוד מדובר בברנז'ת בוני האתרים, הנושא החם (והחרוש) ביותר, HTML5. אנחנו כבר יכולים לראות דפדפנים שתומכים ב-HTML5 למרות שהוא עדיין לא קרוב לצאת באופן רשמי (לפי מנכ"ל W3C העולמי הוא עתיד לצאת רק בסוף 2011). ד"ר ישע נתן הסבר על HTML5 בכמה נקודות תמצתיות:

    • חזון- HTML5 יהיה מסמך הרצה ולא מסמך סטטי. לא יהיה שימוש של תוספים כמו javascript, flash, silverlight.
    • W3C היא ספינת הדגל - HTML5 ילך יד ביד עם התקנים, הכל כלול וכבר בפנים (SVG,CSS,HTML,JS).
    • תמיכה בתוך התקן – בנוסף לנקודה הקודמת HTML5 יתמוך בתוכו: בוידאו, בתצוגות שונות (ווב, סלולרי, טלויזיה), SVG, CANVAS, בריאקציה עם מקשי המקלדת ותמיכה בגלישה לא מקוונת – offline (תמיכה שראינו כמותה כמעט אך רק בשירות Gears של גוגל).
    • תמיכה בתקנים ישנים
    • תמיכה בכל הדפדפנים
    • תצוגה זהה לכל הדפדפנים – בניגוד למה שחווינו עם התקנים בעבר ובהווה, ב-HTML5 לא נצטרך להתאים כלל את הקוד שלנו לכל דפדפן והתצוגה של קוד אחד תיהיה זהה בכל הדפדפנים.
    • טיפול בשגיאות – עד HTML5 כאשר כתבנו קוד לא תקין לא היתה שום הודעה על שגיאה בקוד (בניגוד לשפות אחרות שמתריעות על כך), מצב זה גרר קונבנציה בקרב בוני האתרים של אי-התייחסות לכתיבה תקינה, פרט לצדיקים מעטים שנתנו חשיבות לקוד תקין. HTML5 לעומת זאת יטפל בתוכו בבעיות של תקינה ובכך יעזור לבוני האתרים לכתוב קוד תקין יותר.
    הבעיה הצפויה ל-HTML5 היא שהתקן לHTML5 עתיד לצאת רק בדצבמר 2011, וכבר דפדפנים עושים בו שימוש, למרות שעוד לא הוחלט באופן סופי כיצד הדברים צריכים להעשות לפי התקן. מצב כזה יכול לגרום לבעיות של אי-תאימות בין דפדפנים בהמשך.
    הפחד של תומכי התקינה היא שעד שיצא התקן באופן רשמי, החברות הגדולות בשוק האינטרנט (גוגל ומיקרוסופט), יקבעו עובדות בשטח ויממשו את HTML5 לא לפי התקן הסופי (העתידי) ובכך יבטלו את אחת הנקודות החשובות ביותר ש-HTML5 שואף אליו, תאימות בין הדפדפנים.

    דומגאות לשימוש בHTML5:

    • פחות כתיבת קוד JS, יותר קוד מובנה. לדוגמא, תגית חדשה של HTML5 שתיצור שדה לבחירת ימים:
      1
      <input type="date" />
    • תגית מובנת להצגת סרטונים <video>
    • ציור בצד לקוח באמצעות canvas
    • Drag-Drop מובנה
    • מיקום גיאוגרפי (Geolocation API) מובנה
    • בדיקת איות בתוך שדות טקסט
      1
      <textarea spellcheck="true">

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

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

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

    עוד באותו נושא:

    ]]>     http://www.htm.co.il/2009/09/28/%d7%a1%d7%99%d7%9b%d7%95%d7%9d-%d7%9e%d7%a4%d7%92%d7%a9-%d7%94%d7%a2%d7%a9%d7%a8%d7%94-%d7%a9%d7%9c-%d7%90%d7%99%d7%92%d7%95%d7%93-%d7%94%d7%90%d7%99%d7%a0%d7%98%d7%a8%d7%a0%d7%98-%d7%94%d7%99%d7%a9/feed/ 6