דרוש: מעצב עם ידע בפיתוח

‫דרוש‬:
‫בפיתוח‬ ‫ידע‬ ‫עם‬ ‫מעצב‬HTML
‫סטקלוב‬ ‫יגאל‬

‫קדמי‬ ‫צד‬ ‫פיתוח‬ ‫צוות‬ ‫ראש‬
(Front End Development)
‫בנטקראפט‬

"‫ב‬ ‫עוצרים‬ ‫אתם‬ ‫אם‬-PSD,
‫לפני‬ ‫הרבה‬ ‫עוצרים‬ ‫אתם‬
‫העיצוב‬ ‫תהליך‬ ‫אמצע‬".
Andy Rutledge

‫אינטר‬ ‫עיצוב‬‫אקטיבי‬

‫היום‬ ‫התהליך‬:

‫בתהליך‬ ‫שינוי‬ ‫צריכים‬ ‫אנחנו‬
‫יותר‬ ‫טובים‬ ‫מוצרים‬ ‫לפתח‬ ‫בכדי‬

‫הרחוק‬ ‫בעבר‬...

‫היתרונות‬ ‫מה‬?
‫מעצבים‬-‫חוויות‬ ‫ממציאים‬ ‫מפתחים‬‫חדשות‬
‫חלק‬ ‫יותר‬ ‫עבודה‬ ‫תהליך‬
‫חווה‬ ‫שהמשתמש‬ ‫הסופי‬ ‫התוצר‬ ‫על‬ ‫השפעה‬
‫ל‬ ‫סוף‬-"‫אפשר‬ ‫אי‬"‫המפתחים‬ ‫של‬

‫בפיתוח‬ ‫ידע‬ ‫בלי‬ ‫מעצב‬
‫עזר‬ ‫גלגלי‬ ‫צריך‬

‫זה‬ ‫על‬ ‫חושבים‬ ‫אם‬...
‫שהמעצבים‬ ‫מפתיע‬ ‫לא‬ ‫זה‬
‫גם‬ ‫הם‬ ‫בעולם‬ ‫המובילים‬"‫מפתחים‬"

‫קשה‬ ‫כזה‬ ‫לא‬ ‫זה‬

<HTML>•‫תכנות‬ ‫שפת‬ ‫לא‬
•‫העמוד‬ ‫תוכן‬ ‫את‬ ‫מתארת‬

HTML–‫דוגמאת‬‫חצי‬ ‫חצי‬

CSS{}
•‫תכנות‬ ‫שפת‬ ‫לא‬
•‫בעמוד‬ ‫האלמנטים‬ ‫נראות‬ ‫את‬ ‫מגדירה‬
•‫האלמנטים‬ ‫נראות‬ ‫לשינוי‬ ‫אנימציות‬ ‫להגדיר‬ ‫מאפשרת‬

CSS–‫דוגמאת‬‫חצי‬ ‫חצי‬
(‫אנימציה‬ ‫בלי‬)

CSS–‫דוגמאת‬‫חצי‬ ‫חצי‬
(‫אנימציה‬ ‫עם‬)

‫ה‬ ‫של‬ ‫היתרון‬-CSS
‫להראות‬ ‫מנסים‬ ‫אנחנו‬
‫להחליף‬ ‫שאפשר‬ ‫פה‬
‫בקלות‬ ‫העיצוב‬ ‫את‬
‫ה‬ ‫בשינוי‬-CSS‫בלבד‬
‫ב‬ ‫לגעת‬ ‫בלי‬-HTML
‫הדברים‬ ‫כל‬
‫שמרכיבים‬
‫העמוד‬ ‫את‬
‫שלנו‬
CSS
CSS

‫מ‬ ‫דוגמאות‬ ‫יופיעו‬ ‫פה‬-
/http://www.csszengarden.com
‫אשמח‬ ‫אותם‬ ‫להציג‬ ‫איך‬ ‫רעיון‬ ‫לך‬ ‫יש‬ ‫אם‬
‫לשמוע‬

‫קושיות‬
‫לשאול‬ ‫מי‬ ‫את‬ ‫היה‬ ‫ולא‬ ‫לשאול‬ ‫רציתם‬ ‫שתמיד‬ ‫שאלות‬

examples
‫זה‬ ‫מה‬CSS3?
‫אנימציות‬‫וחלקות‬ ‫טובות‬‫יותר‬
‫גרדיאנטים‬,‫מעוגלות‬ ‫פינות‬,‫וכו‬ ‫הצללות‬'

‫זה‬ ‫מה‬HTML5?
‫גרפיקה‬‫בדפדפן‬ ‫ממדית‬ ‫ותלת‬ ‫דו‬
‫בדפדפן‬ ‫ואודיו‬ ‫וידאו‬

‫מפתח‬ ‫גם‬ ‫להיות‬ ‫צריך‬ ‫מעצב‬ ‫האם‬?

‫לא‬!
‫את‬ ‫להכיר‬ ‫צריך‬ ‫כן‬ ‫הוא‬ ‫אבל‬
‫היכולות‬,‫וההגבלות‬ ‫האפשרויות‬

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

‫הנכון‬ ‫התהליך‬

‫מתחילים‬ ‫איך‬?
‫אונליין‬ ‫קורסים‬:CodeAcademy.com
‫למעצבים‬ ‫פיתוח‬ ‫של‬ ‫ממוקדים‬ ‫ספרים‬
‫אלפי‬)+(‫מדריכים‬‫באינטרנט‬

‫מתחילים‬ ‫איך‬?
‫מעצבים‬ ‫אחר‬ ‫ובבלוגים‬ ‫בטוויטר‬ ‫עוקבים‬-‫מפתחים‬
‫עצמכם‬ ‫את‬ ‫מאתגרים‬:
‫מנסים‬‫לקוד‬ ‫שלכם‬ ‫עיצובים‬ ‫להמיר‬
‫שואבים‬‫השראה‬‫מ‬-
‫בנטקראפט‬ ‫קורס‬

‫בני‬ ‫ילדים‬10‫יכולים‬,‫ואתם‬?
Codeclub.org.uk

‫הפער‬ ‫לגישור‬ ‫כלים‬
‫הפער‬ ‫לגישור‬ ‫כלים‬

‫מ‬ ‫החל‬ ‫בפוטושופ‬ ‫מובנה‬-CS6 Cloud
‫ב‬ ‫להשתפר‬ ‫צפוי‬-CS7
CSS3PS.com
‫ל‬ ‫פוטושופ‬-CSS

‫והעתיד‬ ‫ההווה‬ ‫זה‬ ‫כי‬ ‫להבין‬ ‫עליכם‬,
‫כחלק‬ ‫פיתוח‬ ‫לשלב‬ ‫עליהם‬ ‫ולכן‬
‫היום‬ ‫העבודה‬ ‫מתהליך‬-‫יומית‬.

‫תודה‬.
‫יגאל‬‫סטקלוב‬
IGAL@STEKLOV.NET

דרוש: מעצב עם ידע בפיתוח

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (12)

Similar to דרוש: מעצב עם ידע בפיתוח

Similar to דרוש: מעצב עם ידע בפיתוח (20)

דרוש: מעצב עם ידע בפיתוח