תפריט נגישות
דלג לתוכן
אתה נמצא כאן:

CSS וגרפיקה

  • 24 באוגוסט 2010

W3C מפתח מגוון טכנולוגיות המאפשרות לעצב דפי אינטרנט וליצור גרפיקה - ובינהן Canvas, SVG ,CSS.

CSS

CSS‏ (Cascading Style Sheets) היא שפה לעיצוב תוכן של דפי אינטרנט אשר נכתבים ב-HTML ו-XML. ה-CSS שולט במראה של רכיבים - כגון צבעים, פריסה, וסוגי וגופנים. בעזרת CSS ניתן להתאים טוב יותר את התצוגה למכשירים שונים - כגון מסך מחשב שולחני, מכשיר סלולרי קטן או מדפסת. ההפרדה בין המראה (הנשלט על ידי CSS) לבין מבנה הדפים (הנבנים ב-HTML או XML) מאפשרת לשנות את מראה הדפים בקלות, מקלה על תחזוקת האתר ובנייתו, מסייעת בהנגשת האתר ועוד.

לרשימת כל התקנים בתחום CSS [באנגלית]

SVG

SVG‏ (Scalable Vector Graphics) היא שפת תיוג המשמשת ליצירת גרפיקה וקטורית. היא כוללת רכיבים כגון צורות גיאומטריות, טקסט, אנימציה, קול, ווידאו, והיא בעלת DOM וניתנת לשליטה בעזרת סקריפט. בניגוד לתמונות מבוססות פיקסלים, גרפיקת SVG ניתנת להגדלה והקטנה ללא ירידה באיכות התמונה. SVG מתאימה לשימושים רבים - החל מהוספת גרפיקה פשוטה לדפי HTML ועד לויזואליזציה של נתונים, טבלאות אינטראקטיביות, משחקים ותמונות באיכות גבוהה.

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

לרשימת כל התקנים בתחום SVG [באנגלית]

Canvas

Canvas API הוא טכנולוגית סקריפט בצד הלקוח המאפשרת ליצור גרפיקה המבוססת על תמונת מפת סיביות. ה-Canvas ניכן בביצועים מהירים מאחר ואין לו DOM.

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

טכנולוגיות גרפיקה נוספות

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

WebCGM - פורמט להעברת מדיה גרפית ווקטורית ברשת. לרוב השימוש בו נעשה ביצירת איורים טכניים (Technical illustration), תיעוד אלקטרוני, ויזואליזציה של מידע גיאופיזי וכדומה. קראו עוד על  WebCGM באתר W3C העלומי [באנגלית].

מקורות לימוד CSS, Canvas וגרפיקה

מקורות חיצוניים

(המקורות אינם  קשורים ל-W3C והם מובאים כהמלצה בלבד)

חדשות CSS וגרפיקה

שימוש ב-SVG עבור SPRITES

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

ב-24/5/2012 קיימנו מפגש פורום המפתחים של ה-W3C בישראל. הקלטות ומצגות ההרצאות מפורסמות בהמשך הידיעה. המפגש עסק בכלים ושיטות לפיתוח UI מתקדם באפליקציות ווביות, בפיתוח אפליקציות תוך שימוש ב-Object-oriented programming (OOP)‎‏‏‏‏, ובעבודה עם CSS בעזרת SASS ו-COMPASS.

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