More Related Content Similar to 107 HTML & CSS
Similar to 107 HTML & CSS (20) More from Eran Lahav (17) 107 HTML & CSS2. ורשת קוד
האינטרנט מהפכת של היסוד אבני הבנת
בפיתוח ומגבלות צורך
יסוד מושגי הגדרת
מידע וחלוקת פעולות סדר ,חשיבה תהליכי הבנת
..הולכים אנחנו ולאן עשינו מה ,היינו איפה *
מטרות
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
15. ורשת קוד
טבלאות
להכיל המסוגל אחיד בקונטיינר צורך נוצר
,פלאש ,תמונה ,טקסט כמו שונים מרכיבים
תלוי בלתי באופן אותו לעצב יהיה וניתן
חסרונות
.ארוך טעינה וזמן כללי עיצוב ,ומבולגן ,מסורבל ,ארוך קוד
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
הקופסא עקרון
22. מפרינט
לאינטראקטיב ורשת קוד
להבין בכדי ,תגיות קריאת תוך אינטרנט עמודי סריקת
תוצאות לספק במטרה אותו ולקטלג האתר נושא את
.מדויקות
באלגוריתמים משתמשת מידע אחזור מערכת
קיימת אינפורמציה ושליפת לחיפוש
חיפוש מנועי
Meta tags
23. מפרינט
לאינטראקטיב ורשת קוד
1997מתוך www.google.com הדומיין רישום
להפוך ,העולמי המידע כלל את לארגן מטרה
.העולם לכל ויעיל לנגיש אותו
2000ראשונות שפות 10
2004Gmail אלקטרוני דואר שירות
2005Google Maps
2006youtube את קונים
2007אנדרואיד - סלולר למכשירי פיתוח פלטפורמת
2008Google Chrome דפדפן
24. מפרינט
לאינטראקטיב ורשת קוד
יתרונות
,עיצוב תוכנות בעזרת אובייקטים עיצוב ,להבנה וקלה גמישה עבודה
ActionScript בעזרת שליטה .במרחב אינטואיטיבי עיצוב
פלאש
חסרונות
החיפוש מנועי ע"י לסריקה ניתן לא התוכן
וירוסים ,בדפדפן באגים - פלאש נגן ,לדפדפן תוסף מצריך
וארוך מסורבל קוד מכיל ,כבד
רבות עבודה שעות מצריך תיקון
26. מפרינט
לאינטראקטיב ורשת קוד
וידאו נגן כמו ,שלישי בגוף שימוש מחייבים שונים שימושים
גרדיאנט כמו ,לדפדפנים ופרטני שונה קוד כתיבת
Html תגית – <div> בדף האלמנטים לכל אחידה
ביניים מצב
27. מפרינט
לאינטראקטיב ורשת קוד
כמכתיבת גוגל התעצמות
ותהליכים פיתוח צורכי
:האייפון הכרזת
לא המכשיר כי מודיע ג'ובס סטיב
פלאש בהצגת יתמוך
אחיד תחבירי סטנדרט יצירת
.הדפדפנים כל בין של הסריקה מנגנון במיקוד צורך
חשוב למידע החיפוש מנועי
האתר מהות להבנת ורלוונטי
מולטימדיה תכני של הטמעה
שלישי גורם ללא
Mobile
והצגת מהירה טעינה המצריכה מהירה גלישה
מרובות מסך לרזולוציות ובהתאם מיידי מידע
קוד מבוססת חלקה אנימציה
?
29. מפרינט
לאינטראקטיב ורשת קוד
המאפשר מתקדם קוד בשילוב אובייקטים לתיאור עיצוב פקודות
.נראה שטרם הדפדפן במרחב חופש
,העמדה ,תגובות ,תכונות על ,אובייקטים על שליטה מאפשר העיצוב
.מורכבים מעברים ליצירת חיצוני קוד וייבוא רספונסיביים מאפיינים
CSS3
?קוד מבוססת אנימציה של אופטימאלית ובנייה
32. מפרינט
לאינטראקטיב ורשת קוד
ידינמ
.שונים לפרמטרים בהתאם ומשתנה דינמי האתר תוכן
ונוצרים נתונים או טקסט מקבצי נשלפים התכנים
.למשתמש ובהתאם גלישה תו"כ קוד באמצעות
סטטי
מציג .שינוי בהם שאין אינטרנט מעמודי המורכב אתר
.קבועה אינפורמציה
רחוקות לעיתים מתעדכן בודדים עמודים 'מס ”קלאסי "אתר
חברתיות רשתות ,תוכן ,חיפוש ,חדשות אתרי
תוכן ניהול מערכת
אתרים סוגי
33. מפרינט
לאינטראקטיב ורשת קוד
תוכנו על לשלוט שניתן אתר ליצירת ניהול ומערכות אתרים מחוללי
,תכנים לעדכן הלקוח לצד המאפשרת ,ידידותית מערכת בעזרת אותו ולעדכן
.טכני בידע צורך ללא לרשת ולהעלות לשנות ,למחוק
CMS
Content management Systems
תוכן ניהול מערכות
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
40. מפרינט
לאינטראקטיב ורשת קוד
,יצירתיים ,טובים אתרים לייצר בכדי ביותר הגבוה לסטנדרט התאמה
.החיפוש ומנועי המובילים לדפדפנים ומותאם מתקדם ,נקי קוד בעלי
WordPress, Html5, CSS3, jQuery, JS, responsive
סיכום
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/ משחקים מגרש
דוגמאות