התחל עם HTML5

התחל עם HTML5
מדריך זה ניתן להורדה כקובץ PDF בחינם. הורד את הקובץ הזה עכשיו . אתה מוזמן להעתיק ולשתף את זה עם חברים ובני משפחה.

תוכן העניינים

§1. הקדמה





§2 - סימון סמנטי



§3 - טפסים





§4 - בינוני

§5 – טרנספורמציות ואנימציות CSS3



§6 - מספיק עם Javascript

§7 - בד יצירתי



§8 - היכן הלאה?

1. הקדמה

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



אבל מה זה בעצם?

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

HTML5 הוא כל זה ועוד. אז על מה הספר הזה?

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

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

מדוע שתרצה ללמוד HTML5?

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

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

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

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

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

1.1 דרישות מוקדמות

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

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

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

אם אתה מגרד את הראש על האמור לעיל, אל תדאג. אחד הדברים הטובים ביותר ב- HTML ו- CSS הוא שזה ממש ממש קל. למעשה, ל- MakeUseOf יש מדריך XHTML מדהים שיביא אותך למהירות ממש מהר.

לאחר קריאת מדריך זה, ייתכן שתרצה לעיין במאמרים הבאים:

אתה גם צריך עורך טקסט מודרני ודפדפן. כל גירסה של Internet Explorer הישנה יותר מ- IE 9 וחלק מהגרסאות הישנות יותר של Safari, Chrome ו- Firefox תתמודד עם תכונות רבות המהוות חלק מ- HTML5 ועשויות למנוע ממך לעקוב אחר מדריך זה.

כתוצאה מכך, אתה מוזמן להוריד דפדפן מודרני. אני ממליץ על Google Chrome, ואשתמש בו בכל דוגמא.

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

1.2 עורכי טקסט לפיתוח אתרים

עורך הטקסט שלך הוא מה שאתה הולך להשתמש בו כדי לכתוב את הקוד שלך. יתכן שאתה תוהה מהו עורך טקסט.

ובכן, ראשית זה אינו מעבד תמלילים. תוכניות כמו Microsoft Word ו- Apple's Pages אינן מתאימות לחלוטין לפיתוח אתרים. הסיבה לכך היא שהם מצרפים מידע נוסף לקבצי HTML, CSS ו- Javascript שלך המקשה על קריאת דפדפן האינטרנט שלך.

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

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

במחשב Mac המצב שונה במקצת. OS X מגיע במקרה עם ארבעה עורכי טקסט שונים. אלה נקראים Vim, Emacs, Pico ו- Nano. עם זאת, בניגוד לפנקס הרשימות, כולם עובדים במקרה במסוף.

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

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

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

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

השלישי הוא קונסולת Javascript המובנית ב- Google Chrome. זה מאפשר לנו לכתוב Javascript ולראות אותו מופעל באופן מיידי וישמש אותו להסברת מושגי תכנות בסיסיים.

השני הוא אתר בשם Codepen.io. אתר מדהים זה יאפשר לך לקודד HTML, CSS ו- Javascript בדפדפן והוא חופשי לשימוש. זה גם יאפשר לך לראות את השינויים שלך באופן מיידי.

2. סימון סמנטי

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

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

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

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

אז איך הם עובדים? שקול את הקוד הבא.

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

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

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

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

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

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

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

אז בואו נסתכל על עוד תגי סימון סמנטיים.

2.1 סעיף

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

2.2 מאמר

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

2.3 חוץ מזה

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

2.4 כותרת

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

2.5 ניווט

רכיב זה שמור לחלק הניווט באתר שלך. זה יכלול קישורים לאתרים אחרים או לדפים אחרים באתר. בהקשר של MakeUseOf, זה יכול להיות החלק של הדף שנמצא מתחת לכותרת.

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

2.7 בדוק את עצמך

  • מהו סימון סמנטי, ולמה הוא משמש?
  • אני יוצר דף אינטרנט ואני רוצה להשתמש בתג סמנטי כדי להכיל ביוגרפיה אודותי. באיזה מהם אני משתמש?

3. טפסים

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

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

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

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

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

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

3.1 שיפור טופס

אז בואו נסתכל על טופס ונראה איך אנחנו יכולים לשפר אותו.

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

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

3.2 סוגי קלט ודפוסים

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

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

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

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

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

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

לקריאה נוספת:

  • טריקי CSS - בואו לכתוב סימון סמנטי
  • דוקטור HTML5 - בואו נדבר על סמנטיקה

3.3 בדוק את עצמך

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

  • שֵׁם
  • כתובת דוא'ל
  • מספר טלפון
  • אלרגיות

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

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

4. ממוצע

היה פעם שהדרך היחידה שבה תוכל להכניס וידאו או שמע לדף אינטרנט היא באמצעות משהו כמו Flash, Shockwave או SilverLight.

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

כיצד להפוך את המיקרופון חזק יותר לחלונות 10

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

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

4.1 כיצד HTML5 הופך וידאו ושמע למדהימים

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

