Lesson #7 The History of the Web + HTML & CSS

1. ‫ורשת‬ ‫קוד‬
‫לאינטראקטיב‬ ‫מפרינט‬
The
History
of the Web

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

3. ‫ורשת‬ ‫קוד‬
‫תיחום‬
1980‫אסוציאטיבי‬ ‫וקישור‬ ‫מידע‬ ‫לאחסון‬ ‫פיתוח‬ ‫פרויקט‬
‫האינטרנט‬ ‫לפיתוח‬ ‫הרעיוני‬ ‫הבסיס‬ -
1990 ‫ברנרס-לי‬ ‫טים‬
‫פיזיקאים‬ ‫בין‬ ‫לחבר‬ ‫מטרה‬ ‫מתוך‬ CERN -‫ב‬ ‫פיתוח‬
‫גלובאלית‬ ‫קישורים‬ ‫מערכת‬ ‫ליצור‬ ,‫העולם‬ ‫מרחבי‬
‫וכך‬ ‫מסמכים‬ ‫לקשר‬ ,‫מידע‬ ‫להעביר‬ ‫יהיה‬ ‫ניתן‬ ‫בה‬
.WEB – ‫קורים‬ ‫רשת‬ ‫ליצור‬

4. ‫ורשת‬ ‫קוד‬
‫מבנה‬
‫לאינטרנט‬ ‫ישירות‬ ‫מחוברים‬ ‫מחשבי-על‬
Servers ‫שרתים‬
IP ‫יש‬ ‫לאינטרנט‬ ‫המתחבר‬ ‫מכשיר‬ ‫לכל‬
‫השני‬ ‫את‬ ‫אחד‬ ‫למצוא‬ ‫למחשבים‬ ‫עוזר‬ ,.‫ת.ד‬ ‫כמו‬
67.205.46.248
www.google.com
‫ספק‬

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

6. ‫ורשת‬ ‫קוד‬
‫מחשב‬ ‫על‬ ‫רצה‬ ,‫הלקוח‬ ‫בצד‬ ‫תוכנה‬
.‫אינטרנט‬ ‫דפי‬ ‫ומציגה‬ ‫המשתמש‬
URL ‫אינטרנט‬ ‫כתובת‬ ‫קבלת‬ :‫בסיס‬ ‫יכולת‬
‫ת‬‫הכתוב‬ ‫תוכן‬ ‫והצגת‬ ‫מהמשתמש‬
.‫במסך‬ ‫דבר‬ ‫של‬ ‫ובסופו‬ ‫מהשרת‬
‫דפדפן‬

7. ‫ורשת‬ ‫קוד‬
1993CERN ‫את‬ ‫מעלה‬ ,‫הגרעין‬ ‫לחקר‬ ‫האירופי‬ ‫המרכז‬
‫והפצה‬ ‫חופשי‬ ‫לשימוש‬ ‫וקורא‬ ‫הראשון‬ ‫האתר‬
.‫באינטרנט‬
,‫מקום‬ ‫בכל‬ ,‫פרט‬ ‫לכל‬ ‫לאפשר‬ ‫בסיסי‬ ‫עיקרון‬ ‫מתוך‬
.‫מגבלות‬ ‫ללא‬ ,‫אחר‬ ‫פרט‬ ‫כל‬ ‫עם‬ ‫מידע‬ ‫לשתף‬
World Wide Web - ‫עולמי‬ ‫הכלל‬ ‫המארג‬
‫הראשון‬ ‫האתר‬

8. ‫ורשת‬ ‫קוד‬
1993‫שרתים‬ 500 – ‫השנה‬ ‫סוף‬ ‫עד‬
‫באינטרנט‬ ‫מהטרפיק‬ 1%
1995‫אתרים‬ 100,000
1997‫אתרים‬ 1,000,000
2013‫אתרים‬ 634,000,000
‫ההתרחבות‬

9. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
H T M L-HyperTextMarkupLanguage
‫מתגיות‬ ‫המורכבת‬ ‫שפה‬ - ‫האינטרנט‬ ‫מול‬ ‫מחשב‬ ‫תקשורת‬
‫הדף‬ ‫תוכן‬ ‫את‬ ‫מתארות‬ ,‫דפדפנים‬ ‫מול‬ ‫תקשורת‬ ‫דרך‬ ‫הן‬ ‫תגיות‬
.‫הצגתו‬ ‫ואופן‬
.‫מתגיות‬ ‫מורכב‬ ‫להיות‬ ‫חייב‬ ‫אינטרנטי‬ ‫עמוד‬
.‫המידע‬ ‫את‬ ‫ומפרידות‬ ‫העמוד‬ ‫את‬ ‫מחלקות‬ ‫התגיות‬
- ‫סיפור‬ ‫כמספר‬ ‫הקוד‬ ‫על‬ ‫לחשוב‬ ‫אפשר‬
.‫במסך‬ ‫האלמנטים‬ ‫הופעת‬ ‫כסדר‬ ‫בקוד‬ ‫הפקודות‬ ‫הופעת‬ ‫סדר‬
‫התגיות‬ ‫שפת‬

10. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
.‫פעמיים‬ ‫מופיעה‬ ‫תגית‬ ‫כל‬
‫התגית‬ ‫פתיחת‬ - ‫הקריאה‬ ‫תחילת‬ ‫את‬ ‫מציינת‬ ‫אחת‬
.‫התגית‬ ‫סגירת‬ - ‫הקריאה‬ ‫הפסקת‬ ‫את‬ ‫מסמלת‬ ‫שנייה‬
/ ‫בתוספת‬ ‫מסומנת‬ ‫סגירה‬
..‫פלאש‬ ,‫גרפיקה‬ ,‫תמונה‬ ,‫טקסט‬ .‫המידע‬ ‫מוזן‬ – ‫השתיים‬ ‫בין‬
‫התגיות‬ ‫שפת‬
<p>
if you can't explain it simply, you don't understand it well
enough.
</p>
H T M L-HyperTextMarkupLanguage

11. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
‫התגיות‬ ‫שפת‬
<h2> <p> <li> <table> <h1>
<iframe> <a href> <form>
<img> <ul>
H T M L-HyperTextMarkupLanguage

12. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
‫התגיות‬ ‫שפת‬

13. ‫ורשת‬ ‫קוד‬
‫צורך‬
.........‫הממממ‬
?‫עיצוב‬ ,‫מידע‬ ‫סידור‬ ,‫עימוד‬

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

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

16. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
<div>
‫ת‬‫יתרונו‬
‫התגית‬ ‫לתוך‬ ‫נכנס‬ ‫רצוי‬ ‫מידע‬ ‫כל‬
CSS - ‫עיצוב‬ ‫פקודות‬ ‫בעזרת‬ ‫ונשלט‬
‫טבלאות‬

17. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
CSS
CASCADING STYLING SHEETS
.‫אובייקטים‬ ‫להגדרת‬ ‫ושליטה‬ ‫אפיון‬ ,‫עיצוב‬ ‫פקודות‬
.‫שונים‬ ‫למאפיינים‬ ‫תחבירי‬ ‫תיאור‬
#box {
background color: #933;
height: 300px;
width: 400px;
border: 3px solid #000;
}
‫מופרדים‬ ‫עיצוב‬ ‫סגנונות‬

18. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
#box {
background-color: #933;
height: 60%;
width: 400px;
font-size: 16px;
line-height: 30px;
color: #FFF;
margin-top: 10%;
margin-bottom: 10%;
padding-top: 10%;
padding-bottom: 10%;
position: absolute;
}
Ionullamcorpersus cipitlobortisnislutaliquip
exeacomm odo consequatDuisau temv eleu
miriuredolo rinhendreritinvulputat
evelitessemol estieco n sequatvelillu
mdoloreeu feugia tnullafac ilis isat
veroeroseta ccumsane tiust oodiod ignissi m
quibl anditpraese ntluptatum zzrildelenitau
gueduis doloretefeu gaitnull afacilisiNa
mlibe rte mpor cumsolutanobiseleifendo
ptionco lorsita metconsetetursadipsc
ingelitrsed diamno numyeirm odtemp;
‫מופרדים‬ ‫עיצוב‬ ‫סגנונות‬

19. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
<body>
<div id="big">
<div class="small"></div>
<div class="small"></div>
</div>
</body>
#big {
background-color: #F99;
height: 400px;
width: 600px;
}
.small {
background-color: #996;
margin: 10px;
float: left;
height: 380px;
width: 280px;
}
‫מופרדים‬ ‫עיצוב‬ ‫סגנונות‬

20. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
‫יתרונות‬
‫עיצוב‬ ,‫אובייקטים‬ ‫לאפיון‬ ‫מקסימאלית‬ ‫שליטה‬
‫בעמוד‬ ‫העיצוב‬ ‫פקודות‬ ‫כל‬ ‫ריכוז‬ ,‫גלובאלי‬
.‫לעריכה‬ ‫וקל‬ ‫מופרד‬ ,‫נקי‬ ‫קוד‬ ‫לקבלת‬ ‫אחד‬
Design.css
Index.html
About.html
Gallery.html
Contact.html
‫הקופסא‬ ‫עקרון‬

21. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
‫מקבילים‬ ‫תהליכים‬ ,‫ובינתיים‬
...‫הסייבר‬ ‫בחלל‬

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

23. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
1997‫מתוך‬ www.google.com ‫הדומיין‬ ‫רישום‬
‫להפוך‬ ,‫העולמי‬ ‫המידע‬ ‫כלל‬ ‫את‬ ‫לארגן‬ ‫מטרה‬
.‫העולם‬ ‫לכל‬ ‫ויעיל‬ ‫לנגיש‬ ‫אותו‬
2000‫ראשונות‬ ‫שפות‬ 10
2004Gmail ‫אלקטרוני‬ ‫דואר‬ ‫שירות‬
2005Google Maps
2006youtube ‫את‬ ‫קונים‬
2007‫אנדרואיד‬ - ‫סלולר‬ ‫למכשירי‬ ‫פיתוח‬ ‫פלטפורמת‬
2008Google Chrome ‫דפדפן‬

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

25. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
‫קוד‬ ‫מבוססי‬ ‫חלקים‬ ‫ומעברים‬ ‫אנימציה‬ ‫יצירת‬
<script>
JaveScript
$ jQuery
Web-kit
Ajax
</script>
‫צורך‬

26. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
‫וידאו‬ ‫נגן‬ ‫כמו‬ ,‫שלישי‬ ‫בגוף‬ ‫שימוש‬ ‫מחייבים‬ ‫שונים‬ ‫שימושים‬
‫גרדיאנט‬ ‫כמו‬ ,‫לדפדפנים‬ ‫ופרטני‬ ‫שונה‬ ‫קוד‬ ‫כתיבת‬
Html ‫תגית‬ – <div> ‫בדף‬ ‫האלמנטים‬ ‫לכל‬ ‫אחידה‬
‫ביניים‬ ‫מצב‬

27. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
‫כמכתיבת‬ ‫גוגל‬ ‫התעצמות‬
‫ותהליכים‬ ‫פיתוח‬ ‫צורכי‬
:‫האייפון‬ ‫הכרזת‬
‫לא‬ ‫המכשיר‬ ‫כי‬ ‫מודיע‬ ‫ג'ובס‬ ‫סטיב‬
‫פלאש‬ ‫בהצגת‬ ‫יתמוך‬
‫אחיד‬ ‫תחבירי‬ ‫סטנדרט‬ ‫יצירת‬
.‫הדפדפנים‬ ‫כל‬ ‫בין‬ ‫של‬ ‫הסריקה‬ ‫מנגנון‬ ‫במיקוד‬ ‫צורך‬
‫חשוב‬ ‫למידע‬ ‫החיפוש‬ ‫מנועי‬
‫האתר‬ ‫מהות‬ ‫להבנת‬ ‫ורלוונטי‬
‫מולטימדיה‬ ‫תכני‬ ‫של‬ ‫הטמעה‬
‫שלישי‬ ‫גורם‬ ‫ללא‬
Mobile
‫והצגת‬ ‫מהירה‬ ‫טעינה‬ ‫המצריכה‬ ‫מהירה‬ ‫גלישה‬
‫מרובות‬ ‫מסך‬ ‫לרזולוציות‬ ‫ובהתאם‬ ‫מיידי‬ ‫מידע‬
‫קוד‬ ‫מבוססת‬ ‫חלקה‬ ‫אנימציה‬
?

28. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
Html5
‫ואחידות‬ ‫ייעודיות‬ ,‫ממוקדות‬ ,‫חדשות‬ ‫תגיות‬ ‫הוספת‬
.‫בדף‬ ‫היררכיה‬ ‫ויצירת‬ ‫מידע‬ ‫תיאור‬ ,‫להבדלה‬
<audio>
<video>
<time>
< artical >
<nav>
<address>
<canvas>
<header>
<footer>
<aside>

29. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
‫המאפשר‬ ‫מתקדם‬ ‫קוד‬ ‫בשילוב‬ ‫אובייקטים‬ ‫לתיאור‬ ‫עיצוב‬ ‫פקודות‬
.‫נראה‬ ‫שטרם‬ ‫הדפדפן‬ ‫במרחב‬ ‫חופש‬
,‫העמדה‬ ,‫תגובות‬ ,‫תכונות‬ ‫על‬ ,‫אובייקטים‬ ‫על‬ ‫שליטה‬ ‫מאפשר‬ ‫העיצוב‬
.‫מורכבים‬ ‫מעברים‬ ‫ליצירת‬ ‫חיצוני‬ ‫קוד‬ ‫וייבוא‬ ‫רספונסיביים‬ ‫מאפיינים‬
CSS3
?‫קוד‬ ‫מבוססת‬ ‫אנימציה‬ ‫של‬ ‫אופטימאלית‬ ‫ובנייה‬

30. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
Box
shadow
Gradients
Transforms
Transitions
animation
CSS3

31. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬

32. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
‫י‬‫דינמ‬
.‫שונים‬ ‫לפרמטרים‬ ‫בהתאם‬ ‫ומשתנה‬ ‫דינמי‬ ‫האתר‬ ‫תוכן‬
‫ונוצרים‬ ‫נתונים‬ ‫או‬ ‫טקסט‬ ‫מקבצי‬ ‫נשלפים‬ ‫התכנים‬
.‫למשתמש‬ ‫ובהתאם‬ ‫גלישה‬ ‫תו"כ‬ ‫קוד‬ ‫באמצעות‬
‫סטטי‬
‫מציג‬ .‫שינוי‬ ‫בהם‬ ‫שאין‬ ‫אינטרנט‬ ‫מעמודי‬ ‫המורכב‬ ‫אתר‬
.‫קבועה‬ ‫אינפורמציה‬
‫רחוקות‬ ‫לעיתים‬ ‫מתעדכן‬ ‫בודדים‬ ‫עמודים‬ '‫מס‬ ”‫קלאסי‬ ‫"אתר‬
‫חברתיות‬ ‫רשתות‬ ,‫תוכן‬ ,‫חיפוש‬ ,‫חדשות‬ ‫אתרי‬
‫תוכן‬ ‫ניהול‬ ‫מערכת‬
‫אתרים‬ ‫סוגי‬

33. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
‫תוכנו‬ ‫על‬ ‫לשלוט‬ ‫שניתן‬ ‫אתר‬ ‫ליצירת‬ ‫ניהול‬ ‫ומערכות‬ ‫אתרים‬ ‫מחוללי‬
,‫תכנים‬ ‫לעדכן‬ ‫הלקוח‬ ‫לצד‬ ‫המאפשרת‬ ,‫ידידותית‬ ‫מערכת‬ ‫בעזרת‬ ‫אותו‬ ‫ולעדכן‬
.‫טכני‬ ‫בידע‬ ‫צורך‬ ‫ללא‬ ‫לרשת‬ ‫ולהעלות‬ ‫לשנות‬ ,‫למחוק‬
CMS
Content management Systems
‫תוכן‬ ‫ניהול‬ ‫מערכות‬

34. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
‫הדפדפן‬ ‫של‬ ‫הכלים‬ ‫ארגז‬

35. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
.‫תצוגה‬ ‫מסך‬ ‫לכל‬ ,‫מדויקות‬ ‫להגדרות‬ ‫בהתאם‬ ,‫עצמו‬ ‫המתאים‬ ‫דינמי‬ ‫אתר‬
‫לכל‬ ‫מלאה‬ ‫בהתאמה‬ ‫האתר‬ ‫תכני‬ ‫של‬ ‫מקסימאלית‬ ‫חשיפה‬ ‫מאפשר‬ ‫וכך‬
.‫מכשיר‬ ‫בכל‬ ,‫רזולוציה‬
?‫בעצם‬ ‫זה‬ ‫מה‬
:‫מסך‬ ‫מצבי‬ ‫לשלושה‬ ‫שונות‬ ‫רוחב‬ ‫מידות‬
‫וטלפון‬ ‫טבלט‬ ,‫מחשב‬
‫אחוזים‬ ‫או‬ ‫בפיקסלים‬ ‫הדף‬ ‫רוחב‬ ‫את‬ ‫להגדיר‬ ‫ניתן‬
@media only screen and
(min-width:641px ) and
(max-width:1024px){
}
‫רספונסיב‬

36. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
Scalable Vector Graphic
‫המתנהג‬ ‫וקטורי‬ ‫אובייקט‬ ‫לתיאור‬ ‫מאפיינים‬ ‫אוסף‬
‫קוד‬ ‫בעזרת‬ ‫מאפייניו‬ ‫על‬ ‫לשלוט‬ ‫וניתן‬ ‫כפונט‬
‫ואנימציה‬ ‫לעיצוב‬
svg-‫ו‬ ‫כפונט‬ ‫אייקונים‬
http://icomoon.io/app/#/select
ani svg
http://tympanus.net/Development/AnimatedSVGIcons/

37. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
SEO Search Engine Optimization
,‫החיפוש‬ ‫מנועים‬ ‫של‬ ‫הסריקה‬ ‫לתוכנות‬ ‫ממוקדים‬ ‫אתרים‬ ‫בניית‬
‫תוך‬ ,‫זה‬ ‫ובאופן‬ ‫משדר‬ ‫או‬ ‫מוכר‬ ,‫מייצג‬ ‫הוא‬ ‫מה‬ ,‫האתר‬ ‫במהות‬ ‫להתמקד‬ ‫כוונה‬ ‫מתוך‬
.‫האתר‬ ‫לסיווג‬ ‫החיפוש‬ ‫מנועי‬ ‫להכוונת‬ ‫תגיות‬ ‫מתווספות‬ ,‫המשתמש‬ ‫בהרגלי‬ ‫התחשבות‬
,‫האתר‬ ‫ותק‬ ‫כמו‬ ‫חיפוש‬ ‫במנועי‬ ‫אתר‬ ‫לקידום‬ ‫תורמים‬ ‫פרמטרים‬ ‫מכלול‬
..‫ועוד‬ ‫נוספים‬ ‫אתרים‬ ‫בין‬ ‫קישורים‬ ,‫התרחבות‬ ,‫עדכון‬ ‫תדירות‬
‫הדפדפן‬ ‫מול‬ ‫לתקשורת‬ ‫תגיות‬ ‫הוספת‬
<meta name="keywords" content="" />
‫חיפוש‬ ‫לצירופי‬ ‫בהתאם‬ ‫מפתח‬ ‫מילות‬
‫חיפוש‬ ‫למנועי‬ ‫אופטימיזציה‬

38. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
‫יום‬ ‫סדר‬ ‫מכתיבה‬ ,‫מלמעלה‬ ‫כולם‬ ‫על‬ ‫משקיפה‬ ,‫התורן‬ ‫בראש‬ ‫מבוססת‬ ‫החברה‬
.‫בבלגאן‬ ‫סדר‬ ‫להשליט‬ ‫ובאה‬ ‫האחראי‬ ‫המבוגר‬ ‫תפקיד‬ ‫את‬ ‫עצמה‬ ‫על‬ ‫ולוקחת‬
?‫קיים‬ ‫זה‬ ,‫מוצאים‬ ‫לא‬ ‫אם‬ - ‫הסייבר‬ ‫מעולם‬ ‫ביטויים‬ ‫מוחקת‬
‫החיפוש‬ ‫ממנוע‬ ‫פדופילים‬ ‫ביטויים‬ 100,000 ‫לאחרונה‬ ‫מחקה‬
2013‫שפות‬ +150
54.1% ‫כרום‬ ‫גוגל‬
425,000,000
Gmail
#2 facebook#1 Google
#3 youtube

39. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
‫נמצא‬ ‫עדיין‬ ,‫פלאש‬ ‫עם‬ ‫מעטה‬ ‫עבודה‬
..‫החוצה‬ ‫בדרך‬ ,‫גם‬ .‫פרסומי‬ ‫כבאנר‬ ‫בשימוש‬
‫מעבר‬ ‫טכנולוגיית‬
Animated Gif-‫ה‬ ‫של‬ ‫שובו‬
‫הפלאש‬ ‫עתיד‬

40. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
,‫יצירתיים‬ ,‫טובים‬ ‫אתרים‬ ‫לייצר‬ ‫בכדי‬ ‫ביותר‬ ‫הגבוה‬ ‫לסטנדרט‬ ‫התאמה‬
.‫החיפוש‬ ‫ומנועי‬ ‫המובילים‬ ‫לדפדפנים‬ ‫ומותאם‬ ‫מתקדם‬ ,‫נקי‬ ‫קוד‬ ‫בעלי‬
WordPress, Html5, CSS3, jQuery, JS, responsive
‫סיכום‬

41. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬

42. ‫מפרינט‬
‫לאינטראקטיב‬ ‫ורשת‬ ‫קוד‬
very cool css ani onepager http://www.abramsbooks.com/wesandersoncollection/
http://codepen.io/lbebber/full/BzoHi ‫לטקסט‬ ‫הצללה‬ ‫אפקט‬
google analitics svg http://www.fontwalk.de/
js jQuary http://typecode.com/
canvas js http://app.thefacesoffacebook.com/ facebook faces
canvas js silk http://weavesilk.com/
canvas svg http://wagerfield.github.io/flat-surface-shader/
http://blacknegative.com/#!/sanofi/ ‫צידי‬ ‫ניווט‬
http://www.mcdonalds.co.uk/ukhome/promotions/favourites.html# js jQuary ‫מקדונלדס‬
http://tympanus.net/codrops/category/playground/ ‫משחקים‬ ‫מגרש‬
‫דוגמאות‬