שיחה ההאקר Emad
11 באוגוסט 2012 – 21:50 | 31 תגובות

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

המשך קריאה »
geek

חנון זה מגניב. תרבות החיים האינטרנטית-טכנולוגית-גאדג'טית. הדברים שמבדילים את הנערים מהגברים.

הרשת

סיפורים מהרשת, בעיקר זו הישראלית. מה קורה, מי קורה ולמה קורה.

וורדפרס

בעיקר תבניות מתורגמות לעברית ולפעמים דברים שקשורים לבלוגים ובלוגרים.

מערכות ניהול תוכן

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

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

על רשתות חברתיות, כלים לבניית רשתות ופלטפורמות חברתיות וכל מה מכונה web 2.0

ראשי » geek, בניית אתרים, הסיפור המרכזי, הרשת

המדריך האולטימטיבי לבניית אתר הבית שלך

מאת ארז וולף בתאריך 29 במאי 2010 – 13:5736 תגובות
זהו פוסט מספר 600 בבלוג. לרגל החגיגות, כנהוג בבלוג, עוד פוסט שימושי שנועד לקדם את תחום בניית האתרים ואפליקציות אינטרנטיות בישראל.

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

אתר הבית של בוראט - עיצוב מעולה

אתר הבית של בוראט - עיצוב מעולה

עצב ובנה לעצמך אתר מדהים

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

תבנית עיצוב מקסימה wordpress

תבנית עיצוב מקסימה לוורדפרס

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

הדרך המהירה

העצלנים יכולים להשתמש בשירות המגניב Geocities-izer שמוסיף לכל אתר אלמנטים חשובים של עיצוב ותחושה לפי הכללים של אתרי GeoCities המנוח. לדוגמא, Room404 לאחר שעבר גאוסיטיזציה:

חדר 404 לאר גאוסיטיזציה

חדר 404 לאר גאוסיטיזציה

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

לפניכם מדריך מפורט לבנייה ועיצוב של אתר אינטרנט וירטואלי:

תמונות יפות לאתר

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

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

כותרת

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

כותרת מסוגננת ולהבות

כותרת מסוגננת ולהבות

רקע

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

רקע יפה של כוכבים

רקע יפה של כוכבים

למי שאוהב רקעים אמנותיים, ניתן להשתמש בעזר החינמי Harm's Tile 99, שמאפשר יצירה של רקעים מסוגים שונים.

stile99 - עזר חינמי ליצירת רקעים יפים

stile99 - עזר חינמי ליצירת רקעים יפים

תגיות ה-HTML שעושות את ההבדל

אין דבר כזה שימוש מוגזם בתגיות <blink> ו -<marquee>. השתמש בהן בכל מקום בו תרצה להדגיש כותרת או מילה או סתם בשביל היופי.

עברית שפה קשה

הפורמט הויזואלי ידוע גם כ: ISO-8859-8 או כפורמט וובפונט. ניתן לזהותו כאשר העברית נראית הפוכה ביישומי חלונות. כמעט כל האתרים בעברית כתובים בפורמט זה ולכן אם אתם בונים אתר בעברית, תוכלו להשתמש בתוכנה המצוינת HEBTML, שתעזור לכם להפוך את העברית כך שלגולשים היא תראה כתובה נכון.

hebtml - עזרים לבוני אתרים בעברית

hebtml - עזרים לבוני אתרים בעברית

תיבת דואר

כעת משיש לכם אתר, תוכלו לשמור על קשר עם המבקרים באמצעות האינטרנט. אם עדיין אין לכם תיבת דואר אלקטרוני, תוכלו לפתוח אחת חינם לגמרי ב-hotmail.com.
רצוי להציג במקום ברור, כפתור יצירת קשר.
[כפתורים יפים לצור קשר]

כפתור צור קשר מסוגנן

כפתור צור קשר מסוגנן

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

אתר המדריך הישראלי ל-html 4.0

אתר המדריך הישראלי ל-html 4.0

מונה מבקרים

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

הוסף מונה מבקרים לאתר

הוסף מונה מבקרים לאתר

הפצת האתר ברחבי הרשת

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

אפשר אפילו יפה יותר