כתוצאה מכך, חברות גדולות כמו YouTube, Vimeo ו- Netflix מנצלות את מהפכת ה- HTML5. למה שלא תצטרף אליהם?

4.2 הכל אודות קודקים

בפרק זה תלמד כיצד להשתמש בכוח ה- HTML5 לכלול אודיו ווידאו בדפי האינטרנט שלך.

ראשית, אצטרך להתחיל עם סייג. למרות שאתה יכול להשתמש בוידאו HTML5 בכל דפדפן אינטרנט מודרני, הוא לא עובד אותו דבר בכל דפדפן אינטרנט. רכיבי ה- Codec המשמשים כל דפדפן משתנים. ב- Internet Explorer, אתה מוגבל לשימוש בווידאו MP4. Chrome קצת יותר נדיב ומאפשר לך להשתמש בווידיאו WebM, MP4 ו- Ogg Theora. אופרה קצת יותר מגבילה ומאפשרת לך רק להשתמש ב- Theora ובווידיאו WebM.

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

4.3 החל מווידאו

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

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

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

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

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

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

4.4 הוספת שמע

ניתן להכניס אודיו לדף האינטרנט שלך באופן שמזכיר מאוד את הדרך שבה הכנסנו וידאו לדף שלנו.

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

לאחר מכן, אתה כולל תג מקור לקובץ ה- MP3 שאליו ברצונך לקשר. אתה לא באמת צריך לדאוג כל כך הרבה כשמדובר בתאימות codec. לרוב דפדפני האינטרנט האחרונים יש אפשרות להפעיל אודיו MP3, למרות שמדובר בפעולה טובה לכלול גם '.ogg' וקובץ '.wav' - ליתר ביטחון.

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

התוצאה הסופית נראית קצת כך.

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

4.5 בדוק את עצמך

  • מה המטרה שיש פוסטר בתגי הווידאו שלך?
  • באילו רכיבי codec לא תוכל להשתמש ב- Internet Explorer?
  • אם אני רוצה את האפשרות להשהות קצת אודיו, איזו תכונה היית מוסיפה לתג 'שמע' שלך?

לקריאה נוספת:

5. טרנספורמציות ואנימציות CSS3

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

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

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

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

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

5.1 אפקטים של CSS Hover

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

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

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

בתוך חוק '#muo: ריחוף', יש לנו שורה שאומרת '-webkit-transform: rotate (3deg)'. כפי שאני בטוח שניחשת, זה אומר לדפדפן לסובב את רכיב ה- div הזה בשלוש מעלות.

עם זאת, ראוי לציין שהתג הזה עובד רק ב- Chrome וב- Safari. אם אתה רוצה שהקוד שלך יעבוד ב- Firefox או ב- Internet Explorer 9 ומעלה, תרצה לשנות את קובץ ה- CSS שלך כך שיכלול את השורות הבאות.

כעת, כאשר אתה מרחף מעל התמונה, זה נראה כך:

5.2 שימוש ב- CSS3 לשינוי גודל תמונות

אז למה לעצור שם? האם ידעת שאתה יכול גם להשתמש בשיטת 'טרנספורמציה' כדי להגדיל או לכווץ תמונה. בואו נשנה את קובץ ה- CSS שלנו כך שיכלול את השורות הבאות.

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

כפי שאתה יכול לראות מהקוד, אני הולך להגדיל את גודל הלוגו MakeUseOf div ב -50%. אתה יכול לבדוק עבודות אלה על ידי ריחוף מעליו. תראה שעכשיו הלוגו של 'MakeUseOf' נמתח באופן משמעותי יותר.

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

5.3 בדוק את עצמך

  • כיצד ניישם סטיילינג על אלמנט בעת ריחוף?
  • איך מסובבים תמונה באמצעות CSS3?
  • כיצד ניתן להגדיל תמונה באמצעות CSS3?
  • מה יקרה אם תעביר את שיטת הטרנספורמציה שלך 'תרגם (50px, 50px)'?

לקריאה נוספת:

סלעי HTML5 - מצגת

6. רק מספיק Javascript

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

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

6.1 גישה לקונסולה

לשם כך נשתמש במסוף Javascript המובנה בכל עותק של Google Chrome. כדי לגשת לזה, תוכל ללחוץ לחיצה ימנית על כל דף אינטרנט ולאחר מכן ללחוץ על 'בדוק אלמנט'. לאחר מכן לחץ על 'מסוף'. אתה אמור לראות את זה.

זה מסורתי שהתוכנית הראשונה שכל מפתח מתחיל כותב אי פעם היא התוכנית 'שלום עולם'. זוהי תוכנית פשוטה שמדפיסה את הביטוי 'שלום עולם', ולא הרבה אחר. במסוף שלך, הקלד 'console.log (' שלום עולם! ') ;.

6.2 התוכנית הראשונה שלך

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

6.3 משתנים ב- JavaScript

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

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

6.4 מה הפונקציות עושות

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

6.5 חזרה על פעולה עם לולאה 'למען'

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

