תגובות

WebAddicted: מהדורת אפריל 2012

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

jQuery Plugins

Skrollr

Skrollr הוא פלאגין jQuery מטריף ששוחרר החודש ומתפקד כפריימוורק ליצירת אתרי Parallax (אתרים נגללים). הוא דומה מאוד לפלאגין Scrollorama עליו כתבתי בחודש הקודם, רק שהוא מביא עוד אפשרויות כמו מד התקדמות, אנימציות מתקדמות ועוד…

ResponsiveSlides.js

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

jPages

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

BlocksIt.js

פלאגין jQuery מעולה לפריסת תוכן דינאמית בעמודים בסגנון של Pinterest. הפלאגין מאפשר להעביר את מס' הטורים שתרצו, ואת שם הבלוק עליו תרצו לבצע את הפריסה. בנוסף לפלאגין הזה קיימים עוד כמה על אותו סגנון עליהם כתבתי בעבר.

HTML5

Playpit

12 ניסויים מרהיבים בHTML5 שבאים להמחיש בצורה יפה את יכולות הCanvas. אנימציות, תלת-מימד – ווב במלוא הדרו.

Google Play Map Cube

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

CSS3

CSS3 Fluid Parallax Slideshow

אחת הדוגמאות המדהימות שראיתי בזמן האחרון לשימוש בסלקטורים החדשים של CSS3. הסליידר המיוחד הזה נבנה כולו בעזרת HTML פשוט וCSS3 בלבד! הוא משתמש באנימציות של CSS3 בשביל המעברים ובכפתורי רדיו והסלקטור "checked:" כדי להפעיל אותם.

CSS3 Rotating Words

עוד דמו מעניין לשימוש בCSS3 Animations. הדמו הזה מציג רצף של חילופי מילים עם 5 סוגי אנימציה שונים.

CSS3 Animated Tabs

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

CSS3 scroll effects

שילוב יפיפה בין Javascript לCSS3 שמציג יותר מ10 דוגמאות מרהיבות לאנימציה בזמן אירוע "גלילה" (Scroll event) של אלמנט מסוים.

מדריכים וכלים

Screenqueries

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

Smashing Magazine Book #3

סמשינג מאגזין הודיעו השבוע על הוצאת הספר השלישי שלהם כאשר הנושא העיקרי של הספר יהיה "עיצוב מחדש" או "Redesign". רוצו לקנות!


זה הכל לחודש אפריל 2012 בפינת WebAddicted של הבלוג. יצא לכם להשתמש בכלי פיתוח מעניינים? בדיוק סיימתם לפתח פלאגין jQuery יעיל? יצרתם דמו מגניב בטירוף בHTML5 או CSS3? צרו איתי קשר ואדאג לפרסם את הקישור שלכם.

שיהיה חודש מצוין!

קצת על דניאל שטרנליכט

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

6 תגובות לפוסט "WebAddicted: מהדורת אפריל 2012"

  • אחלה של לינקים אחי, תודה.

  • דבר ראשון תודה על הסקירה (ועל הבלוג בכלל) – דברים יפים ומעניינים.

    לגבי כל האפקטים של CSS3 שמובאים פה – כמה שהם יפים ככה הם לא יעילים כל עוד לא ניתן לצפות בהם ב-IE ובמכשירים חכמים (נבדק על האנדרואיד שלי), כנ"ל לגבי יכולות כרטיס מסך בעניין HTML5.

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

    מה שכן – נחמד לראות יכולות שאפשר להשתמש בהן בעתיד (למרות שבעתיד הן יכולות להיות כבר לא רלוונטיות) או להשתמש בהן ולעשות ניתוב קוד מיוחד לדפדפנים מאותגרי יכולת (איזה יופי של פוליטקלי-קורקט..)

    • היי יסמין, אני לגמרי לא מסכים איתך.

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

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

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

    מה שאני אומרת זה שצריך לשים לב טוב אם התעלמות מדפדפן מיושן (אך פעיל) לא פוגמת לגמרי בחוויית הגלישה כמו למשל הדוגמא של הטאבים שב- IE משנה את הממשק באופן מהותי, הדוגמא של המילים המתחלפות שבה גולשי IE לא נחשפים לחלק מהתוכן אותו רוצה בעל האתר להציע, כנ"ל לגבי הסליידר ומהמשחק (המגניב לאללה) של המפה גם גולשי FF 11.0 לא יכולים ליהנות.

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

כתיבת תגובה

האימייל לא יוצג באתר. (*) שדות חובה מסומנים