כעת, כדי להפוך את האתר לממש מזמין ומהנה עבור הגולש, רצוי מאד (חובה) להוסיף סקריפטים ב-DHTML (או ב-JavaScript, שפה תכנות חדשה לצד לקוח) שיעשירו את האתר באפקטים מרהיבים. ניתן להוסיף אפקט של שלג, גשם או בועות – שאלו הדברים הכי הגיוניים שיהיו באתר אינטרנט. רעיון נוסף הוא להפוך את סמן העכבר למעצבן יותר.
באופן מצער, הדוגמאות שכאן יעבדו רק בדפדפנים מתקדמים מסוג IE 5.5 +.

ףדה ךותב רבכעה תא וזיזה

ףדה ךותב רבכעה תא וזיזה


קרא פוסטים נוספים בנושא זה:

שתף את הפוסט בטוויטר

36 תגובות »

  • מאת יותם:

    תוספת:
    בשביל להיות מקושר וירטואלית לאתרים אחרים באותו נושא, מומלץ להיות חלק מ"טבעת-רשת" (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!

  • מאת חסוי:

    המתכון המושלם ליצירת אתר מחריד
    ומלא אנימציות

  • מאת drvvv:

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

  • מאת אסף:

    טיפים חשובים מאד!
    הכי חשוב! להשתמש בכמה שיותר פריימים על פני המסך זה מומלץ, כדי שכל חלק בעמוד ניתן יהיה להזזה עם סקרולברים אפורים או צבעוניים!
    2. אנימציה גם בשורת הסטטוס בתחתית העמוד חובה!
    3. שלישית – שימוש נרחב בהרבה Alerts ב-Mouse Over עם כל מיני השהיות זה דבר שגולשים מאד אוהבים. הצליל המוכר של הודעת Alert מעניק תמיד תחושה של בית.
    4. למרכז הכל! זאת אומרת כל מה שלא זז במרקי, אין כמו המראה הסימטרי של כד משיעור פיסול למתחילים.
    5. בורדר סגול לתמונות שהן לינק, למה לדרוס את הדיפולט המופלא הזה..
    6. כמה שיותר פונטים שונים, גדלים שונים, הכל הכל כולל הכל כמובן בבולד ומה שחשוב באמת גם באיטליקס.
    למתקדמים:
    גיפים שקופים שנראים טוב על רקע שחור לאתר עם רקע לבן ולהפך, אין כמו הילת הפיקסלים למתן תחושה  מתקדמת ועדכנית.
     

  • מאת מיכאל ז.:

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

  • מאת ToMeR:

    איזה נוּב אתה!

    כשלוחצים על כפתור העכבר הימני מופיע תפריט שמאפשר לעשות "העתק" לכל התוכן בדף. בגלל שאני נחמד, להלן סקריפט שיפתור את הבעיה. –> הקש כאן <–
    הכתובת של האתר שלך ארוכה. למה שלא תייצר לאתר שלך כתובת מקוצר ב־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 ומכוניות

  • מאת hapohel:

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

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

  • מאת חטייאר:

    סליחה, רק שאלה.
    האם אתם ממליצים להתאים כבר את האתר ל 600*800 או שכדאי עדיין לדבוק ב – 640*480 ?
    הרי לא כולם עברו לדור החדש של מסכי הענק,  CRT, בגודל 15 אינטש.

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

  • מאת דיאטה:

    איזו מערכת ניהול תוכן הכי מתאימה? מי יודע? אני צריכה שתהיה user-friendly
    שתאפשר לערוך טגיות מטה ושיהיו הרבה פלאגנים.
    יותר מידי דרישות?

  • מאת יונתן:

    חחחחחחחחחחחח רצחת אותי!!!
    בהתחלה לא הבנתי, חשבתי אתה רציני…

  • מאת אף:

    בעוד כמה שנים, או שנה, או שבוע- יצחקו עלינו ועל IE10, הטלפון של פייסבוק, על r.augmentation ועוד…

  • [...] ארז וולף מביא לכם את המדריך האולטימטיבי לבניית אתרים. [...]

  • מאת רמי:

    איזה מערכות תוכן מסופקות באופן שוטף??

  • אכן אחד מהמדריכים הטובים שנכתהו אי פעם ושותפו ברשת.
    תודה

הוסף תגובה!

עליך להיות מחובר כדי להוסיף תגובה.

127 queries in 0.291 seconds.