בסוגריים אלה נרצה ליצור משתנה הסופר כמה פעמים ביצענו פעולה. אז, אנו מקבלים משהו שנראה כך 'עבור (var i = 0;)'.

לאחר מכן אנו רוצים לבדוק שלא עמדתי בתנאי. אז, במקרה זה, אנו רוצים לראות שזה פחות מ- 10. אז, אחרי הפסיק, אנו כותבים 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

אם אני פחות מ -10, אנחנו רוצים להוסיף את זה אחד ואז לעשות משהו. אז, שמנו 'i = i + 1'. הלולאה שלנו כמעט סיימה: 'for (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

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

שני מבני התכנות האחרונים שאנו הולכים לבחון הם הצהרות 'אם' ואילו 'תוך'.

6.6 אם הצהרות

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

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

6.7 בעוד לולאות

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

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

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

6.8 בדוק את עצמך

  • אני רוצה לספור לאחור מ 30. כתוב לולאה 'בשביל' שתעשה זאת.
  • אני רוצה ליצור משתנה שנקרא 'makeuseof' ולתת לו ערך של 'מדהים'. איך זה מתבצע?
  • אני רוצה ליצור פונקציה שמדפיסה 'MakeUseOf Is Awesome' כאשר קוראים לה. כתוב את הפונקציה הזו.

לקריאה נוספת:

7. קנבס יצירתי

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

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

7.1 תחילת העבודה עם קנבס

קודם כל, תצטרך לפתוח את דפדפן האינטרנט שלך ולנווט אל codepen.io. צור עט חדש.

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

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

אנו הולכים ליצור משתנה (קראתי לו 'הדגמה'), ולאחר מכן בחר את רכיב הבד והקצה אותו למשתנה זה. לשם כך, השתמש ב- document.getElementByID () והעבר את מזהה הרכיב שברצונך לבחור.

השורה השנייה בסקריפט שלנו יוצרת משתנה נוסף הנקרא 'הקשר' ולאחר מכן קורא עליו 'demo.getContext (' 2d ')'. זה אמר לדפדפן שאנחנו נעבוד על תמונה דו -ממדית, ולאחר מכן עברנו את הפונקציות הדרושות שנצטרך כדי לצייר למסך.

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

זה אמנם לא מרשים. בואו נעשה משהו קצת יותר מתקדם ונשתמש בקסם של Javascript ו- Canvas כדי ליצור MakeUseOf לוגו חדש לגמרי.

7.2 צורות וטקסט

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

שני הטיעונים הראשונים מגדירים היכן אנו רוצים למקם את ציר x ו- y של הצורה. בואו נגדיר את שני אלה ל- '0' לעת עתה. הטענה השלישית מתייחסת לרוחב הצורה. בואו נקבע את זה ל- '200', ולאחר מכן נשאיר את הטענה הרביעית ל- '50'. כעת אמור להיות לך משהו שנראה קצת כך.

זוהי התחלה מצוינת, אך היא אינה מזכירה את MakeUseOf כלל. אז, אנחנו הולכים להוסיף קצת טקסט. בואו ניצור משתנה המכיל 'makeuseof', ונקרא למשתנה הזה 'MakeUseOf'.

לאחר מכן נרצה ליצור משתנה הקשר אחר. קראו לזה 'הקשר 2' וודא שהוא 2d. כאן נשתמש בכתיבת הטקסט שלנו.

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

מכיוון שאנו רוצים שהטקסט הזה יכסה את התיבה האדומה הקודמת שלנו, עלינו לקרוא ל- 'textBaseLine' ב- context2 ולתת לו ערך של למעלה. לאחר שהושלם, אנו קוראים 'fillText' ב- context2 ומעבירים לו את המשתנה המכיל את הטקסט שלנו ואת קואורדינטות x ו- y בו אנו מתכוונים למקם את הטקסט שלנו. התוצאה הסופית של הקוד שלנו היא משהו כזה.

התמונה המיוצרת על ידי הקוד נראית כך.

7.3 מילה על בד

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

כיצד לשנות את הערוץ בנתב שלי

7.4 בדוק את עצמך

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

לקריאה נוספת:

8. איפה הלאה?

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

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

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל האם כדאי לשדרג ל- Windows 11?

Windows עוצב מחדש. אבל האם זה מספיק כדי לשכנע אותך לעבור מ- Windows 10 ל- Windows 11?

קרא הבא נושאים קשורים
  • וורדפרס ופיתוח אתרים
  • HTML5
  • טופס ארוך
  • מדריך לונגפורם
על הסופר מתיו יוז(386 מאמרים פורסמו)

מתיו יוז הוא מפתח תוכנה וכותב מליברפול, אנגליה. לעתים רחוקות הוא נמצא ללא כוס קפה שחור חזק בידו ומעריץ לחלוטין את ה- Macbook Pro ואת המצלמה שלו. אתה יכול לקרוא את הבלוג שלו בכתובת http://www.matthewhughes.co.uk ולעקוב אחריו בטוויטר ב- @matthewhughes.

עוד מאת מתיו יוז

הירשם לניוזלטר שלנו

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

לחצו כאן להרשמה