התחל בעבודה עם HTML5 / CSS3: טיפים, חלונות ראווה ודוגמאות קידוד

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


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

1. בסיסי ב- HTML5

HTML5

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

להלן טיפים מהירים לבדיקת שלך תאימות דפדפן.

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

2. אפקטים של טקסט – הוספת צל ואפקט טקסט מקדים ב- HTML5

אפקטים של טקסט ב- HTML5

השפעת צל בסיסית על טקסט

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

מדגם קידוד

#shadow h1 {
טקסט צל: 0px 1px 1px rgba (0,0,0, .2);
}

טקסט על אפקט דמוי אש מראש

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

מדגם קידוד

#fire h1 {
יישור טקסט: מרכז;
שוליים: 200 פיקסלים אוטומטיים;
משפחת גופן: "ליגה-גותית", שליח;
גודל גופן: 200 פיקסלים; שינוי טקסט: אותיות גדולות;
צבע: #fff;
טקסט צל: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716px 80 פיקסלים # 451b0e;
}

דוגמא נהדרת אחרת: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. פינה מעוגלת ב- HTML5

פינה מעוגלת ב- HTML5

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

מדגם קידוד

div {
גבול: 2px מוצק # 434343;
ריפוד: 10px;
רקע: # e3e3e3;
-רדיוס moz-border: 10px;
-רדיוס רשת-גבול-רשת: 10px;
רוחב: 500 פיקסלים;
}

הערה: Moz פירושו מוזילה, ו- webkit מיועד לספארי ול- Chrome.

דוגמא נהדרת אחרת: http://fjd1.com/roundcorner.html

4. גרפיקה וקטורית מדרגית (SVG) ב- HTML5

הדרכות HTML 5, מדריך ודוגמאות

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

קוד לדוגמא

דוגמאות נהדרות אחרות:

5. הטמעת קובץ סרטים ב- HTML5

וידאו ב- HTML5

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

כדי להטמיע את הסרטון, עליכם לדעת שיש כעת 3 פורמטים הנתמכים על ידי דפדפנים שונים; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

קוד לדוגמא

דוגמא נהדרת אחרת: https://www.html5rocks.com/en/tutorials/video/basics/

6. מצגת שקופיות ב- HTML5

הדרכות HTML 5, מדריך ודוגמאות

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

קוד לדוגמא

לפני {
מעבר: כל הקלות בפנים;
}

לפני: רחף {
צבע רקע: # F2F5FE;
צבע גבול: שחור;
}

div {
טרנספורמציה: rotate3d (1,1,0, 45deg);
}

דוגמאות נהדרות אחרות:

7. ניתן לערוך תוכן ב- HTML5

הדרכות HTML 5, מדריך ודוגמאות

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

קוד לדוגמא

ניתן לערוך את התוכן הזה!

דוגמא נהדרת אחרת: http://html5demos.com/contenteditable

8. בד רשת אינטראקטיבי ב- HTML5

הדרכות HTML 5, מדריך ודוגמאות

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

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

דוגמא נהדרת אחרת: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. גרור ושחרר HTML5

הדרכות HTML 5, מדריך ודוגמאות

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

קוד לדוגמא (DnD מקורי)

document.addEventListener (‘dragstart’, פונקציה (אירוע) {
event.dataTransfer.setData (‘טקסט’, ‘טקסט מותאם אישית’);
event.dataTransfer.effectAllowed = ‘העתק’;
}, שקר);

דוגמא נהדרת אחרת: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. תרשים נתונים טהור של CSS ב- HTML5

הדרכות HTML 5, מדריך ודוגמאות

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

דוגמא נהדרת אחרת: http://cssglobe.com/pure-css-data-chart/

לא ניתן להשיג מספיק HTML 5?

גם אנחנו! להלן עוד נושא, לכו לבדוק אותם.

* 30 דוגמאות מגניבות מאוד לאתרי HTML 5
* תחילת העבודה עם HTML 5
* חובה לקרוא הדרכות HTML 5 בשנת 2012
* למד HTML 5: 10 חובה לקרוא שיעורים

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

המאמר המקורי מתפרסם לראשונה ב בלוג WHSR; זה מנוהל ומעודכן כעת על ידי צוותי BuildThis.io.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map