מבוא לפיתוח אינטרנט

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

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

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

אז מה הם הכלים המדהימים האלה אני כבר מדבר על? מוביל את הדרך הייתה (בכנות מדהימה) שפות הנקראות HTML5, CSS3, ו-JavaScript, שבו אני כינוי 3 פרשים של webocalypse. הנה מבט על כל אחד:

HTML

HTML (מוכר היטב כHyperText Markup Language; אתה יכול להבין למה אנשים שלא רוצים להיראות רע פשוט להשתמש בראשי התיבות) הוא שפה המשמשת לפריסת דפי אינטרנט. לחץ לחיצה ימנית על דף זה ולחץ “צפו במקור”. זה HTML שדף זה משתמש.

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

<עמ '>אני לא יודע מה איתכם, אבל אני אוהב את כפתורי לחיצה.</עמ '>

<br>

<כפתור>לחץ!</כפתור>

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

אז זה כל מה שטוב ויפה. אבל אם יש לך שום דבר, אבל HTML, you get a webpage that looks like it came straight out of the 1990’s. לא הרבה טוב יצא מזה עשור בכל מקרה (תסרוקות, מוסיקה, וכו ') אבל רגע! יש עוד!

CSS

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

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

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

עמ ' {

צבע: אדום;

גודל הפונט: 16px;

}

אז בכל פסקה (דברים ב-HTML <עמ '> תגים) יהיה לי אדום גופן ולהיות 16 פיקסלים בגודל. אם שמת לב, אלה הם חלק מאותם סגנונות שאתה יכול להשתמש ב-Microsoft Word ויישומים אחרים.

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

על זה האחרון – זה נושא. אתה יכול לעשות <כפתור> ב-HTML, ותוכל ללחוץ עליו כל השבוע, אבל זה לא עושה שום דבר בזמן קרוב. אם אתה רוצה את הכפתור כדי, הו אני לא יודע, להעביר פיל על פני המסך ולתקוף משהו, then you need something more.

JavaScript

JavaScript היא לא ראשי תיבות, אם אתה תוהה. הם קראו לזה JavaScript כי זה נראה כמו שפת תכנות בשם Java, וזה מוזר כי זה לא. בכל מקרה, JavaScript היא a proper programming language that causes all the dynamic effects אתה רואה באינטרנט.

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

var paragraph = $(‘p’);

paragraph.css(‘color’,’blue’);

This JavaScript code will find all the paragraphs on the page – the $ sign tells the browser to find all matching elements, and the ‘p’ means it needs to choose paragraphs (remember the <עמ '> element from HTML?) Then you can store the paragraphs to a variable, and the command the browser to change their color CSS style to blue.

What I find interesting (שוב, this is all from the viewpoint of a “webdev”) is how elegantly the three languages work together. שהשורה האחרונה של JavaScript אינטראקציה עם ה-HTML של הדף וCSS משמש לסגנון זה. זה לא כמו שפות אלה הן רק רכיבים שונים של אותו הדבר – הם אחד ואותו הדבר, צדדים שונים של אותה מכונה מדהימה.

נשמע מרתק? אני חושב שהיא עושה. זה רק חלק מהיופי של האינטרנט.