8 בדצמ׳ 2012

כנס HTML5FEST - 2012 - מצגות ווידאו מהכנס

HTML5FEST 2012 כנס
גם אני הייתי בכנס של HTML5FEST.

הנה ריכוז של וידאו של הרצאות רלוונטיות בכנס לבלוג שלי(CSS3 ו HTML5 סמנטיקה), וגם הרצאה אחת על שימוש ב API של VIDEO ו AUDIO ב HTML5.






10 בנוב׳ 2012

Image String in CSS

Image String CSS
כחלק מסדרת המדריכים שלי על עבודה עם תמונות בCSS (עבודה עם Image Spritesו SVG - שימוש בתמונות וקטוריות), ברצוני להכיר לכם פיצר CSS ישן ופחות מוכר, שהוא השמת תמונות כ String. זאת אומרת שניתן לקודד תמונות רגילות לstringים, ולשים אותם כ String בתוך ה CSS, ובכך למנוע קריאה לתמונות ב CSS. עד כמה שזה ישמע לחלקכם מוזר, הפיצר הזה נתמך החל מאקספלורר 6 (אני אישית בדקתי במחשב מאקספלורר 7), כלומר ישים לעבודה שוטפת בכל הדפדפנים.

אז בואו נתחיל!


9 בנוב׳ 2012

Code Demo : 3D CSS3 Animation

בתקופה האחרונה אני נתקל יותר ויותר ב אנימציות תלת ממד ב CSS3 ברחבי האינטרנט.

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

אז תהנו..




26 באוק׳ 2012

SVG - שימוש בתמונות וקטוריות (vector images) במקום תמונות רגילות

 SVG - Vector Images - CSS3
עם כניסת  ה HTML5 ו CSS3, נוספה האופציה לעבודה עם תמונות וקטוריות. התקן המקובל לשימוש בתמונות וקטוריות בדפדפנים הוא מסוג SVG (פרוש "Scalable Vector Graphics").

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

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

Code demo - Sweet DJ's CSS3 animation

CSS3 Animation Demo
אנימציה חמודה, ששווה הצצה, שמראה יכולות באנימציה ב CSS3.


הדוגמא המלאה של אנימציית DJ's ב CSS3







אקספלורר 10 המבחן

גרסת אקספלורר 10 יוצאת לדרך, מפתחי client כמוני, לא ממש מאמינים למיקסופט ביכולתה לייצר משהוא טכנולוגי עדכני.

בכל מקרה כתבה של YNET על הדפדפן החדש, אני אישית עוד לא בדקתי אותו כמו שצריך.

האקספלורר החדש במבחן- כתבה ב YNET

16 באוק׳ 2012

חדשות: המספרים האמיתיים מאחורי תעשיית האינטרנט והסלולר 2012


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









15 באוק׳ 2012

Code Demo - Scissors Animation in CSS3


* הדוגמא לכרום וספארי, בשביל שהיא תעבוד בשאר הדפדפנים, יש להוסיף את שאר ה prefix
* הדוגמא תעבוד ללא הפסקה באתר אמיתי. פה היא מפסיקה כי היא מתנגשת משום מה עם ה iframe
לדף הדוגמא המלא והמפורט

לפוטס מפרט, של איך להכין אנימציות מורכבות ב CSS3, עבודה עם פריימים, ושימוש במספר אנימציות לאלמנט אחד.

14 באוק׳ 2012

Code Demo - CSS Image Gallery - no JS

* לחצו על התמונות הקטנות של HTML5 ו CSS3 על מנת לראות איך עובד הדפדוף הגלריה.
* יש לעבור בין הטאבים של HTML וה CSS על מנת לראות את הקוד.
לדף הדוגמא המלא והמפורט

לפוטס מפרט של איך להכין גלריית תמונות ב CSS בלבד!

דברים שנתמכים ב CSS מאקספלורר 8 - שלא הכרתם


