המדריך האולטימטיבי לבניית אתר הבית שלך
כשיצא הסרט Borat השתמשה רשת פוקס במיניסייטים כדי לקדם את הסרט במדינות שונות. האתר הרשמי של הסרט היה מעוצב מאד נכון (עבור הסרט והדמות) אך הוא נמחק (אני לא מוצא אותו ונדמה לי היה איזה ויכוח או משהו שאילץ אותם למחוק אותו) וכיום מה שנשאר הם רק אותם מיניסייטים שגם הם נבנו בהתאם לאותם כללים ושפה עיצובית, לדוגמה אתר זה.
אתר הבית של בוראט - עיצוב מעולה
עצב ובנה לעצמך אתר מדהים
כיום יש כלים רבים באינטרנט אשר יאפשרו לך לבנות לעצמך אתר ססגוני ומזמין. עבור המשתמשים המתקדמים יותר, משתמשי וורדפרס, הכנתי תבנית עיצוב אותה ניתן להוריד בחינם ולהתקין בבלוג (Web Log, יומן מקוון) שלהם.
תבנית עיצוב מקסימה לוורדפרס
הדגמה של התבנית אפשר לראות כאן, ואת התבנית עצמה אפשר להוריד מכאן בחינם.
הדרך המהירה
העצלנים יכולים להשתמש בשירות המגניב Geocities-izer שמוסיף לכל אתר אלמנטים חשובים של עיצוב ותחושה לפי הכללים של אתרי GeoCities המנוח. לדוגמא, Room404 לאחר שעבר גאוסיטיזציה:
חדר 404 לאר גאוסיטיזציה
אלו ששולטים בתוכנת מעבד התמלילים וורד, יוכלו להיעזר במדריך לבניית אתר עם וורד 2000 בנענע.
לפניכם מדריך מפורט לבנייה ועיצוב של אתר אינטרנט וירטואלי:
תמונות יפות לאתר
לפני שנתחיל לבנות את האתר צריך לאסוף תמונות שיהממו את הגולש. אחת מההמצאות המעולות של האינטרנט הם ה- Animated Gifs וישנם אתרים רבים שמאפשרים להוריד מהם תמונות כאלו בחינם לשימוש באתר שתבנה. התמונות הזזות האלו נועדו כדי למשוך את תשומת הלב של הגולש, כך שככל שיהיו יותר תמונות כאלו פזורות על המסך, כך לגולש יהיה ברור להיכן להסתכל ובמה להתמקד. רצוי להוסיף תמונות שקשורות למחשבים (הרי מדובר בדף שנצפה באמצעות מחשב!).
אפשר למצוא כאן מקורות לתמונות כאלו וגם כאן (תפריט בצד ומעבר בין הדפים בתפריט למטה).
 |
 |
 |
 |
 |
