ב היום קורה clientמה

הדרכת ראשי צוותי

אג'נדה

דפדפנים מודרנים-- java script- mobile- Responsive Web Design

הדרכת ראשי צוותי

HTML5\Css3

כל הדפדפנים המודרניים ממשים באופן מלא את הסטנדרט החדש..cut the rope מצליח להפתיע אותנו – IEאפילו

לדפדפןangry birdsלפני שנה כרום הביא את

הדרכת ראשי צוותי

JavaScript

חזקים, כמו JavaScriptכל הדפדפנים המודרנים מכילים מנועי . frameworks (jQuery, jQuery ui, jQuery template)כן ישנם

אשר WEBכמו כן התפתחה קהילה שלמה הבונה אפליקציות OOP ב JavaScriptכותבת

הדרכת ראשי צוותי

Mobile

,iOs מערכות הפעלה אשר רצוי לקחת בחשבון: 3כיום ישנן android ו windows7.

לכתוב אפליקציה לכל אחת ואחת מהן כידוע זאת עבודה קשה html5 Css3ולכן גם כאן נוצרו סביבות היברדיות המריצות

JavaScript :ונותנות למתכנת פיתרון לרוב הבעיות. לדוגמא phoneGap

הדרכת ראשי צוותי

Responsive Web Design

שלו בהתאם layoutהיכולת ליצור אתר אחד אשר משנה את ה לרזוליציית הדפדפן של הלקוח.

הדרכת ראשי צוותי

Responsive Web Design

: כיוון שניתן בעזרתם ליצור css3 ו html5אמצעי למימוש הוא .Css3 Media Queriesתגים חכמים תלוי רזולוציה ודפדפנים -

הדרכת ראשי צוותי

Css3 Media Queries

@media screen and (max-width: 600px ){ .Class } background: #ccc; {{

במקרה הזה צבע הרקע במחלקה זאת יתפוס רק שרזוליציית פיקסל.600המסך קטנה מ

הדרכת ראשי צוותי

Css3 Media Queries

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; }}

הדרכת ראשי צוותי

Css3 Media Queries

@media screen and (max-device-width: 480px) { .class { background: #000; }}

הדרכת ראשי צוותי

Responsive Web Design

.24/ 16/ 12בכדי לסיים את העימוד השיטה מושטת על טורים: כל טור בכל רזולוצייה ניתן לו רוחב אחר בדר"כ באחוזים. שיטת

היא כרגע הכי מקובלת.12ה דוגמאות גריד:

http://colly.com/ http://www.anderssonwise.com/

http://stephencaver.com/http://seesparkbox.com/

הדרכת ראשי צוותי

Responsive Web Design - IE

CSS3 בגירסאות הקודמות שלו אינו תומך ב IEכיוון שדפדפן ישנם max-width, min-width אינו תומך ב IE7ואפילו

הגריד IE6-IE8פיתרונות שונים בנושא, הכי פשוט שדפדפניםיהיה מקובע.

הדרכת ראשי צוותי

Responsive Web Design מדיות -

תמונות וסרטים אוטומטית יותאמו לרוחב הטורים שבהם הם נמצאים.

כמו כן ניתן ליצור קונטיינר אשר ישלוט טוב יותר בגובה והרוחב .div או figure ,article,(html5)של התמונה – תג

הדרכת ראשי צוותי

Frameworks

+ נותנים IEפותרים בצורה הטובה וקלה את בעיות הדפדני גריד קבוע וחזק שניתן לבנות עליו אתר שלם בקלות.

• CssGrid•Lessframework •Foundation • Mqframework

הדרכת ראשי צוותי

Responsive Web Design סדר -

).push and pullמה עולה לפני מה ומה נופל ראשון (

ברזולוציות שונות בצורה הפשוטה הצד הימני יפול מתחת לשמאלי אבל גם זה ניתן לשליטה

תודה