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

איך אנחנו עושים את זה היום?

את האמת – נכון שיצא לכם פעם להשתמש ב- CSS Classes או במאפיינים לא סטנדרטים של אלמנטים כדי לשמור עליהם מידע ולהשתמש בו בקוד JavaScript?

לדוגמא, נניח שאנחנו רוצים להציג מאפיינים של רכב ב- div כלשהו, ולשמור מידע כלשהו על הרכב. עד היום היינו מוסיפים מאפיינים חופשיים לאלמנטי HTML:

<div id="car" brand="mazda" model="3">
  Guy is very happy with his Mazda 3.
</div>

או ע”י הוספת CSS Classes:

<div id="car" class="mazda">
  Guy is very happy with his Mazda 3.
</div>

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

1. ה- HTML אינו תקין מבחינת, ולא עובר ואלידציה של W3C.
2. CSS Classes נועדו להוספת סגנונות עיצוב ולא לשמירת מידע נוסף על אלמנטים.

איך עושים את זה ב- HTML5: הכירות עם מאפייני ה- *-data

HTML5 מאפשר לנו להוסיף מידע חופשי לכל אלמנט ע”י שימוש בקידומת –data. הצורה המדוייקת היא  *-data כאשר * היא המאפיין אותו אנחנו רוצים להוסיף לאלמנט.

לדוגמא:

<div id="car" data-brand="mazda" data-model="3">
  Guy is very happy with his Mazda 3.
</div>

הקוד הזה הוא קוד תקין מבחינת תקן ה- HTML5 ויעבור ואלידציה.

איך ניגשים למאפיינים בקוד JavaScript?

עד היום, היינו ניגשים בקוד JavaScript למאפיינים של אלמנטים באופן הבא:

<script>
  // Get the cal element
  var mycar = document.getElementById('car');
 
  // Get the "data-brand" attribute value (returns "mazda")
  var brand = mycar.getAttribute("data-brand");
 
  // Change "data-brand" to "toyota"
  mycar.setAttribute("data-brand", "toyota");
 
  // Removes "data-brand" attribute entirely
  mycar.removeAttribute("data-brand");
</script>

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

<script>
  // Get the cal element
  var mycar = document.getElementById('car');
 
  // Get the "data-brand" attribute value (returns "mazda")
  var brand = mycar.dataset.brand;
 
  // Change "data-brand" to "toyota"
  mycar.dataset.brand = 'toyota';
 
  // Removes "data-brand" attribute entirely
  mycar.dataset.brand = null;
</script>

תמיכה בדפדפנים

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

<script>
  // Get the cal element
  var mycar = $('#car');
 
  // Get the "data-brand" attribute value (returns "mazda")
  var brand = mycar.data("brand");
 
  // Change "data-brand" to "toyota"
  mycar.data("brand", "toyota");
 
  // Removes "data-brand" attribute entirely
  mycar.data("brand", null);
</script>

תהנו!

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

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

אינטרנט אקספלורר 6 שוחרר ב- 2001, אינטרנט אקספלורר 7 ב- 2006, כאשר האינטרנט היה שונה מאד ממה שהוא היום, ואי אפשר לצפות שדפדפן בן 10 שנים יציג אתרים באותו אופן כמו כרום 12, פיירפורס 5 ואקספלורר 9.

תזכורת – מהן Conditional Comments?

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

לדוגמא:

<!--[if IE 6]>
  <link type=”text/css” rel=”stylesheet” href=”css/ie6.css” />
<![endif]-->

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

למה מסירים את התמיכה?

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

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

אינטרנט אקספלורר 10 לא יתייחס יותר ל- Conditional Comments כיוון שאין בהן יותר צורך.

עוד פוסטים שכדאי לקרוא:

• גירסת מפתחים שניה לאינטרנט אקספלורר 10: תכונות מתקדמות של HTML5
• סקירה טכנית: כלי הפיתוח של Internet Explorer 9 - חלק 1 - מבוא
• כלי הפיתוח של Internet Explorer - חלק 2 - עבודה עם HTML ו- CSS
• פיתוח אתרי HTML5 מודרניים עם Modernizr
• HTML5: קריאת תוכן קובץ בצד הלקוח ב- JavaScript עם File API
• HTML5: עבודה עם קבצים בצד הלקוח באמצעות File API