כותרת
ראשית צריך ליצור כותרת לאתר. הכותרת עצמה צריכה להסביר למבקר במה עוסק האתר, למשל: "עמוד הבית שלי". הכותרת צריכה להיות מסוגננת, ברורה ולמשוך את העין. להבות יוכלו לסדר את העניין הזה.
[אתר למחולל כותרות, יש להקליד את הכותרת הרצויה ולבחור את סוג האפקט]
כותרת מסוגננת ולהבות
רקע
כל אתר צריך רקע. ניתן לבחור בין שני סוגי אתרים, כאלו עם רקע ססגוני ומאד צבעוני או כאלו עם רקע שחור וכוכבים. רצוי שהרקע יהיה עם אנימציה ותנועה. יכולים להיות גם רקעים עם תמונות של חומת אבנים או קרשים.
רקע יפה של כוכבים
למי שאוהב רקעים אמנותיים, ניתן להשתמש בעזר החינמי Harm's Tile 99, שמאפשר יצירה של רקעים מסוגים שונים.
stile99 - עזר חינמי ליצירת רקעים יפים
תגיות ה-HTML שעושות את ההבדל
אין דבר כזה שימוש מוגזם בתגיות <blink> ו -<marquee>. השתמש בהן בכל מקום בו תרצה להדגיש כותרת או מילה או סתם בשביל היופי.
עברית שפה קשה
הפורמט הויזואלי ידוע גם כ: ISO-8859-8 או כפורמט וובפונט. ניתן לזהותו כאשר העברית נראית הפוכה ביישומי חלונות. כמעט כל האתרים בעברית כתובים בפורמט זה ולכן אם אתם בונים אתר בעברית, תוכלו להשתמש בתוכנה המצוינת HEBTML, שתעזור לכם להפוך את העברית כך שלגולשים היא תראה כתובה נכון.
hebtml - עזרים לבוני אתרים בעברית
תיבת דואר
כעת משיש לכם אתר, תוכלו לשמור על קשר עם המבקרים באמצעות האינטרנט. אם עדיין אין לכם תיבת דואר אלקטרוני, תוכלו לפתוח אחת חינם לגמרי ב-hotmail.com.
רצוי להציג במקום ברור, כפתור יצירת קשר.
[כפתורים יפים לצור קשר]
כפתור צור קשר מסוגנן
אם אינך יודע כיצד להוסיף קישור על תמונה, תוכל להיעזר באתר "המדריך הישראלי ל-html 4.0" או באתר של סיגל בוחמן.
אתר המדריך הישראלי ל-html 4.0
מונה מבקרים
אחד מהנתונים החשובים שכדאי לספק לגולשים באתר, הוא כמות המבקרים בו. ניתן להוסיף counter, מונה מבקרים באמצעות אתרים שונים המציעים שירות זה, כגון Easy Counter. היות ומדובר בתוספת מתקדמת לאתר, רצוי להוסיף מונה מבקרים שיהיה מעוצב באופן מודרני וחדשני, למשל כספרות דיגיטליות ירוקות.
הוסף מונה מבקרים לאתר
הפצת האתר ברחבי הרשת
אחרי שסיימתם לבנות את האתר, תרצו שמבקרים יגיעו אליו. לשם כך, תוכלו להמליץ עליו לתוכנית הטלויזיה זומביט, להוסיף אותו לפרוייקט DMOZ או להיעזר בעמוד "הפצת האתר ברחבי הרשת" של האתר איילה – הבית לבוני אתרים. דרך נוספת היא באמצעות החלפת באנרים.
אפשר אפילו יפה יותר
כעת, כדי להפוך את האתר לממש מזמין ומהנה עבור הגולש, רצוי מאד (חובה) להוסיף סקריפטים ב-DHTML (או ב-JavaScript, שפה תכנות חדשה לצד לקוח) שיעשירו את האתר באפקטים מרהיבים. ניתן להוסיף אפקט של שלג, גשם או בועות – שאלו הדברים הכי הגיוניים שיהיו באתר אינטרנט. רעיון נוסף הוא להפוך את סמן העכבר למעצבן יותר.
באופן מצער, הדוגמאות שכאן יעבדו רק בדפדפנים מתקדמים מסוג IE 5.5 +.
ףדה ךותב רבכעה תא וזיזה
תוספת:
בשביל להיות מקושר וירטואלית לאתרים אחרים באותו נושא, מומלץ להיות חלק מ"טבעת-רשת" (Webring) של אתרים המקושרים אחד לשני, למשל
http://blueopossum.homestead.com/files/Logo3/mood.jpg
אם אתם רוצים לשים תמונות איכותיות באתר, אל תשמרו את הקובץ בתור gif כי הוא מוגבל בכמות הצבעים שהוא יכול להציג, וגם לא jpeg כי הוא גורם לתמונה להיראות מפוקסלת כתוצאה מדחיסה מיותרת. תשמשו ב־BMP!
אם העברית באתר שלכם מופיעה במהופך – תשנו את הקידוד. אם היא עדיין מופיעה באופן שגוי – תחלפו דפדפן.
אומרים שאינטרנט אקספלורר 4 מצליח להציג את העברית נכון.
[...] This post was mentioned on Twitter by Itamar Sha'altiel, yosib. yosib said: המדריך האולטימטיבי לבניית אתר הבית שלך: זהו פוסט מספר 600 בבלוג. לרגל החגיגות, כנהוג בבלוג, עוד פוסט שימושי שנוע… http://bit.ly/bSOsfN [...]
אני גם אוהבת שיש באתרים מוסיקה. אין דרך נעימה יותר לקבל את פני הבאים לאתר שלי מאשר עם שיר נחמד שיתאים לאנימציות באתר.
סחטיין,
בהחלט זאת נוסטלגיה! אני בטוח שכל מיש שהוא בין לפחות 20 ( כמוני ), היה בונה ככה את האתרים בעבר, לפחות את האתרים הראשונים.
בהחלט נוסטלגיה!
there is no like the old internet webs i dont get the new internets!
המתכון המושלם ליצירת אתר מחריד
ומלא אנימציות
מומלץ גם לשים קאפצ'ות מורכבות ומטושטות, גולשים אוהבים שמאתגרים אותם.
תזהר, בסוף מישהו יקח את זה ברצינות!
טיפים חשובים מאד!
הכי חשוב! להשתמש בכמה שיותר פריימים על פני המסך זה מומלץ, כדי שכל חלק בעמוד ניתן יהיה להזזה עם סקרולברים אפורים או צבעוניים!
2. אנימציה גם בשורת הסטטוס בתחתית העמוד חובה!
3. שלישית – שימוש נרחב בהרבה Alerts ב-Mouse Over עם כל מיני השהיות זה דבר שגולשים מאד אוהבים. הצליל המוכר של הודעת Alert מעניק תמיד תחושה של בית.
4. למרכז הכל! זאת אומרת כל מה שלא זז במרקי, אין כמו המראה הסימטרי של כד משיעור פיסול למתחילים.
5. בורדר סגול לתמונות שהן לינק, למה לדרוס את הדיפולט המופלא הזה..
6. כמה שיותר פונטים שונים, גדלים שונים, הכל הכל כולל הכל כמובן בבולד ומה שחשוב באמת גם באיטליקס.
למתקדמים:
גיפים שקופים שנראים טוב על רקע שחור לאתר עם רקע לבן ולהפך, אין כמו הילת הפיקסלים למתן תחושה מתקדמת ועדכנית.
מחר בבוקר אתה כבר תשמע מהעורך דין שלי. לדעתי התעוורתי לחלוטין בגלל הפוסט הזה.
(העורך דין שלי יעבוד בחינם כי בניתי לו יופי של אתר בגאוסיטיז)
איזה נוּב אתה!
כשלוחצים על כפתור העכבר הימני מופיע תפריט שמאפשר לעשות "העתק" לכל התוכן בדף. בגלל שאני נחמד, להלן סקריפט שיפתור את הבעיה. –> הקש כאן <–
הכתובת של האתר שלך ארוכה. למה שלא תייצר לאתר שלך כתובת מקוצר ב־come.to כמו כולנו?
בבקשה תקפידו על תמונות קלות, כי אני מחובר על 33,600 (יש לי מודם מהיר של 56k, אבל הוא לא מצליח להתחבר לבזקנט בגלל בזק החראות!111).
LOL גדול!
ושכחת גם: הכי טוב טקסט אדום על רקע כחול.
הדבר העצוב הוא, שהיתה לי פעם תלמידה שבאמת יישמה את כל הסעיפים שלך ועוד התווכחה עם המורה (אני) ש"עיצוב זה ענין של טעם! מה שאני עושה פה נראה מצוין בעיני המון אנשים. הנה, כל מי שהראיתי לו מאוד אהב!"
עוד נקודות חשובות:
אחסן בסרפרי, כי זה חינם, ועשה קיצור דרך עם up.co.il או go.to / come.to !
פוטושופ 3 מציע פילטרים מרנינים בשם bevel & emboss – הם הופכים כל טקסט או צורה למלאי חיים
XARA 3D לכותרות! התוכנה הכי טובה בעולם
פרונטפייג' אקספרס היא תוכנה קצת יותר טובה מוורד 2000 לבניית אתרים
טבלאות בתוך טבלאות בתוך טבלאות עוזרות לסדר יופי את התוכן עם העיצוב באתר
בכל אתר עברי שמכבד את עצמו יש 10 פונטים שונים. חצי מהם נוצרו ע"י ברק פלורסהיים. החצי השני של בן נתן.
לצערנו הרב, האתר כבר של סיגל בכמן כבר לא פעיל (http://www.sigall.co.il) אבל בילדר כן!! http://builder.co.il
המון תודה, התחלתי ליישם על אתר שרצתי לבנות לחתול שלי עם תמונות ואנימיציות. העלתי רק חלק מהתמונות כי האינטרנט התנתק ונכנסה שיחה לטלפון.
קצת הסתבכתי עם הקינון של הטבלאות אחת בתוך השנייה אבל מה לא עושים למען עיצוב מתקדם ומודרני?
זהירות משימוש בתמונות JPG, זה לא נראה טוב אצל מי שיש לו VGA עם 16 צבעים. אצלי זה לא בעיה, קניתי מחשב עם הכנה למולטימדיה.
הרסת אותי, בחיי… וגם התגובות הנפלאות. ממש כיסיתם את כל מה שזיכרוני החלוד העלה, אבל הנה משהו קטן אחרון:
לשים (לצד What's New) דף What's Cool ובו קישורים לכל מה שאהבתם ברשת.
אני בשוק!!! מה זה ההצעות הנוראות האלה? זה ממש משנות השמונים.
עשיתם לי את היום
זה כל-כך אני והאתר שבניתי כשהייתי בת 14 לפני 12 שנה!
פוסט חזק!
כמו לבוראט, גם לתוכנית הטלוויזיה "שוטטות" בנו בזמנו אתר בסגנון הזה:
http://web.archive.org/web/20030522180334/http://www.videotop.co.il/
חזק ביותר!
נהניתי מכל מילה
לקח לי רגע אחד המום כדי להבין… ענק, גדול מהחיים!
אני זוכר אפילו שהשתמשתי בחלק מהתוכנות הללו…
אתר דינמי זה מה זה OUT. היום מה שהולך זה אתר סטטי שמאוחסן בשרת חינמי מהיר וחזק.
רק צריך לקחת את הצייר ולעשות תמונות BMP איכותיות ששוקלות פחות מ-10 מגה ל-10 פיקסל.
בעזרת המברשת המקצועית של הצייר בונים כותרת מרשימה "ברוכים הבאים לאתר הבית שלי !!!!111"
איזה יופי של פוסטלגיה, גרמת לי לחזור לשנות ה-90
[...] הסיפור המרכזי » המדריך האולטימטיבי לבניית אתר הבית שלך 29 במאי 2010 – 13:57 | 23 תגובות [...]
אולי האתר הראשון שבניתי לעצמי ב-97
http://hotsport.tripod.com/
נראה לי עונה על רוב הדרישות.
שיט, שכחתי להכניס מוסיקה.
לא הבנתי אם זה ציניות או סתם טעם רע.
כמובן שאין לשכוח להוסיף 30 דפי קישורים, כאשר בכל אחד 500 קישורים (בטבלה) לאתרי GIF ומכוניות
מה שעצוב, שרבים מהקוראים כנראה ייתיחסו לאייטם הזה ברצינות.
מה שעוד יותר עצוב, שלקח לי זמן להבין שמדובר בבדיחה.
מה שמשמח, זה שאם נעשה סטטיסטיקה לפי התגובות, הרוב הבינו.
מה שעצוב, שמספיק אחד שלא הבין, והלך לפי ההמלצות, כדי לפגוע בקארמה שלך באופן בלתי הפיך לנצח נצחים.
סליחה, רק שאלה.
האם אתם ממליצים להתאים כבר את האתר ל 600*800 או שכדאי עדיין לדבוק ב – 640*480 ?
הרי לא כולם עברו לדור החדש של מסכי הענק, CRT, בגודל 15 אינטש.
אפשר להשתמש באחת ממערכות התוכן המסופקות לכל מי ששוכר שטח אכסון בחברות המתמחות בכך.
עלות נמוכה וכל העזרים מוטמעים מראש.
איזו מערכת ניהול תוכן הכי מתאימה? מי יודע? אני צריכה שתהיה user-friendly
שתאפשר לערוך טגיות מטה ושיהיו הרבה פלאגנים.
יותר מידי דרישות?
חחחחחחחחחחחח רצחת אותי!!!
בהתחלה לא הבנתי, חשבתי אתה רציני…
בעוד כמה שנים, או שנה, או שבוע- יצחקו עלינו ועל IE10, הטלפון של פייסבוק, על r.augmentation ועוד…
[...] ארז וולף מביא לכם את המדריך האולטימטיבי לבניית אתרים. [...]
איזה מערכות תוכן מסופקות באופן שוטף??
אכן אחד מהמדריכים הטובים שנכתהו אי פעם ושותפו ברשת.
תודה