ברוך שובך פינת קידוד! היום נבחן נושא ששאלתי עליו רבות לאחרונה: בניית אתר.
האם למתג יש דפדפן
הרשת השתנתה מאז תחילת אמצע שנות התשעים: CSS קיים, פלאש כבר לא קיים, ואתרים הפכו הרבה יותר לעיצוב יפה ותכונות שופעות מאשר דפי מפלצות כבדי טקסט ותמונה.
בשנת 1996, אם רצית ליצור אתר משלך, היו לך שתי אפשרויות: הצטרף לאתר אירוח כמו חצובה או Geocities ובעל שליטה מוגבלת בנוכחות האינטרנט שלך, או בנה אתר משלך מאפס באמצעות HTML. אבל הזמנים - למרבה המזל - השתנו.
הכירו את ראשי התיבות: WYSIWYG, HTML, CSS, PHP, WTF?
לפני שנכנס לאֵיךאתה יכול לבנות אתר משלך, בואו נדבר קצת על אבני הבניין של האינטרנט.
האתר המודרני שלך מורכב בדרך כלל משלושה דברים: HTML, CSS ו- Javascript.
HTML
HTML מייצג 'שפת סימון HyperText'. זה היה עמוד השדרה של האינטרנט מאז תחילת הדרך, ומשתמש במילים המוקפות בשברים () הנקראות 'תגים' כדי ליצור אלמנטים; אלמנטים אלה עוזרים לך לארגן ולבנות את דף האינטרנט שלך. יש תוכן שאתה רואה באינטרנט? הוא מוקף ב- HTML.
CSS
CSS, או 'גיליונות סגנון מדורגים', היא השפה העיצובית של האינטרנט המודרני. זה לוקח את מבנה ה- HTML שלך והופך אותו ליפה: CSS משתמש בקוד שנקרא סלקטורים כדי לזהות את סוג ה- HTML שברצונך לייפות, ואז משתמש במאפייני CSS וערכים כדי לשנות את מראהו.
Javascript (ושפות סקריפט אחרות)
Javascript מאפשר לך להפוך דף אינטרנט סטטי בדרך כלל לאינטראקטיבי: גלריות תמונות בסגנון Lightbox, דפים עם גלילה חלקה (כמו אלה שאפל מעדיפה), ומשחקים מבוססי אינטרנט משתמשים כולם בפונקציות Javascript שונות.
ישנן שפות סקריפט אחרות שאתה יכול להשתמש באינטרנט, כולל PHP, רובי וג'אווה, שכולן מאפשרות לך לבצע פעילויות מורכבות ודינאמיות יותר באתר שלך.
ראשי התיבות 'אל תיבהל': WYSIWYG ו- CMS
לאחר ששמעת על כל שפות הסקריפטים והסימונים האלה, ייתכן שאתה מוכן להישבע אם תבנה אתר כלשהו, אך אל תיבהל: אם אתה רוצה לבנות אתר בשנת 2016, מה שאמרתי לך כבר זה כל מה שאתה אי פעםצוֹרֶךלדעת על שלוש השפות האלה אם אינך רוצה לקודד בפועל.
אתה לא צריך לדעת לכתוב HTML, או איפה לשים CSS, או איך JavaScript עובד - וזה הכל הודות לשני ראשי תיבות אחרים: WYSIWYG ו- CMS.
אינך צריך לדעת לכתוב HTML או CSS או JavaScript הודות לשני ראשי תיבות אחרים: WYSIWYG ו- CMS.
WYSIWYG מייצג 'מה שאתה רואה זה מה שאתה מקבל', והועסק לראשונה באמצע שנות התשעים כדי לסייע לאנשים ללא ניסיון HTML בבניית אתרים. במקום שתצטרך לכתוב קוד כדי להפוך את רקע האתר שלך לכחול או ירוק, תוכל פשוט לבחור 'כחול' או 'ירוק' מהתפריט הנפתח, והאתר שלך ישתנה בהתאם. רבים משירותי בניית האתרים המודרניים של האינטרנט, כולל מקומות כמו ריבוע שטח , לפעול על פי עקרון זה.
CMS, או 'מערכת ניהול תוכן', מאפשרת לך להזין תוכן לאתר שלך מבלי שתצטרך לגעת בקוד של הדף. פרסמת פעם ב- Tumblr או בינוני? שניהם CMS עבור בלוגרים.
כיצד לבנות אתר אינטרנט כאשר אינך יודע כיצד לקודד
עברנו דרך ארוכה מאז 1996: יש המון אפשרויות זמינות עבור בוני אתרים מתחילים, בין אם אתה יודע ללקק HTML. אם אתה מוכן לקחת את הצעד לבניית דף, הנה מה שאתה צריך לדעת.
שלב 1: הבנת תחומים מול אירוח
כדי שיהיה לך אתר, אתה צריך שני דברים: שם דומיין (שאומר לך לאן באינטרנט ללכת) ואירוח (המאחסן את הקבצים שלך - כן, כל אתר הוא רק אוסף של קבצים - במקום שאנשים יכולים לגשת אליהם ). רוב השירותים המודרניים מציעים וריאציה מסוימת של שניהם; ורבים מהשירותים המומלצים להלן מציעים רישום שם דומיין מותאם אישית ברמה העליונה כחלק מהחבילות בתשלום שלהם. אבל האם כדאי לנצל זאת?
התחום הטיפוסי שלך ברמה העליונה (TLD) עולה בסביבות 10 $ לשנה, וככזה, זו הטבה נחמדה ששירותי אתר יכולים לזרוק כחלק מדמי האירוח החודשיים שלך. גם אם אינך מתכוון להישאר בשירות האתר שלך, אין שום נזק ממשי לנצל את התכונה הזו - אם השירות שווה את מלואו, תוכל להעביר את התחום לשירות רישום אחר אם תעזוב את תוכנית מנוי.
אחת הסיבותלֹאאם אתה רוצה הרחבה מיוחדת של TLD - משהו אחר, למשל. '.com', '.edu', או. בוני אתרים רבים אינם מציעים הרשמה עבור TLD פחות מוכרים, בין היתר מכיוון שהם יכולים להיות יקרים משמעותית בשנה; במקום זאת, בדוק שירות רישום דומיין כמו לְרַחֵף . לא אמורה להיות לך שום בעיה לחבר דומיין חיצוני לאתר שלך.
המתאים ביותר לילדים
אם אתה משתמש בשירות חינמי, ייתכן שתספק עבורך תת-דומיין (כמו '[שם שלך] .tumblr.com' באופן אוטומטי, אך השירות עשוי גם להציע רישום דומיין ברמה עליונה כמו '[ yourname] .com 'תמורת תשלום קבוע בשנה. בנסיבות אלה, אני ממליץ להשתמש ב-נפרדשירות רישום לדומיינים ברמה הגבוהה ביותר, מכיוון שאתה לא מקבל אחד בחינם.
שלב 2: האם אני רוצה שירות בחינם או בתשלום?
כמו בימים הראשונים של האינטרנט, ישנם שירותים חינמיים שבהם תוכל להשתמש כדי לבנות ולארח את האתר שלך - אך יש להם מגבלות תכונות. הבעיה הגדולה ביותר היא שליטה: רוב השירותים החינמיים מארחים את הנתונים שלך, וככאלה אתה קשור אליהם. אם השירות שלך פושט רגל או ייסגר, הנתונים שלך עשויים ללכת איתו.
שירותי אתרים בתשלום מציעים לרוב שמות דומיינים מותאמים אישית, גישה מלאה לבנאי האתרים שלהם ואחסון נוסף.
שירותים בחינם מסתמכים גם על תת-דומיינים לאירוח שלך-כלומר משהו כמו '[שם שלך] .tumblr.com' לעומת הדומיין ברמה העליונה '[שם שלך]. Com'. סביר להניח שכתובת האתר שלך תהיה קשורה לנצח עם השירות, אלא אם תתייצב קצת יותר עבור שם דומיין מותאם אישית.
לעומת זאת, שירותים בתשלום מציעים לך לרוב שם דומיין ברמה עליונה מותאמת אישית, גישה מלאה לבנאי האתרים שלהם ואחסון נוסף. כל שירות מציע מגוון אפשרויות לבניית אתרים בפועל-רובן מבוססות תבנית ו- WYSIWYG, חלקן מאפשרות התאמה אישית מתחת למכסה המנוע אם ברצונך להסתכן בעולם HTML ו- CSS.
אז השאלה היא: כמה אתה צריך לשלם עבור שירות אתר?
כשזה מגיע לשירותים בתשלום, אתה יכול לצפות לשלם בערך $ 7- $ 10 לחודש עבור אירוח אתר אישי או בלוגים טיפוסי. (ייתכן שתצטרך גם לשלם $ 10- $ 15 לשנה עבור שם הדומיין שלך, שהזכרנו בסעיף הקודם.) אם אתה רוצה לארח חנות מקוונת, או שאתה מתכוון לעשות משהו מסובך יותר כמו לספק קבצים גדולים ( כמו וידאו), אתה מסתכל קרוב יותר בטווח של $ 15-$ 30 לחודש. (שים לב שאנחנו מדברים בעיקר על אתרים אישיים, כאן: אם האתר שלך יהפוך לעסק עם תנועה קבועה, עלויות האירוח שלך עשויות לעלות באופן דרמטי).
שלב 3: בחר שירות אתר
ישנם לא מעט שירותים בחינם בתשלום ברשת, מה שעשוי להפוך את הבחירה באחת לחוויה מעוררת חרדה. למרבה המזל, בימים אלה זה פשוט כמו לצמצם את מה שאתה צריך מהאתר שלך.
בלוג בסיסי: רוצה לקבל קול באינטרנט ללא הטרחה של מערכת ה- CMS שלך? אתה יכול להשתמש בשירות חינם כמו של Yahoo טאמבלר ובנה בלוגים של טקסט, תמונה, וידאו ו- GIF לפי תוכן ליבך. Tumblr מציעה תת -דומיין מותאם אישית משלך וחבורה של נושאים שונים; אתה יכול אפילו לבצע בהם עריכות מותאמות אישית מלאות על ידי צלילה לתוך עמוד השדרה של HTML ו- CSS. Tumblr מאפשר גם מיפוי לדומיין ברמה עליונה מותאמת אישית, אם כי הוא לא ימכור לך הרשמה לאחד.
אתר בסיסי בחינם: רוצים לבנות אתר אישי ללא עלות? Weebly היא אחת האפשרויות החינמיות הטובות יותר שיש, עם תבניות מותאמות אישית ואלמנטים של גרור ושחרר לאתר, לבלוג או לחנות הראווה שלך. אתה יכול גם להכניס HTML או CSS מותאם אישית, אם אתה מתעניין בדברים כאלה. משתמשים בחינם יכולים לחבר שם דומיין חיצוני או להשתמש בתת -דומיין של Weebly.
אתר אינטרנט או חנות בסיסית בתשלום: יש סיבה למה ריבוע שטח יש כל כך הרבה זיהוי שמות במתחם האתר בתשלום למתחילים, וזה לא רק בגלל שהם קונים מודעות בכל פודקאסט שאפשר להעלות על הדעת. התבניות שלהן מדהימות, ממשק העריכה מצוין, ואתה לא צריך לדעת פיסת HTML או CSS כדי ליצור משהו יפה ומותאם אישית לטעמך. תוכניות Squarespace מתחילות ב 96 $ לשנה או 12 $ לחודש, וכוללות 20 עמודים, רוחב פס בלתי מוגבל ורישום דומיין בחינם; תוכנית 'עסק' של 216 $ לשנה נותנת לך דפים ללא הגבלה, ומאפשרת לך גם חלון ראווה עם עד 25 מוצרים.
תיק האמנות : אם אתה רוצה אתר המתמקד באמנות או מולטימדיה, רוב הסיכויים שכבר יש לך מנוי למוצרי Creative Cloud של Adobe. אם כן, תוכל להקים תצוגה מדהימה של יצירות האמנות שלך עם תיק עבודות של Adobe אתר אינטרנט: למרות שהאתר מוגבל לחמש תבניות כרגע, הוא מציע דרך מרשימה להציג ולשלב פרויקטים מאפליקציות Adobe שלך (או מהרשת החברתית Behance של Adobe) לאינטרנט. אתה יכול להשתמש בתת-דומיין, או בשם דומיין משלך שנרכש מבחוץ. אם אינך מנוי Adobe Creative Cloud, תוכל לקבל גישה ל- Adobe Portfolio - יחד עם מנויים ל- Photoshop ו- Lightroom CC - תמורת 9.99 $ לחודש.
בלוגים מתקדמים: אם אתה מעדיף שליטה מלאה על הבלוג שלך, וורדפרס הוא הטיטאן של מערכות ניהול תוכן אישי. חברת הבלוגים מציעה אירוח לכל רמות הבלוגים, בין אם אתם מחפשים לכתוב בלוג תחת תת -דומיין חינמי של Wordpress (עם שטח של 3 ג'יגה -בתים) או שתרצו לפייס עוד מקום ושם דומיין מותאם אישית ($ 99 לשנה עבור 13 ג'יגה -בתים, או 299 $ לשנה לאחסון ללא הגבלה). וורדפרס היא שם דבר בבלוגים באינטרנט בעיקר בשל הנושא המדהים שלה וקהילת התוספים; אתה יכול להוסיף כל מיני תכונות מדהימות לאתר שלך על ידי הוספת תוסף חינם או שניים מותאמים אישית.
לקונים רציניים: אם אתה מנסה לפתוח חלון ראווה דיגיטלי משלך, Squarespace הוא שירות התחלה טוב - אבל Shopify הוא אחד המאסטרים בזירה זו. תמורת 29 $ לחודש תוכל לפרסם מספר בלתי מוגבל של מוצרים ואחסון באתר שלך; השירות דואג לעיבוד ועוזר לך לבנות תוויות משלוח, לעקוב אחר מלאי ועוד.
כרטיס הלכידה הטוב ביותר למתג
אירח אתר משלך: אם אינך יכול למצוא שירות אינטרנט שעושה בדיוק מה שאתה רוצה - או שהחלטת שאתה רוצה לבנות משהו שאפתני יותר - תרצה להשתחרר משירותי האינטרנט ולקנות אחסון אתרים משלך. . זה יכול להיות צעד מרתיע עבור מישהו שמעולם לא התנסה בבניית אתרים בעבר, ולכן אני ממליץ עליו באופן כללילאחרניסית עם שירות אינטרנט או שניים, ורק אם אתה באמת צריך בנייה מותאמת אישית.
יש שם כמה מארחי אתרים נהדרים, ולכולם יש דעות לגבי איזו חברה היא באמת הטובה ביותר, אבל היה לי בהצלחה יוצאת דופן עם Dreamhost במהלך השנים. אירחתי מספר אתרים אישיים באמצעות Dreamhost מאז אמצע שנות האלפיים; החברה מצטיינת בהפיכת אירוח אתרים לידידותי ככל האפשר, ומציעה טונות של 'קליק אחד' המאפשרים לך להתקין אוטומטית CMS באתר שלך, כך שלעולם לא תצטרך לגעת בקוד קוד. רוצה את הנוחות של וורדפרס או אתר בסגנון ויקיפדיה בשרת שלך? אין בעיה.
שלב 4: צא לבנייה!
לאחר שבחרת בשירות אינטרנט, קל כמו להרכיב את התבנית שלך ולהעלות את התמונות שאתה רוצה לאתר שלך. אם אתה רוצה לשדרג את תבנית שירות האינטרנט שלך המוכנה מראש עם כישרון משלך, אני ממליץ למצוא לוח צבעים טוב (ושונה): מצננים מציעה מחולל צבעים נפלא המאפשר לך 'לנעול' צבעים מסוימים (למשל אלה של הלוגו שלך) ומשתמש באלה לבניית ערכת צבעים משלימה לאתר שלך.
אם אתם מחפשים עוד השראה לעיצוב, אני ממליץ גם לצפות ב- PBS אומנות עיצוב אתרים - זהו סרטון קטן ומהנה שעובר את ההיסטוריה של עיצוב אתרים, כמו גם כמה עצות נהדרות לביצוע נכון.
שאלות?
וזה בערך מכסה את המהדורה הזו של פינת הקידוד. עדיין יש לך שאלה לגבי בניית אתרים כמתחילים? ספרו לי בתגובות ואני אסתכל.