IE7 new support
אקספלורר 7 איבד ומאבד אחוזי שימוש בשנה האחרונה. וברב האתרים התחיל לרדת מתחת ל 5 אחוזי שימוש מכלל הגולשים, מה שמאפשר לשקול לבטל את התמיכה בו.
(IE = INTERNET EXPLORER)

הנה ריכוז של חלק מהדברים החדשים שנתמכים מאקספלורר 8 ומעלה וכמובן בשאר הדפדפנים האחרים, שכדאי שתכירו.




10 באוק׳ 2012

אנימציות מורכבות ב CSS3, עבודה עם פריימים, ושימוש במספר אנימציות לאלמנט אחד

CSS3 animation advanced frames overload keyframes
את הפוסט הזה אני כותב, אחרי שחשבתי שאני כבר מכיר אנימציות ב CSS3 בצורה טובה. רציתי לעשות אנימציה חיה, משהוא יותר בסגנון של פלאש ולא סתם איזה תמונה/ריבוע שזז ממקום למקום בתוך הדף. חשבתי על רעיון לעשות מספריים שעושות את האנימציה של הגזירה, ובנוסף זזות ממקום למקום. החלתטי שאני מתחיל בחלק הראשון של האנימציה, אלה שאז נתקלתי בבעיה הראשונה. וכאן הפוסט שלי נכנס לתמונה.






8 באוק׳ 2012

גלריית תמונות ב CSS בלבד! ע"י שימוש בפסאודו קלאס target

CSS Image Gallery - no JS - by using pseudo class target
כבר די הרבה זמן אני נתקל באפשריות שימוש בפסאודו קלאס מסוג target. הפסאודו הזה מסמן תגית שפונים אליה מתגית A אחרת. ניתן לפנות לכל תגית שיש לה ID. כביכול נראה דבר מאוד פשוט, אך לפסאודו קלאס הזה יש הרבה כח, הוא בעצם מאפשר לך לתת לתגית מסוימת ערך שונה מלאחרים בדף. בחשיבה תכנותית זה כמו משתנה שאני יכול לגשת אליו (מי מסומן), ולהשתמש בו כדי להציג תגית מסוימת אחרת. רק שה"משתנה" פה יהיה ב CSS!
לא מאמינים! אז הנה - דוגמא לגלריית CSS ללא JS

גיריתי אותכם מספיק, אז בואו נתחיל!

7 באוק׳ 2012

עבודה עם Image Sprites (תמונות מאוחדות) ב CSS

יותר ויותר נפוצה באינטרנט גישת ה sprites לשימוש בתמונות ואייקונים, הגישה שאומרת לאחד תמונות לתמונה אחת. היתרונות ברורים, עבודה עם קבצי sprites מקטינה את כמות הבקשות לשרת(http requests), ובמידה מסוימת גם את סה"כ גודל הנתונים, מה שגורם לאתר להיטען מהר יותר, ולהוריד עומסים בשרת. מאידך עבודה עם sprites, מייצרת עוד עבודה בהכנתו, עוד כתיבת קוד CSS מורכב, וברב המקרים גם שימוש בתגיות HTML נוספות, אשר ייצגו לנו את התמונות מה sprites.

יאללה אז בואו נתחיל!


6 באוק׳ 2012

פסאודו אלמנט before & after והעוצמה שחבויה בהם!

pseudo - before and after
פסאודו אלמנט before & after, קיימים כבר החל מאקספלורר 7, אך נכון להיום מועט בהם מאוד השימוש.
בפיצר הזה של CSS, טמון הרבה מאוד כוח. אני ידגים פה על קצה המזלג חלק מהיכולות המרהיבות שניתן ליישם בעזרת פיצר זה.

במידה ואינכם מכירים/יודעים מהו פסאודו קלאס/Pseudo-classes, אתם מוזמנים לקרוא את המאמר - הכל על פסאודו Pseudo Class\Element ב CSS.

אז בואו נתחיל!

