חמשת שלבי הכניסה לעולם הCSS ע"פ הקבלה

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

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

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

שלב ה״אההה עכשיו הבנתי״: בשלב השלישי (שגובל בקביעת תור אצל רופא נפש) אחת לכמה דקות תגידו לעצמכם (בד״כ גם בקול ובצורה כזאת שכל מי שבבית ישמע) ״אההה עכשיו הבנתי……!!״ (מכאן השם המקורי לשלב). אל תבהלו, זה קורה לכל בן אדם נורמלי. כמוני! (הבלוג הזה מגדיר מחדש את המושג "נורמלי").

שלב ההצלחה: השלב הרביעי בד"כ יגיע רגעים ספורים אחרי השלב השלישי. בשלב הזה אתם תרגישו כמו מלכים – אף אחד לא יכול עליכם אתם מלכי הCSS! אתם יכולים לעשות הכל, ליצור ולבנות בהנף עכבר. אבל אל תשמחו יותר מדי כי אז מגיע..

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

אם עברתם את חמשת השלבים (ותת השלב) והתחלתם לשנוא את הIE תדעו שאתם על הדרך הנכונה
בהצלחה!

עשה לך עיצוב ובנה לך אתר

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

בטח אתם שואלים את עצמיכם (״לא אנחנו לא!״) איך מתחילים ללמוד בכלל HTML וCSS  ולגמרי במקרה הכינותי מראש (באמת אמרתי את זה?) כמה כלים באינטרנט שקיבלתי/מצאתי כדי לענות על הדרישה.

הכלי הראשון הוא שני שיעורים להורדה, אחד על XHTML והשני על CSS שמחולקים למס' סרטונים המסווגים לפי נושאים ומסבירים שלב אחרי שלב על השימוש בפונקציות של השפות.
הכלי השני הוא אתר אינטרנט ישראלי בשם וובמאסטר שמתכלל בתוכו שיעורים לקריאה בעברית על כל שפות האינטרנט.
עוד 2 אתרים מצוינים הם css-tricks ו tutsplus שמספקים מדריכים מעולים למתחילים ולמתקדמים בCSS.
הכלי האחרון הוא חבר וותיק בשם מר.גוגל שבהכנסת מילות החיפוש "CSS Tutorials" יספק לכם עשרות מדריכים בנושא!

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

ואז התגובה שלי תהיה: "אני יודע אני יודע, תמשיכו בבקשה…"

חג פסח כשר,שמח וחסר עצירויות לכולם!

סבבה והכל אבל…

מכירים את המשחק "סבבה והכל אבל.."?

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

"הוא סבבה והכל אבל מנהל רומן עם נמלה"

"היא סבבה והכל אבל מגדלת זקן ופיאות"

"היא סבבה והכל אבל בעלת עין וגבה אחת"

"הוא סבבה והכל אבל ישן עם אייפון במיטה" (שתיקה מביכה)

וכך הלאה…

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

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

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

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

מחר מ-ל-ח-מ-ה! על זירת הלחימה הסלולארית נגד האייפון

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

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

מה שבאמת מעניין זה מה שקורה אי שם במרחק 12 שעות טיסה מאיתנו בארץ האפשרויות הבלתי מוגבלות – ארצות הברית.

הטוב:

המכשיר הראשון שעשה רטט וצלצולים ותוכנן להיות מתחרה ישיר לאייפון או כמו שהרבו לכנות אותו ״האייפון קילר״ הוא הפאלם-פרה [Palm-Pre]. הפאלם-פרה פועל על מערכת ההפעלה WebOS שפותחה ע"י חברת פאלם ומציעה יכולות מולטי טאסקינג [היכולת להפעיל מס' יישומים במקביל] מתקדמות ותמיכה מלאה במולטי טאצ' שלפי מה שהביקורות אומרות "גורמת לאייפון להיראות כמו גלגל מרובע". הפאלם פרה אמור להיות מכשיר מאוד מעניין, אתם יכולים לראות למה אני מתכוון בסרטון הבא:

הרע:

הפאלם פרה הוא באמת מכשיר מיוחד אבל אז.. אז יש את הN900 – נושא הדגל של נוקיה. מכשיר מדהים עם יכולות מולטי טאצ׳ מתקדמות, סליידר רוחבי בעל מקלדת מלאה, תמיכה בהרצת מס׳ יישומים במקביל (מולטי טאסקינג) וכמובן חנות אפליקציות (נשמע מוכר?) שתפתח במקביל להשקת המכשיר לקראת סוף החודש. בנוסף, נוקיה הגיעה להחלטה לשים סוף למערכת הסימביאן האיטית והותיקה ולהחליף אותה במערכת הפעלה מתקדמת בשם Maemo המבוססת על מערכת ההפעלה לינוקס (אותה לינוקס חינמית שבאה להתחרות בווינדוס של מיקרוסופט). בנוסף, נוקיה השקיעה מאמץ עילאי כדי להפוך את המכשיר למגה-סמארטפון והוסיפה לו זיכרון של 1 ג'יגה זיכרון וירטואלי [תחשבו שמחשב ביתי ממוצע יש 2 ג'יגה] + 32 ג'יגה בייט לאיחסון קבצים [עם אפשרות להרחבה] כך שלמעשה גם את הבית שלכם אתם כבר לא צריכים…

המכוער במיוחד:

המכשיר האחרון שעליו צריך לדבר הוא הדרואיד [Droid] החדש של מוטורולה, עם מערכת ההפעלה אנדרואיד של גוגל, שלרגע לא חשבתי שתשב בצד בחיבוק ידיים. תאריך ההשקה של הדרואיד מתוכנן לתחילת נובמבר ואת רוב הפרטים לגבי המכשיר גוגל ומוטורולה משאירות באפילה [עוד מהלך תקשורתי מוכר..] כך שחוץ מפרטים טכניים כמו מסך מגע בגודל 3.7 אינץ', מעבד עוצמתי ומצלמת 5 מגה פיקסל אין מה להוסיף. מה שכן, לפי השמועות מחר גוגל אמורה להודיע על תוכנת GPS חינמית שקרוב לוודאי תשתלב בדרואיד.

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

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

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

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

ויקי ויקי אל תציקי, אני כבר לא יכול!

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

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

————————————————————————————-

נתחיל מהתחלה: מהו מעצב גרפי?

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

נמשיך בהמשך: איזה תפקידים קיימים בתחום העיצוב הגרפי?

מפתח המותג (Brand identity developer)

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

מעצב הלוגו (Logo Designer)

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

מאייר (Illustrator)

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

מפתח תוכן ויזואלי (Visual Image Developer)

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

מפתח מולטימדיה (Multimedia Developer)

מפתחי מולטימדיה יכולים להגיע מרקע של עיצוב גרפי או רקע של איור/אילוסטרציה ולהשתמש בכישורים הללו ביצירת תנועה, קול ו/או אינטראקטיביות. מפתחי מולטימדיה כוללים Motion designers, אנימטורים ו- Videographers. התפקידים של מפתחי המולטימדיה כוללים עריכה גרפית, עריכת סאונד, תיכנות וכדומה.

מפתח תוכן (Content Developer)

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

מעצב אינטראקטיב (Interactive Designer)

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

מעצב ממשק (Interface Designer)

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

מעצב ווב (Web Designer)

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

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

נסיים בסיום: יש לי אופי ניהולי, איך אני משתלב?

קריאייטיב דירקטור (Creative Director)

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

ארט דירקטור (Art Director)

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

————————————————————————————-

מקווה שהצלחתי לעשות לכם קצת סדר בראש…

שיהיה שבוע טוב וגמר חתימה טובה!

הפריצה הראשונה לעיתונות!

לאחר שפירסמתי כתבה ב"מעייני הישועה" [עלון לציבור הדתי המתפרסם כל שבוע] בנושא עיצוב גרפי, התחלתי לקבל פניות מעיתונים גדולים כמו ידיעות אחרונות, מעריב, 24 דקות וישראל היום! [לא באמת..]

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

 .

iStartSoftware- גרסת Flash

זוכרים את אתר האינטרנט שעיצבתי לiStartSoftware – החברה הישראלית שמפתחת אפליקציות לאייפון? [קצת קשה לשכוח כי זה הפוסט הקודם-קודם בבלוג].

עכשיו תוכלו לבקר באתר הזמני [בעיצוב הסופי] שלהם עם תוספות הפלאש ועוד קצת שינויים שעשיתי:

 .

http://www.planetnana.co.il/istrart/ 

