הארות דיגטליות..

סימנריון - תהליך העיצוב של ווב

ערן — Thu, 31 Aug 2006 17:10:34 +0000

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

מוזר..

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

טים ברנרס לי (ממציא ה WWW ) בפודקאסט משותף עם חברת IBM אומר :

Totally not. Web 1.0 was all about connecting people. It was an interactive space, and I think Web 2.0 is of course a piece of jargon, nobody even knows what it means. If Web 2.0 for you is blogs and wikis, then that is people to people. But that was what the Web was supposed to be all along.

ככה התחלתי את העבודה שלי. ניתן להוריד אותה בקישור הבא: Web2.0 Desgin.PDF

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

ספר חדש שבא לי לכתוב..

ערן — Thu, 24 Aug 2006 10:33:30 +0000

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

או באנגלית,

פירסמתי זאת גם בדיגג, מעניין מה יהיו התגובות..

הצבעוניות והטיפוגרפיה בWeb2.0

ערן — Mon, 14 Aug 2006 23:35:44 +0000

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

צבעוניות2.0

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

המעברים הם הכלי הראשי בניסיון ליצור עומק מדומה למראה השטוח של האתרים. קשת המעברים ממחישה עיקרון מובהק בתפיסת ה Web2.0 והוא הדינמיות והפעילות האקטיבית של הדפים הנוצרים כל פעם מחדש ב”Live Web”. קלות היצירה של המעבר על יד CSS התוותה מגוון רחב לשימושים בו. מעברים ללבן מייצרים תחושה של הארה מדומה, השתקפות והברקה המבטאים את הייחודיות של צפייה בתוכן המתקיים במסכי הקצה של הרשת בלבד.

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

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

טיפוגרפיה2.0

תצורת התוכן הנפוצה ביותר ברשת היא כתב. אתרי Web2.0 טקסטואליים בעיקר, הרחיבו את השימוש במשפחת הסאן סריפיים כאות כותרת ואות טקסט רץ לא במקרה. הגופנים Helvetica ו Ariel מייצגים אסכולה מודרנית בטיפוגרפיה האנגלית שהתפתחה במחצית השנייה של המאה ה20. תפוצתן העולמית זינקה אודות לחברות התוכנה הגדולות אשר הכלילו אותן במערכות ההפעלה⁶ שיצרו. המראה הפרוגרסיבי, הגאומטרי והאורבני אומץ לאווירת החידוש הטכנולוגי המאפיינת את האתרים.היכולת לעצב את הריווח בין האותיות, המילים והשורות בעזרת גיליונות הסגנון המדורגים (CSS) הקנתה למעצבים שליטה רבה בהתמודדות עם טקסט דינמי הנוצר על גבי הרשת.

Helvetica in MacOs, Ariel in Windows, Nimbus Sans (Based on Helvetica) in GNU/ Linux

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

You know you’ve achieved perfection in design, not when you have nothing more to add, but “

when you have nothing more to take away “ . - Antoine de Saint-Exupery

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

זן 2.0

ערן — Sun, 23 Jul 2006 20:33:59 +0000

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

החידושים שערכתי בערכה:

1. תירגום מלא לעברית של כל הדפים והתמונות.

2. הוספת תמונה קבועה לכותרת הראשית.

3. הרחבת התפריט משתמש.

* אם ישנם טעויות, וישנם. אשמח לשמוע על כך..

ניתן להוריד את הקובץ, כאן.סוג: rar, משקל: 87kb.

ניתן להוריד גם את ערכת רשימות המינגווי (בשיפוץ !) משקל 111kb.

מה זה Web2.0 / טים או’ריילי

ערן — Fri, 21 Jul 2006 14:36:23 +0000

המאמר תורגם מאנגלית.

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

בסיעור המוחין שנערך צפו הנקודות הבאות :

