‫Htm - אחלה טיפים לבניית אתרים » בניית אתרים‬

‫ב-2010 אנחנו עוברים ל-Offline‬

‫אורן רוט‬ — Sun, 28 Feb 2010 15:04:38 +0000

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

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

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

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

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

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

כיצד זה עובד?

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

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

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

קובץ manifest

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

1	CACHE MANIFEST

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 2	// אחזור ערך - יחזיר "my data", מחרוזת. window.sessionStorage.getItem("key");

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

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

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

1
2
3

// הדרך הרגילה לקריאה לאירועי אונליין/אופליין
window.addEventListener("online", function() { ... });
window.addEventListener("offline", function() { ... });

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

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

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

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

סיכום ודוגמא

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

<דוגמא><קוד>

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

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

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

‫Zend Framework – דרך טובה לבנות מערכות PHP‬

‫אורן רוט‬ — Mon, 18 Jan 2010 08:02:21 +0000

בזמן שלא הייתי כאן הייתי עסוק בבניית מערכת ניהול תוכן לחברת בניית האתרים שלי. את מערכת ניהול התוכן שלי בניתי ב-Zend Framwork שזהו Framework של PHP. מאוד נהנתי להשתמש בכלים שZF מעניקה, ורציתי לספר לכם קצת מה זה פריימוורק לPHP, מה זה ZF ולמה ומתי כדאי לכם להשתמש בהם בתכנות PHP.

Framework

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

באמצעות ה-API של הפרייוורק נוכל להשתמש בכלים מתקדמים שהפריימוורק מספק ובכך לייעל את עבודתנו בתור מתכנתים.

Zend Framework

טוב עכשיו אחרי שסיברתי את אוזנכם קצת בנוגע לספריות הרחבה לשפות תכנות (framework), אני אספר לכם על Zend Framework.

הספרייה Zend Framework או בקיצור ZF היא ספריית PHP שפותחה ע"י זאב סורסקי ואנדי גוטמנס, מכאן שמה (זאב+אנדי = זאנד). יוצרי הסביבה הם ישראלים יוצאי טכניון שפיתחו בין השאר גם את שפת PHP (נחמד לא?). בדומה לPHP, מטרת הספרייה היא בניית אפליקציות אינטרנטיות. הספרייה רשומה בקוד פתוח ובנויה על סביבה מונחת עצמים עם הפרדת Model-View-Controller (בקיצור MVC).

MVC – אחד הדברים היפים ביותר בZF. כל הרעיון מאחורי ההפרדה הזו (שתוכלו לקרוא עליה עוד בויקיפדיה), היא שהיא מכריחה אותנו (המתכנתים) להפריד בין עיצוב לבין קוד, וגם הקוד מחולק לשניים. שיטת MVC עושה זאת ע"י הפרדה ל-3 שכבות – המודל, שאחראי על האובייקטים המרכזיים במערכת, הבקר, שאחראי על יצירת התוכן המעובד, והתצוגה, שאחראית לסדר את האופן בו יראה כל דף. כעת נרחיב:

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

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

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

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

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

‫גלריית פלאש על בסיס XML מתנה!‬

‫אורן רוט‬ — Sun, 17 Jan 2010 11:23:21 +0000

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

<דוגמא><קוד>

picWin - גלריית פלאש עם טעינה מתוך XML

אפשרויות:

1. הוספת תמונות מתוך XML –
ניתן להוסיף תמונות לתוך קובץ pics.xml. כל תמונה תקבל את המאפיינים הבאים:

1
2
3
4
5
6

>
>picDir/normal>
>picDir/big>
>1.jpg>
>picture title>
>

dir - התיקייה בה תמצא התמונה לפלאש (התמונה הקטנה)
big_dir - התיקייה בה התמונה ל-lightbox (התמונה הגדולה)
name - שם קובץ התמונה (בשני התיקיות!)
desc - יופיע כתיאור התמונה בתוך ה-lightbox.

2. תוכלו לשנות את מספר הריבועים בפלאש באמצעות שינוי שורה מספר 6 בקובץ project.fla:

1	var fdata:fData = new fData(5,8,stage.stageWidth,stage.stageHeight,"height");

החליפו את הספרה 5 במס' השורות הרצוי ואת הספרה 8 במס' העמודות הרצוי.

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

‫הוספת כתוביות לתגית וידאו‬

‫אורן רוט‬ — Tue, 15 Dec 2009 14:48:31 +0000