כלים למעצבים של אדובי ((Adobe ה-כ-ל-י-ם!

.

לאחרונה קניתי מחשב חדש [ומהיר] ונקלעתי לבעיית שעמום קשה מכיוון שחוץ מ- Windows לא היה עליו כלום ולכן, החלטתי לחדש/לעדכן את מלאי תוכנות העיצוב שברשותי במקום להישאר מאחורי שאר המעצבים ולהשתמש ב-Photoshop CS  [פשוט ככה, בלי מספרים אחרי ה- CS].

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

בשורות הבאות אני [בעזרת חבר יקר בשם ויקי] אתן סקירה קצרה על תוכנות העיצוב [-חבילת המעצבים הניתנת לקניה במחיר הזוי של 1799$ או לחילופין זמינה להורדה בחינם באי-מיול..] של אדובי , בעיקר למי שלא מכיר בכלל או שמכיר חלק ורוצה להכיר יותר או אפילו מכיר אבל לא באמת מכיר [מעכשיו אני לא משתמש יותר במילה "מכיר"].

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

——————————————————————————————–

Photoshop

 

.

הגדרה כללית: תוכנת עריכה גרפית.

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

לשימוש ב: בנית אתרים, עיצוב לוגואים, עיבוד תמונות.

הגרסא הכי עדכנית: CS4 [גרסא 11 במס'].

למה שאני אטרח להוריד עדכון?: אדובי פוטושופ CS4 "מככבת" ביכולת צביעה על צורות תלת ממדיות, הלבשת תמונות דו ממדיות על צורה תלת ממדית, אפשרות המרת מעבר צבעים לעצם תלת ממדי, הוספת עומק לשכבות וטקסט, וייבוא קבצים תלת ממדיים נתמכים (כגון: 3ds,u3d ועוד); לוח חדש למסכות ושכבות התאמה  (Adjustment Layers) ועוד.

 

 

InDesign

 

.

הגדרה כללית: תוכנת "הוצאה לאור שולחנית".

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

לשימוש ב: עיצוב פרסומות, פוסטרים, עטיפות וכו'…

הגרסא הכי עדכנית: CS4 [הגרסא השביעית במס'].

למה שאני אטרח להוריד עדכון?: בגרסה האחרונה, CS4, ניתן לייצא את הדפים מ -InDesign לפורמט HXML  ב-Adobe Dreamweaver    עקב רכישת  Macromedia אשר הפכה את שיתוף הפעולה בין התוכנות לפשוט.

 

 

illustrator

 

.

הגדרה כללית: תוכנת גרפיקה וקטורית ["טוב אחי!"].

סקירה קצרה: גרפיקאים רבים משתמשים בתוכנה, כיוון שבעזרתה ניתן לעצב כמעט כל דבר ללא צורך בשילוב תוכנות אחרות בעבודה. התוכנה היא שיפור של Photoshop+Freehand ומשמשת לעיצוב גרפים, סמלילים, תלת-מימד ועוד. כמו כן קובצי התוכנה נתמכים גם בתוכנות תלת-ממד מתקדמות כגון   3D Studio Maxו -MAYA, של חברת אוטודסק. התוכנה משתמשת בשיטה הווקטורית והתמונות אינן מורכבות מפיקסלים. לכן ניתן ליצור אובייקט קטן ולהגדיל אותו עשרות מונים בלי לפגוע בחדות התמונה, כלומר בלי שהאובייקט ימרח והתמונה תהיה מטושטשת.

לשימוש ב: עיצוב בתלת-מימד, עיצוב גרפים, סמלילים [בדיוק כמו שכתוב!].

הגרסא הכי עדכנית: CS4 [הגירסא ה14 במס' ].

למה שאני אטרח להוריד עדכון?: אין לי מושג, לא הכרתי את הגרסאות הקודמות..

 

 

Flash

 

.

הגדרה כללית: תוכנה לפיתוח מולטימדיה.

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

לשימוש ב: אנימציות, יישומי אינטרנט, משחקים ואפליקציות ויזואליות אחרות.

הגרסא הכי עדכנית: CS4 [מפתיע הא?..]

למה שאני אטרח להוריד עדכון?: ממשק משתמש חדש, תוספות סקריפטים ב  actionstrip, אפשרויות הנפשה מתקדמות ועוד.

 

 

Dreamweaver

 

.

הגדרה כללית: תוכנת יצירה ועריכה של דפי אינטרנט [סוף סוף הגדרה מובנת].

סקירה קצרה:   Adobe Dreamweaver[אדובי דרימוויבר] היא תוכנה המשמשת ליצירה ועריכה של דפי אינטרנט ואתרי אינטרנט. בגרסאותיה הראשונות הוצעה דרימוויבר כתוכנת עריכה המשלבת את הפרודוקטיביות של עיצוב ויזואלי WYSIWYG  עם מצב שליטה ועריכה של קוד ה. HTML שילוב זה היה נדיר כאשר התוכנה יצאה לשוק בסוף שנות התשעים, דבר שסייע רבות לתפוצתה. בהמשך הוספו לה טכנולוגיות חדישות, כגון תמיכה ב CSS, ג'אווה סקריפט ותמיכה בשפות צד-שרת כגון  ASP ו PHP.

לשימוש ב: עיצוב ועריכת אתרי אינטרנט [מיותר לציין לא?].

הגרסא הכי עדכנית: CS4 [הגירסא העשירית במס'].

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

——————————————————————————————–

שיהיה לכולנו חג שבועות טעים ושמח!

4#: אתר בני-עקיבא ימתח להקשב, הקשב!

*להלן שיחה שהתקיימה השבוע ביני לבין ש' [שם בדוי]:

ש': דניאלי אחי החתיך והחמוד, אתה יכול לעזור לי במשהו?

אני: בוודאי ש'! כל מה שתצטרכי!

ש': וואו איזה כיף שיש אח כמוך! אתה יכול לעזור לי להיכנס לאתר של בני-עקיבא ולראות מתי הפעילות הקרובה ומה המחיר שלה? אני לא מוצאת שם כלום!

אני: בטח! אין בעיה..

ש': אין עליך..

[*השיחה צוטטה מילה במילה למעט שינויים "קלים" פה ושם..]

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

————————————————————-

 

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

 

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

שימושיות Usability – קיימים באתר שלושה סרגלי כלים [-תפריטים], דבר שאמור להביא נוחות אבל בפועל מביא בלבול. התפריט הימני נראה כמו מקבץ של פרסומות ולא כסרגל קישורים באתר וזה דווקא סרגל הכלים הכי מעניין.

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

 

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

 

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

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

 

דבר אחרון שממש הפריע לי, בכל לחיצה על לינק הדף כאילו עולה מחדש. למה? בכתיבה בשפת HTML יש פקודה העונה לשם FRAME [מסגרת] הנותנת אפשרות שכל האתר ישאר קבוע והדבר היחיד שישתנה בלחיצות על לינקים פנימיים זה מה שבתוך המסגרת [כי לשם הם מקושרים] – פתרון נחמד לבעיית האינטרנט האיטי [או המחשב הישן והמעצבן!!].

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

פונטים – סוג הפונט שבו השתמשו בכל האתר הוא "אריאל". אני לא חושב שמעצבי האתר ייחסו חשיבות לסוג הפונט אבל לפחות בתפריט ההיסטוריה הייתי מכניס פונט אחר סתם בשביל לא להיות מרובע. בקטעי הכתבות צבע הפונט שחור [רק שחור!] מספיק שלכותרות היו נותנים איזה גוון כחול מעבר לדגש הבסיסי והייתי שותק אבל ההרגשה שמקבלים מלראות את הכתבות ככה היא שלא רוצים שנקרא אותן  [מה שעשוי להיות נכון]. בכניסה לכתבות עצמן פי נפער לרווחה מהדמיון העצום שבין קובץ הטקסט שאחותי בת ה7 הכינה אחרי שהיא למדה WORD לבין הכתבות באתר של בני-עקיבא:

אתם בטח מבינים לבד מה המשפט הבא ובמקרה הזה תמונה אחת שווה אלף מילים…

אטרקטיביות – טוב אז קיימת איזושהי חיות מסוימת באתר בזכות "הדבר הגדול והזז הזה" [שאגב בכניסה לכתבה נחצת באכזריות ע"י גוש כחול - ראו תמונה למטה], התפריט הצדדי שנראה כמו רצף של פרסומות וכמובן איך אפשר לשכוח את "חדשות בתנועה" [שמסתכמות בחדשה וחצי שנקטעה לפני שהספקתי להשתמש בפונקצית Print Screen] ואפילו אפשר לפרגן ולהגיד שהאתר נראה נחמד אבל שוב, ללפני 5 שנים. את התפריט של ההיסטוריה היו צריכים לשלב גם בפלאש, והנפשות פה ושם במעבר עכבר יכלו להוסיף המון!

 

————————————————————-

ציון עיצוב אתר: 5 [בערך כמו מס' השנים שעברו מאז שהקימו את האתר..]

 ————————————————————-

 שבת שלום!