תהנו!

לא טעיתם… פוסט ריק…

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

Feature Detection במקום Browser Detection

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

הכירו את Modernizr

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

תכונות מרכזיות:

• Feature Detection של עשרות תכונות של HTML5 ו- CSS3.
• API נוח דרך אובייקט מרכזי אחד
• הוספת CSS Classes בהתאם לתמיכה או לאי תמיכה ביכולות
• מהיר וקל לשימוש

הוספת Modernizr לאתר

הדרך הפשוטה ביותר להוסיף את Modernizr לאתר היא להוסיף את הספרייה כחבילת NuGet מתוך Visual Studio. פשוט הצביעו על הפרוייקט, בחרו באפשרות Manage Nuget Packages, חפשו את Modernizr הוסיפו לפרוייקט.

אפשרות אחרת היא להוריד את הספרייה מאתר הפרוייקט ולהוסיף אותה ידנית.

בכל מקרה, לפני השימוש נוסיף הפניה לקובץ ה- JavaScript בדפי ה- HTML שלנו.

<head>
  <title>Modernizr Demo</title>
  <script src="Scripts/modernizr-2.0.6.js" type="text/javascript"></script>
</head>

מה מקבלים כשמריצים?

אם נריץ דף עם הפניה לספריית Modernizr, אפילו מבלי שעשינו כל שימוש בה, כבר נוכל לראות מה היא עושה. כש- Modernizr נטענת, היא בודקת אילו תכונות נתמכות בדפדפן המשתמש ומוסיפה CSS Classes לאלמנט הראשי של הדף.

מבט זריז בכלי הפיתוח של הדפדפן, יראה לנו את התמונה הבאה:

הספרייה הוסיפה CSS Classes לאלמנט ה- HTML הראשי של הדף בהתאם לתכונות הנתמכות. לדוגמא, רואים שבאינטרנט אקספלורר 9 יש תמיכה ב- Canvas, איך אין תמיכה ב- WebGL וב- Touch.

שימוש 1 – תמיכה בתכונות CSS3

בדוגמא הזו נראה איך שימוש באותן CSS Classes שנוספו ע”י Modernizr עוזרות לנו כשאנחנו רוצים לעשות שימוש בתכונה כלשהי של CSS3. נניח שבעיצוב האתר שלנו אנחנו רוצים להשתמש ב- border-radius (תכונה חדשה ב- CSS3).

<div class="corners">
  <p>Hey, does your browser support this CSS3 feature?</p>
</div>

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

<style>
  .corners {
    -moz-border-radius: 17px 17px 17px 17px;
    -webkit-border-radius: 17px 17px 17px 17px;
    border-radius: 17px 17px 17px 17px;
      
    width: 100px;
    height: 100px;
    background-color: blue;
    color: white;
    padding: 15px;
  }
</style>

בקוד הנ”ל יש 2 בעיות:

השימוש ב- Modernizr פותח את 2 הבעיות האלה:

<style>
.borderradius .corners {
  border-radius: 17px 17px 17px 17px;
      
  width: 100px;
  height: 100px;
  background-color: blue;
  color: white;
  padding: 15px;
}
  
.no-borderradius .corners {
  background-image: url('Images/background.png');
      
  width: 100px;
  height: 100px;
  background-color: blue;
  color: white;
  padding: 15px;
}
</style>

1. הספרייה מבטלת את הצורך ב- Vendor Prefix ומאפשרת להשתמש בהגדרה בודדת ללא קידומת. הספרייה דואגת להגדרה המתאימה הנדרשת לכל הדפדפנים התומכים.
2. מאחר והספרייה מוסיפה את ה- CSS Classes המתאימים למצב תמיכה או אי תמיכה ביכולת, אנחנו יכולים לתת הגדרות עיצוב ל- 2 המצבים, ועבור מצב בו הדפדפן לא תומך בתכונה לתת עיצוב חלופי (למשל, לממש את הרקע באמצעות תמונה).