גוגל אדסנס ~ דבלקליק.קום המעבר משטחי פירסום באתרים גדולים לפירסום ממוקד.
פליקר ~ או-פוטו המעבר מריכוז לשיתוף ויצירת מאגר מידע אודות הגולש.
אקאמי ~ ביטורנט המעבר לשיתוף רוחב הפס. יחס ישיר בין פופלריות קובץ למהירות הורדה.
אמ.פי.3.קום ~ נפסטר השינוי מחברה לגולשים שיוצרים מאגר מרכזי.
בריטניקה און ליין ~ ויקיפדיה השינוי הרדיקלי בתשלום.
אתרים אישיים - בלוג השינוי הרקידלי ביכולת העדכון - לינק דו כיווני trackback
EVDB ~ Evite הפיכת מאגר אירועים ללוח שנה מסוכנרן (RSS)
שמות מתחם קליטים ~ אופטימיזציה במנועי חיפוש התמקדות במטאמידע של הדף.
מספר צפיות ~ תשלום בעבור קליק מיקוד הפירסום בעקבות מידע אודות הגולש.
אתרים ~ שירותי רשת המעבר מלהסתכל על (site) ללהשתמש ב (service) .
פירסום ~ שיתוף השינוי הרדיקלי מגרסאות רשמיות לביטא ניצחית.
מערכות ניהול תוכן ~ ויקיפדיות השינוי הרדיקלי ביכולת העריכה.
תאזרוס וספריות ~ תגים, ”תיוג עממי“ השינוי הרדיקלי בארכיטקטורה של המידע.
עקיבה אחר דף ~ סינדיקציה. מסימנייה סטטית לעדכנייה (המילה הכי מתאימה, מפיירפוקס , כמובן) דינמית.

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

אז מה זה בעצם ווב 2.0 באזזוורד חסר משמעות או החוכמה הקונבציונאלית החדשה ?

החבר’ה של או’ריילי סיכמו זאת בשישה נקודות:

הרשת כפלטפורמה

המעבר המתהווה ממערכת ההפעלה השולחנית desktop כפלטפורמה למערכת רשת webtop.

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

בקרוב, אקווה להרחיב על כל אחד מהסעיפים.

המשמעות של web2.0 למעצבים

ערן — Thu, 20 Jul 2006 19:25:17 +0000

תורגם מכתבה במגזין Digital Web.

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

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

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

1. כיתוב סמנתי Writing Semantic Markup: Transition to XML - תיוג שמחשב יכול להבין את המשמעות של חתיכת המידע. פרומטים של דפי תצוגה בעלי תוכן סינדיקטיבי המסוגלים להודיע למשתמש על יצירת תוכן חדש בהם. RSS

2. שירותי רשת Providing Web Services: Moving Away From Place - בימיה הראשוניים של הרשת האתרים נבנו כאסופת דפים סטטים עם תוכן טבוע בתוכם. טכנולוגיות ה XML מאפשרת שיתופיות תוכן בין כמה אתרים וכמה מערכות. כתוצאה מכך נוצרה אחת מההשפעות ההמשמעותיות של השפה עיצובית. במקום עיצוב ויזואלי ( פלאש, תמונות ) המהווה את הממשק של התוכן, אפליקציות רשת מעצבות תכנותית ( CSS ) את הממשק על ידי אותו תוכן. ההשקעה בבנייה תשתנה גם היא, יותר השקעעה בעיצוב שנע עם התוכן מאשר בהתגנדרות של האתר יוצר התוכן. אלמנט ההפתעה של תוכן משונע עם עיצוב יוצר את חוויות event-driven experiences.

3. הצלבות מידע Remixing Content: About When and What, not Who or Why – חיפושים עתידיים במנועי חיפוש לRSS יכולים לגרום למשתמשים אף לעקוף את העיצוב הוויזאלי של מידע. משימתם העתידית של מעצבי רשת תהיה למצב את התוכן עצמו.

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