2 באוק׳ 2012

תגיות סמנטיות ב HTML5 והדרך הנכונה להשתמש בהן

semantic html5
עם כניסת HTML5, נוספו המון תגיות סמנטיות, נכון לעכשיו יש יותר בלבול בין מה ואיך להשתמש בתגיות אלו.
במאמר הנוכחי אני מבצע סקירה של מגוון תגיות חדשות, והכי חשוב! איך מומלץ להשתמש בהם.

אז בואו נתחיל...




1 באוק׳ 2012

snippet - איך לעשות trim לשורה, ב CSS בלבד!

בטח נתקלתם בבעיה, שכאשר יש כותרת ארוכה מידי, אתם רוצים בצורה דינמית שהטקסט ייחתך ויהיו 3 נקודות בסופו.

יש פתרון CSS נקי שתומך בבעיה!



26 בספט׳ 2012

הכל על פסאודו Pseudo Class\Element ב CSS

All types of pseudo class and elements

פסאודו class/elemets בcss


הקדמה


כולם מכירים פסאודו class/elemets בcss, גם אם אתם לא מכירים את המונח, סביר להניח שהשתמשתם בו גם בלי להבין.
פסאודו class המוכר ביותר הוא hover, כן התוספת שבאה אחרי class רגיל עם נקודתיים, ה hover מייצג את הstyles שיתרחשו במידה ונעבור מעל אלמנט מסוים במעבר עכבר.
דוגמא:
a{color:red;}
a:hover{color:green;}
מה שיקרה, תגיות ה a יהיו בצבע אדום, ובמעבר עכבר צבע הטקסט שלהם יהפוך לירוק.

טוב אז סביר להניח שלא חידשתי לכם כלום עד עכשיו! אז כאן אני רוצה להיכנס לתמונה יש כיום כל כך הרבה אפשריות חדשות בפסאודו class/elemets עם כניסת ה CSS3, החלטתי שאני ירכז כאן את כל המגוון שלהם, אז תנשמו עמוק מתחילים...

22 בספט׳ 2012

snippet - איך מסירים את כל attributes של האיפוס בטבלה (table) בCSS

בטח נתקלתם בבעיה שכל פעם שאתם משתמשים בטבלאות ב HTML , אתם צריכים לאתחל/לאפס את שלושת ה attributes של הטבלה, מדובר ב  cellspacing,  cellpadding,  border.

הבעיה - שבכל כתיבת טבלה, יש צורך באיפוס שלושת ה attributes שמגיעים ביחד איתו.

20 בספט׳ 2012

העמסות ב CSS3, כל כך פשוט ואף אחד לא מכיר!

CSS3 Overloads

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

כיצד כותבים העמסות בCSS3 ? 

בוא נייצר div אלמנט עם class בשם  box, ניתן לו כמה style שיתנו לו נפח, ולאלמנט ניתן תמונת רקע.

חדשות: גוגל תפסיק לתמוך באקספלורר 8

זה בהחלט חדשות טובות למפתחי ה web. דבר שיאיץ במשתמשים לעבור לדפדפנים עדכניים.
ויאפשר להשתמש בטכנולוגיות חדשות ועדכניות יותר כגון HTML5 ו CSS3.

לכתבה ב Walla - גוגל תפסיק לתמוך באינטרנט אקספלורר 8







12 בספט׳ 2012

ספריית modernizr - יצירת סביבת עבודה עם CSS3 ו HTML5


Modernizr - javascript library to work with HTML5 & CSS3
Modernizr היא ספריייה javascript.
תפקיד הספרייה לזהות זמינות של פיצרים טכנולוגים מתקדמים, כלומר תכונות שנגזרות מן HTML5 ו CSS3. רבים ממאפיינים אלה כבר מיושמים בדפדפן עיקרי אחד לפחות (רובם בשתיים או יותר).

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