הוספת כתוביות לסרטון וידאו זה בהחלט לא דבר חדש. בטכניקת הארדסאב (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>

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	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.

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

‫מפת אתר צבעונית בעזרת jQuery‬

‫אורן רוט‬ — Sun, 15 Nov 2009 10:25:32 +0000

בתור בוני אתרים אנחנו נתקלנו לא פעם אחת בצורך ליצירת מפת אתר, אם זו מפת אתר XML או מפת אתר מעוצבת. הסיבות לבניית מפות אתר הם מגוונות, סיפוק מנועי החיפוש ועזרה לגולש בניווט באתר. למרות שהצורך המקורי ליצירת מפות אתר היה דווקא השני (עזרה למנווט באתר), היום כמעט ולא נראה גולשים מנווטים דרך מפת האתר. אם את שואלים מה הסיבה לכך, לדעתי, מפות אתר פשוט לא ידיותיות למשתמש. בסרטון ההדכה שאני אתן לכם היום אני מסביר איך להוסיף קוד jQuery דינמאי ופשוט, על-מנת ליצור מפת אתר ידודתית יותר ומסודרת יותר. את המדריך הזה לקחתי מכריס קויר מאתר css-tricks, שפרסם מאמר על הטכניקה הזו באתר Smashing Magazine.

<דוגמא><קוד>

ברשותכם חילקתי את הסרטון לשני חלקים, כל חלק כ-5 דקות:

להלן התכנים שהוסברו בסרטון:

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
<link rel="stylesheet" href="../demoStyle.css" type="text/css" media="screen, projection">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/></script>
<style type="text/css">
* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; background: #222; }

h1,p {color:#e6e6e6;}

a { text-decoration: none; color: #eee; display: block; padding: 4px 0;}
a:hover { text-decoration: underline;color: #eee; }

ul{
padding: 8px 25px;
list-style: none;
background: #282828;
}
ul ul { background: #393939; }
ul ul ul { background: #4b4b4b; }
ul ul ul ul { background: #5a5a5a; }
</style>
<script src="js/jquery.color.js" type="text/javascript"></script>
<script src="js/sitemap.js" type="text/javascript"></script>
</head>
<body>
<div class="push-2">
<ul>
<li>
<a href="/category/בניית_אתרים">בניית אתרים</a>
<ul>
<li>
<a href="/tag/html-5">HTML 5</a>
<ul>
<li><a href="/2009/10/26/html-5-מה-נכנס-ומה-יוצא-חלק-א/">HTML 5 – מה נכנס ומה יוצא? – חלק א'</a></li>
<li>
<a href="/category/חדשות/">הרצאות</a>
<ul>
<li><a href="/2009/11/13/סיכום-של-יום-השימושיות/">כנס יום ה-Usability</a></li>
<li><a href="/2009/09/28/סיכום-מפגש-העשרה-של-איגוד-האינטרנט-היש">סיכום מפגש העשרה של איגוד האינטרנט הישראלי 2009</a></li>
</ul>
</li>
<li><a href="/2009/10/26/html-5-מה-נכנס-ומה-יוצא-חלק-ב/">HTML 5 – מה נכנס ומה יוצא? – חלק ב' </a></li>
</ul>
</li>
<li><a href="/2009/09/22/ולידציה-נעה-לשליחת-טפסים/">ולידציה נעה לשליחת טפסים</a></li>
<li><a href="/2009/10/25/קוד-קצר-להצגת-תוכן-תיקייה">קוד קצר להצגת תוכן תיקייה</a></li>
<li>
<a href="/tag/jquery/">jQuery</a>
<ul>
<li><a href="/2009/10/21/תיבת-הצעות-לשורת-טקסט-בעזרת-תוסף-json-ו-jquery">תיבת הצעות לשורת טקסט בעזרת תוסף JSON ו-jQuery</a></li>
<li><a href="/2009/10/22/הפיכת-טופס-לתהליך-הרשמה/">הפיכת טופס לתהליך הרשמה</a></li>
<li><a href="/2009/10/14/שיתוף-תכנים-בגרירה">שיתוף תכנים בגרירה</a></li>
<li><a href="/2009/09/30/היפוך-של-אנגלית-לעברית-באמצעות-ajax">היפוך של אנגלית לעברית באמצעות AJAX</a></li>
</ul>
</li>
<li><a href="/2009/09/19/שינוי-כתובות-עם-mod_rewrite">שינוי כתובות עם mod_rewrite</a></li>
<li><a href="/2009/09/23/יישום-שינוי-כתובות-עם-mod_rewrite-פרק-ב/">יישום שינוי כתובות עם mod_rewrite – פרק ב'</a></li>
<li><a href="/2009/09/17/fusion-charts-דרך-יפה-להציג-נתונים/">Fusion Charts – דרך יפה להציג נתונים </a></li>
</ul>
</li>
<li><a href="/category/עיצוב_אתרים/">עיצוב אתרים</a></li>
<li><a href="/category/חדשות/">חדשות</a></li>
<li><a href="/category/המלצות/">המלצות</a></li>
</ul>
</div>

</body>
</html>

JavaScipt – sitemap.js

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
37
38
39
40
41

$(function(){
$("ul").css("opacity","0.7");

$("ul").doFade({ fadeColor : "#362b40"});
$("ul ul").doFade({ fadeColor : "#354668"});
$("ul ul ul").doFade({ fadeColor : "#304531"});
$("ul ul ul ul").doFade({ fadeColor : "#72352d"});
});

jQuery.fn.doFade = function(settings) {

settings = jQuery.extend({
fadeColor: "black",
duration: 200,
fadeOn: 0.95,
fadeOff: 0.7
}, settings);

var duration = settings.duration;
var fadeOff = settings.fadeOff;
var fadeOn = settings.fadeOn;
var fadeColor = settings.fadeColor;

$(this).hover(function(){
$(this)
.stop()
.data("origColor", $(this).css("background-color"))
.animate({
opacity: fadeOn,
backgroundColor: fadeColor
},duration)
}, function() {
$(this)
.stop()
.animate({
opacity: fadeOff,
backgroundColor: $(this).data("origColor")
},duration)
});

};

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

‫HTML 5 – מה נכנס ומה יוצא? – חלק ב'‬

‫אורן רוט‬ — Tue, 27 Oct 2009 08:37:00 +0000

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

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

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

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

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

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