נסו להריץ את הדוגמא עצמכם וראו איך היא מוצגת על הדפדפן שלכם.

שימוש 2 – בדיקת תמיכה בתכונות HTML5 דרך JavaScript

HTML5 כולל מספר JavaScript API’s חדשים, כגון geolocation, File API, Web Sockets ועוד, וכמו מגוון רחב של אלמנטים ב- HTML5 הם אינם ממומשים באופן מלא בכל הדפדפנים, וכמובן לא בגירסאות קודמות שלהן שנמצאים בשימוש אצל המשתמשים.

בתור Best Practice לשימוש ביכולות האלה באתרים מודרניים, חובה עלינו לוודא שקיימת תמיכה לפני שאנחנו מנסים לעבוד עם ה- API’s החדשים.

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

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

<script>
 
  // Check if there is support for geolocation
  if (Modernizr.geolocation) {
 
    // If there is support - get the current position
    navigator.geolocation.getCurrentPosition(
      function (position) {
        document.writeln(position.coords.latitude
          + " " + position.coords.longitude);
      });
    }
 
  // If no support - notify the user
  else {
    alert("Your Browser does not support GeoLocation.");
  }
</script>

נסו להריץ את הדוגמא עצמכם וראו איך היא מוצגת על הדפדפן שלכם.

שימוש 3 – תמיכה בתגיות הסמנטיות החדשות של HTML5

HTML5 כולל מספר תגיות סמנטיות חדשות כגון header, footer, nav, article ועוד שמוסיפות משמעות סמנטית לאלמנטים בדף, ועוזרת מגוון מכשירים, דפדפנים ומנועי חיפוש להבין טוב יותר את תוכן הדף.

לדוגמא, בדף הבא מוגדר אלמנט header לראש הדף, footer לתחתית הדף ואיזור הניווט מוגדר בתוך האלמנט nav.

<!DOCTYPE html>
 
<html>
<head>
  <title>Semantic Tags</title>
  <style>
    header { color: blue; }
  </style>
</head>
 
<body>
  <header>
    <h1>Semantic Header</h1>
  </header>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
    </ul>
  </nav>
  <footer>All right reserved.</footer>
</body>
 
</html>

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

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

ע”י הוספת השימוש ב- Modernizr לדף, מבוצע קוד JavaScript שמייצר את התגיות הסמנטיות האלה ב- DOM ועוזר לדפדפנים הישנים להתמודד איתם בצורה טובה יותר. בנוסף, העיצובים ששמנו על התגיות הסמנטיות יעבדו.

סיכום

Modernizr מאפשרת לנו להשתמש במרכיבים של HTML5, CSS3 ו- JavaScripts API’s מודרניים כדי לבנות אפליקציות חדשניות, לזהות בצורה קלה אילו תכונות נתמכות בדפדפן של המשתמש ולתת את הטיפול המתאים.

תהנו!

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

קריאת תוכן הקובץ עם האובייקט FileReader

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

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