שלא כמו בשיטות הלא אמינות הותיקות שהיינו מחפשים סוג דפדפן וגרסה ע"י שימוש ב navigator.userAgent, וע"י כך עושים תיקון פר גרסה.
בעזרת Modernizr אנחנו עושים גילוי אם תכונה פעילה וקיימת, ובמידה ולא קיימת נוסיף טיפול מתאים שהדפדפן הלא תקין/ישן יוכל להתמודד איתו.
ע"י כך נוכל לזהות בקלות טיפולים לדברים שלא נתמכים, ובנוסף לא נצטרך לדאוג שתצא גרסה חדשה של דפדפן, כי הטיפול הוא פר פיצר, ובמידה והגרסה החדשה של הדפדפן תומכת, הפיצר אמור לעבוד לנו אוטומטית.

10 בספט׳ 2012

ולידציות בטפסים ב HTML5, בשילוב עם CSS3

HTML5 Validation - using CSS3 pseudo classes
עם הגעת HTML5,וCSS3, נוספו לנו פקדים חדשים, שעושים לנו את החיים קלים יותר כמפתחים.
בעזרת CSS3 מאפשרים לנו לייצר ולידציות ללא צורך ב JS, מה שעושה את הכתיבה הרבה יותר פשוטה ולא מסורבלת.

ה tutorial הזה יראה חלק קטן מהיכולות הגלומות  בפקדים החדשים של HTML5 עם השילוב של CSS3.

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

אז בואו נתחיל!

6 בספט׳ 2012

אנימציות ב CSS3

CSS3 Animations

אנימציות ב-100% CSS3

לפני שנתחיל חשוב לציין! - אנימציות ב CSS לא עובדות עד גרסה אקספלורר 9 כולל(רק מגרסה 10 העתידית לצאת בקרוב), ובכל שאר הדפדפנים יש להוסיף לפני קוד הstyle , את ה prefix של הדפדפן. לדוגמא:
דוגמא 1:

@keyframes mymove{}
@-moz-keyframes mymove /* Firefox */{}
@-webkit-keyframes mymove /* Safari and Chrome */{}
@-o-keyframes mymove /* Opera */{}
 דוגמא 2:
animation-name:mymove;
-moz-animation-name:mymove; /* Firefox */
-webkit-animation-name:mymove; /* Safari and Chrome */
-o-animation-name:mymove; /* Opera */

  • אני אתייחס רק לצורת הכתיבה בלי ה prefix בדוגמאות, אך כדי שהקוד יעבוד בכל הדפדפנים הנתמכים יש לכתוב את הקוד בכל 4 הצורות האפשריות, ניתן ליצור פיתרון אלגנטי בless, אני אדגים בסוף.

החוקים של יצירת אנימציה מאוד פשוטים.
  1. יש לנו אלמנט עליו נפעיל את האנימציה. 
  2. את האנימציה עצמה שנקרא לה מתוך האלמנט.

29 באוג׳ 2012

Less - ספריית CSS , על רגל אחת

less - css library
Less - היא סוג של ספריית CSS, שמקנה ל Styles של ה CSS להתנהג בצורה יותר חכמה.

הפעלת הספריה פועלת ע"י הוספת קובץ JS אשר ירנדר לנו בצורה דינאמית את ה CSS ה"חכם" שלנו לקובץ CSS טיפש שהדפדפן מכיר.

הפעלת הספרייה מאוד פשוטה, יצירת קובץ less שיושפע לנו ויהפוך אוטומטית לקובץ CSS, וע"י שיוך קובץ ה JS של הספרייה לתגית ה HEAD באתר..

26 באוג׳ 2012

דברים שנתמכים ב CSS מאקספלורר 7 - שלא הכרתם

IE7 new support
מרוב שאנחנו עסוקים בלהתאים לדפדפנים ישנים כמו IE6  ו IE7, אנחנו שוכחים לבדוק מה כן עובד בכל הדפדפנים לדוגמת IE7 ומעלה.
(IE = INTERNET EXPLORER)

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