5. מטאמידע Adding Metadata Over Time: Communities Building Social Information - אלמנט משמעותי שפותח בווב 1.0 הינו היכולת לערוך שינויים בפרסום הראשוני. המהדורות וההדפסות של העולם המודפס התנוונו. כתוצאה מהיכולת לאסוף מטאמידע על השינויים ניתן יהיה להעמיק בתיאורים, להבהיר מושגים ולהעצים את מיקוד ההפניות. בווב 2.0 צעדו עם האלמנט צעד קדימה תיוג ומטאמידע שמצורף על ידי הגולשים מעניק את היכולת לצפות ויזואלית בטרנדים ובשינויים הנרקמים על ידי הקהילה.

6. המעבר לתכנות והפרדה בין מבנה וסגנוןShift to Programming: Separation of Structure and Style - המעבר מעיצוב אתרים דו שלבי ( ויזואלי לצורה – תיכנותי לתוכן ) לשלב יחיד ( תיכנותי בלבד - תכנות לצורה ולתוכן ). הימים הראשונים של תוכן מוטמע בטריקים של טבלאות ואנימציות התחלפו למידע עיצובי הנפרד מהתוכן היוצר קו ברור בין אותו תוכן ועיצוב המבנה האחסוני שלו. הווב 2.0 מוגדר פחות על ידי המקום שיצר אותו ולכן הוא מציע פחות סגנון ויזואלי. העיצוב מותאם יותר להבנה על ידי מכונה. כך שמידע סמנתי יותר חשוב מההצגה והמבנה. ”ווב 2.0 הוא אודות הפיכת האינטרנט מועילה למחשבים“ מנכ”ל אמזון ג’ף בזוס.

המשמעויות עבור המעצבים :• מיצוב תוכן.• התערות והתרגלות לאפליקציות הרשת.

• עיצוב סנדיקיטיבי – עיצוב וחשיבה מעבר להצגה יחידה.

• לקוח רזה / מחשב על מרכזי.

השפה העיצובית של Web2.0

ערן — Thu, 20 Jul 2006 19:19:19 +0000

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

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

המוטו העיצובי - פשטות, מינימום עשייה, סמנטיות וסטנדרטים הן מילות המפתח לעולם הווב 2.0

Simplicity, doing less, semantics and standards are all keywords being flung around the web-two-o

תרבות 2.0 – מסביר על מספר מאפיינים:

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

2.צללים – חבל לא להשתמש, הכוונה אינה ליצור מראה תלת מימדי אלא להוציא יותר מהעיצוב הפשוט אלמנטים זכירים ומוכרים.

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

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

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

5.כותרת תחתונה ( footer ) – בשביל המראה המקצועי החותם כל דף.עדין או רציני.

6.ענן תגים – מודול קטן להצגה שונה של פופולריות חיפושים.

7.תפריט ניווט מאוזן - עם רקע צבעוני .

8. קישורים - בעת שהות העכבר מעליהם אפקט אינוורט ( Invert ) ורקע צבעוני.

9. הדגשות - צבע רקע צהוב עדין לטקטס מודגש.

10. מעברים - ( Gardients )

11. אפקט הריצפה הרטובה - נלקח מApple

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

דף ויקי לשאלה מה זה ווב 2.0 בשבילך ? :

חקירה דיגטלית - עיצוב 2.0

ערן — Thu, 20 Jul 2006 18:45:06 +0000

בימים האחרונים הקמתי מיני-ויקי לתיעוד כתיבת עבודת הסימנריון שלי בנושא התפתחות הרשת - טכנולוגית / וויזואלית, הרשת הראשונה אשר נוצרה ב 95 בישרה על התקדמות טכנולוגית בתחום התקשורת והמיחשוב. לרשת זו ( ווב 1 ) נוצרו מאפיינים חזותיים ותוכניים בעקבות הטכנולוגיה וסוג המידע אשר התקיים בה. המעבר ( החלקי עדיין ) לweb2.0 סימן קפיצה טכנולוגית ותפיסתית למשתמשי הרשת.

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

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