• (FileReader.readAsBinaryString(File – קריאת תוכן הקובץ וקבלת ייצוג בינארי של הקובץ כמחרוזת בשדה result. כל תו במחרוזת מיוצג ע”י מספר בין 0 ל- 255.
• (FileReader.readAsText(File, opt_encoding – קריאת תוכן הקובץ כטקסט, לפי הקידוד שמועבר כפרמטר. השדה result יכיל מחרוזת עם התוכן הטקסטואלי של הקובץ. קידוד ברירת המחדל הוא UTF8, והשדה הזה הוא אופציונאלי.
• (FileReader.readAsDataURL(File – השדה result יכיל ייצוג של הקובץ כ- data URL (מחרוזת בסגנון: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA .
• (FileReader.readAsArrayBuffer(File – השדה result יכיל את תוכן הקובץ כאובייקט ArrayBuffer.

אחראי שקראנו את תוכל הקובץ בכל אחת מהדרכים האלה, ניתן להשתמש באירועים onloadstart, onprogress, onload,onabort, onerror, ו- onloadend כדי לעקוב אחרי ההתקדמות ולבצע פעולות בהתאם.

דוגמא: קריאת תוכן קבצי תמונה והצגתם באתר

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

<!DOCTYPE html>
<html>
<head>
  <title>FileReader Sample</title>
</head>
<body>
  <input type="file" id="files" name="files[]" multiple="multiple" />
  <div id="list">
  </div>
  <script>
    function handleFileSelection(evt) {
      var output = [];
 
      // Go over the list of files
      var files = evt.target.files;
      for (var i = 0, f; f = files[i]; i++) {
 
        // Only process image files.
        if (!f.type.match('image.*')) {
          continue;
        }
 
        var reader = new FileReader();
 
        // Closure to capture the file information.
        reader.onload = function (e) {
 
          // Render the image
          var span = document.createElement('span');
          span.innerHTML = '<img src="' + e.target.result + '"/>';
          document.getElementById('list').insertBefore(span, null);
        };
 
        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
      }
    }
 
    // Check for the various File API support.
    if (window.File && window.FileReader && window.FileList && window.Blob) {
 
      // File API is supported.
      document.getElementById('files')
        .addEventListener('change', handleFileSelection, false);
 
    } 
    else {
      alert('File API is not supported.');
    }
  </script>
</body>
</html>

• עבור כל קובץ, אנחנו יוצרים מופע של FileReader וקוראים לפונקציה readAsDataURL עם הקובץ לקריאה כפרמטר.
• הפונקציה readAsDataURL קוראת את תוכן הקובץ באפון אסינכרוני, ובסיום הקריאה מפעילה את האירוע onload, ולכן אנחנו נרשמים לטיפול באירוע הזה.
• כאשר טעינת הקובץ הסתיימה, בתור טיפול באירוע onload, אנחנו יוצרים span חדש עם תמונה בתוכו שמציגה את תוכן הקובץ, ומוסיפים אותו ל- div הריק בדף.

בהרצת הדוגמא – נבחר מספר קבצי תמונה במחשב האישי ואלה יוצגו בדף ה- HTML שלנו.

תמיכה בדפדפנים

• אינטרנט אקספלורר 10 תומך ב- File API החל מגירסת המפתחים השניה, אותה ניתן להוריד מאתרwww.IETestDrive.com.
• אם אתם רוצים לשחק ב- File API כבר באינטרנט אקספלורר 9, תוכלו להוסיף את התמיכה בקלות ע”יהתקנת תוספת מיוחדת מתוך HTML5 Labs.
• כרום תומך ב- File API החל מגירסא 6, ופיירפוקס מגירסא 3.6.

תהנו!

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

למה בכלל צריך את זה?

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

באמצעות File API, אחת הספסיפיקצייות החדשות ב- HTML5, ניתן לגשת לקבצים בצד הלקוח, לדוגמא כדי ליצור Thumbnail של תמונה ולהציג אותה באתר עוד לפני שהתמונה הועלתה לשרת, כדי לשמור נתונים לקבצים מקומיים כאשר המשתמש לא מחובר לרשת ועוד.

הכירות עם File API

File API מציע מספר interfaces חדשים כדי לעבוד עם הקבצים המקומיים.

1. File – מייצג קובץ בודד. מספק מידע לקריאה בלבד אודות הקובץ כגון שם, גודל, סוג הקובץ וכן גישה ל- file handle.
2. FileList – מעיין רצף/מערך של אובייקטים מסוג File.
3. Blob – מאפשר חיתוך קובץ למערך של בתים.
4. FileReader – מאפשר גישה לתוכן הקובץ.

דוגמא – בחירת קבצים והצגת פרטיהם

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

נתחיל מדף HTML המאפשר למשתמש לבחור מספר קבצים.

<!DOCTYPE html>
<html>
<head>
  <title>File API Sample</title>
</head>
<body>
  <input type="file" id="files" name="files[]" multiple="multiple" />
  <div id="list">
  </div>
</body>
</html>

בדף ה- HTML הנ”ל 2 אלמנטים. תגית ה- input הראשונה מאפשרת למשתמש לבחור מספר קבצים להעלאה (שימו לב לשימוש במאפיין multiple). ה- div השני ריק, ואליו נוסיף פרטים בהמשך.

בדיקת תמיכת הדפדפן ב- File API

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

<script>
if (window.File && window.FileReader && window.FileList && window.Blob) {
  // File API is supported.
}
else {
  alert('File API is not supported.');
}
</script>

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

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

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
 
  // File API is supported.
  document.getElementById('files')
    .addEventListener('change', handleFileSelection, false);
 
} else {
  alert('File API is not supported.');
}

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

function handleFileSelection(evt) {
  var output = [];
 
  // Go over the list of files
  var files = evt.target.files;
  for (var i = 0, f; f = files[i]; i++) {
 
    // Get the properties of the individual file
    output.push('<li><strong>', f.name, '</strong> (',
              f.type || 'n/a', ') - ',
              f.size, ' bytes, last modified: ',
              f.lastModifiedDate, '</li>');
  }
 
  // Add the output to the empty div
  document.getElementById('list').innerHTML = 
    '<ul>' + output.join('') + '</ul>';
}

כאשר נבחרים קבצים, אנחנו פונים לאובייקט ev.target (שעליו התרחש האירוע click – אובייקט ה- input control), ומגיעים לשדה files, שהוא אובייקט מסוג FileList. אנחנו רצים בלולאה על אוסף הקבצים ב- FileList כאשר כל אחד מהם הוא אובייקט מסוג File שחושף מספר פרטים על הקובץ.

את כל הפרטים האלה אנחנו משרשרים למערך output ובסוף התהליך יוצרים ממנו רשימת שמוצרת ב- div הריק מתחת לתיבת בחירת הקבצים.

התוצאה תיראה כך:

נסו את File API עם אינטרנט אקספלורר 10

אינטרנט אקספלורר 10 תומך ב- File API החל מגירסת המפתחים השניה, אותה ניתן להוריד מאתר www.IETestDrive.com.

אם אתם רוצים לשחק ב- File API כבר באינטרנט אקספלורר 9, תוכלו להוסיף את התמיכה בקלות ע”י התקנת תוספת מיוחדת מתוך HTML5 Labs.

כרום תומך ב- File API החל מגירסא 6, ופיירפוקס מגירסא 3.6.

תהנו!

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

מתוך ההכרזה הרשמית של שחרור הגירסא החדשה של האפליקציה:

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

ממשק המשתמש של Windows Phone 7

אפליקציית ה- Fousquare החדשה של Windows Phone 7 עצבה במיוחד בהתאם לממשק המשתמש החדשני של הטלפון והתצוגה הראשית (בתמונה למעלה) מכילה Hub עם מספר אזורים מרכזיים באפליקציה:

• איזור ה- Places
• איזור ה- Friends
• האיזור שלי (me)
• Explore

את המשך הסיקור אחלק לפי האיזורים האלה.

איזור ה- Places

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

החלקת האצבע הצידה, תביא אותנו לארבעת המקומות הקרובים הבאים.

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

ניתן לשים לב כאן לשימוש באלמנט מרכזי בממשק המשתמש של Windows Phone 7 – תצוגת Pivot. ה- Pivot מציג רשימת פריטים במספר תצוגות (מיון שונה / פילטר שונה וכו’). במקרה שלנו, אנחנו נמצאים בתצוגת nearby שמציגה את המקומות הקרובים, ובלחיצה על trending נקבל רק את המקומות הפופולרים ברגע זה.

אם במסך ה- Places היינו לוחצים על סמל ה- Specials בחלק העליון (המספר 27), היינו מגיעים לעמוד ה- Specials, שמציג את המבצעים בסביבה.

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

בתחתית המסך יש תפריט לפעולות מהירות לביצוע עבור המיקום הנוכחי, כגון Check-In והוספת To Do. אם נלחץ על כפתור ה- Check-In (השני משמאל), נגיע למסך ה- Check-In.

מסך ה- Check-In מכיל את כל מה שאנחנו צריכים: מקום לכתוב הערה, אפשרות להוסיף תמונה ואפשרויות לשיתוף בפייסבוק, בטוויטר או האם לא לשתף ולרדת Off The Grid.

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

איזור ה- Friends

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

לחיצה על more תוביל אותנו לרשימת החברים המפורטת שבדומה לרשימת המקומות, גם כאן רואים רשימת Pivot שמתחילה ב- leaderboard, אך ניתן להציג תצוגות אחרות כגון mayors, nearby וכו’.

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

האיזור שלי (me)

גלילה נוספת ב- Hub הראשי של האפליקציה מביאה אותנו לאיזור שלי, שמציגה את מצב הניקוד הנוכחי שלי, את המיקום הנוכחי שלי ב- leaderboard לצד תמונות החברים במקומות הסמוכים אלי עם מידע נוסף עליהם וכן מידע נוסף כגון כמות ה- To Do’s שלי.

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

איזור ה- Explore

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

לסיכום

אפליקציית ה- Foursquare החדשה ל- Windows Phone 7 מביאה את הפעולות בפורסקוור בממשק משתמש חדשני וחוויתי, תוך כדי שהיא שומרת על האלמנטים המוכרים משאר אפליקציות הפורסקוור שמשתמשים כבר מכירים. באמצעות ה- Hub של האפליקציה, ורשימות בתצוגת ה- Pivot, המשתמש מגיע למידע שהוא רוצה באופן מהיר וידידותי!

תהנו!

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

כמה דברים שיש לשים לב בתיבה הנ”ל:

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

בואו נבנה את זה שלב אחרי שלב:

נתחיל מעמוד HTML עם 3 פסקאות (השתמשתי בטקסט סמתי מתוך האתר Lorem Ipsum).

<!DOCTYPE html>
<html>
<head>
  <title>Article</title>
</head>
<body>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam 
    odio, tempor id molestie id, vulputate mollis felis. In laoreet
    tortor, ac volutpat dolor congue vitae. Nunc a elit a libero 
    sollicitudin. Aliquam ut nisl at est pharetra aliquam.
  </p>
  <p>
    Mauris vestibulum congue odio non auctor. Nunc ut ipsum a lorem 
    ultricies. Integer fringilla, quam a sagittis sollicitudin, magna 
    auctor mauris, sit amet sollicitudin augue eros nec tortor.
  </p>
  <p>
    Mauris vel felis id orci suscipit posuere. Fusce venenatis feugiat 
    a scelerisque. Sed lacinia lacus vitae nisi tempus vel viverra ante.
    Pellentesque habitant morbi tristique senectus et netus et malesuada 
    ac turpis egestas. Mauris et libero vehicula purus vulputate.
  </p>
</body>
</html>

שבהצגתו בדפדפן נראה כצפוי, כך:

הגדרת התיבה – צבע רקע ומסגרת

נניח נרצה שפסקה מספר 2 תשמש בתור ההודעה החשובה שאנחנו רוצים להדגיש. נגדיר לה סגנון עיצובי מסוג note שאליו נוסיף את הגדרות העיצוב ב- CSS.

<p class="note">
  Mauris vestibulum congue odio non auctor. Nunc ut ipsum a lorem 
  ultricies. Integer fringilla, quam a sagittis sollicitudin, magna 
  auctor mauris, sit amet sollicitudin augue eros nec tortor.
</p>

נגדיר את הגדרת העיצוב note, עם צבע רקע, מסגרת וריווח מתאים:

.note
{
    border: 1px dotted #6cc;
    background-color: rgb(238, 255, 255);
    padding: 0.5em;
}

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

הוספת האייקון וסידור הטקסט בהתאם

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

.note
{
    border: 1px dotted #6cc;
    background-color: rgb(238, 255, 255);
    padding: 0.5em;
    background-image: url("Images/info.gif");
}

ונקבל תוצאה שלא רצינו לקבל:

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

.note
{
    border: 1px dotted #6cc;
    background-color: rgb(238, 255, 255);
    padding: 0.5em;
    background-image: url("Images/info.gif");
    background-repeat: no-repeat;
}

ונקבל את התוצאה:

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

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

.note
{
    border: 1px dotted #6cc;
    background-color: rgb(238, 255, 255);
    padding: 0.5em;
    background-image: url("Images/info.gif");
    background-repeat: no-repeat;
    background-position:0.2em 0.5em;
}

והתוצאה:

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

.note
{
    border: 1px dotted #6cc;
    background-color: rgb(238, 255, 255);
    padding: 0.5em;
    background-image: url("Images/info.gif");
    background-repeat: no-repeat;
    background-position:0.2em 0.5em;
    padding-left: 25px;
}

וקיבלנו בדיוק את התוצאה הרצויה!

עברית שפה קשה

לא קל לקחת את אופן המימוש הזה ולהתאים אותו לעברית, אבל הנה מה שאפשר לעשות:

עבור מסמך בעברית שנראה כך:

<!DOCTYPE html>
<html>
<head>
  <title>מאמר</title>
</head>
<body dir="rtl">
  <p>
    לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לורם איפסום
    סיט אמט, קולהע צופעט למרקוח איבן איף, ברומץ כלרשט מיחוצים. קלאצי
    אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. 
  </p>
  <p class="note">
    גולר מונפרר סוברט לורם שבצק יהול, לכנוץ בעריר גק ליץ, ושבעגט.
    בראיט ולחת צורק מונחף, בגורמי מגמש. תרבנך וסתעד לכנו סתשם השמה
    מורגם בורק? לתיג ישבעס.
  </p>
  <p>
    לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת נון
    ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס וואל
    אאוגו וסטיבולום סוליסי טידום בעליק.
  </p>
</body>
</html>

נוסיף את הגדרות העיצוב שיצרנו עבור העמוד האנגלי:

.note
{
  background-image: url("Images/info.gif");
  background-repeat: no-repeat;
  border: 1px dotted #6cc;
  background-color: rgb(238, 255, 255);
  padding: 0.5em;
  background-position: 99.5% 0.5em;
  padding-right: 30px;
}

ונקבל כצפוי:

האייקון מוצג בצד שמאל והטקסט נמצא במרווח מהגבול השמאלי של הדף. נשנה את הגדרת ה- padding וה- background-position כדי לסדר את זה.

.note
{
  border: 1px dotted #6cc;
  background-color: rgb(238, 255, 255);
  padding: 0.5em;
  background-image: url("Images/info.gif");
  background-repeat: no-repeat;
  background-position: 99% 0.5em;
  padding-right: 25px;
}

בעיה: background-position בשפות RTL (עברית וערבית)

שימו לב שבעת השימוש בהגדרה background-position השתמשתי בערך באחוזים. הסיבה לכך היא שהמיקום מחושב ביחס לפינה השמאלית העליונה של הדף. בעוד שלשפות משמאל לימין זה עובד מצויין, עבור שפות מימין לשמאל זה לא עובד, ולא ניתן להגדיר מיקום ביחד לצד ימין. לכן, ע”י שימוש ב- 99%, אנחנו קובעים שזה יהיה קרוב לגבול הימני של התיבה אך לא צמוד.

ועוד לטיפ הבא… בהצלחה!

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

פיתרון נפוץ – סקריפט בסוף הדף

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

טעינה וביצוע אסינכרוני של סקריפטיםב- HTML5

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

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

<head>
  <title>My Blog</title>
  <script async src="widgets.js"></script>
</head>

נסו בעצמכם עם אינטרנט אקספלורר 10

החל מגירסת המפתחים השניה של אינטרנט אקספלורר 10 (Platform Preview 2), ישנה תמיכה בהרצת סקריפטים באופן אסינכרוני לשיפור ביצועים. את ה- Platform Preview ניתן להתקין במקביל לגירסת האקספלורר שמותקנת לכם על המחשב ללא חשש מהתנגשויות.

באתר IE Test Drive, שהוא אתר ההדגמות וההתנסות בתכונות החדשות של אינטרנט אקספלורר, תמצאו את הדמו HTML5 Async Scripts בו תוכלו לחוש את ההבדל בעצמכם. בהדגמה תמצאו שני iframe, שאחד טוען את הלוגו של אקספלורר באופן סינכרוני והשני באופן אסינכרוני, ולכן מסיים את ביצועו קודם.

תהנו!