מצגת CSS3 שמבוססת על הסגנון של Prezi
לפני יותר משנה כתבתי בבלוג סיקור קצר על כך שהגיע הזמן לעזוב את ה-Power Point ולעבור ל- Prezi .
במוצר הזה נתקלתי לראשונה באחד הכנסים והתלהבתי מאוד מהיתרונות שהכלי נותן וכמו -כן שניתן סוף סוף להעביר הרצאה בצורה מרתקת בלי השקפים המשעממים שאנחנו מכירים.
הבטחתי לעצמי שבהרצאה הקרובה שתיפול לידיי אני אממש את היכולות של ה-Prezi ואנסה אותו, המועד לא איחר (אפילו הקדים קצת) והכנתי מצגת בנושא איך יוצרים קמפיין נכון? במהלך בניית המצגת הבחנתי בכך שקיימת ההתעניינות רבה ב-Prezi אך לצערי לא הייתה קיימת קהילה ישראלית שתתמוך בקושי לבנות מצגת שתומכת בעברית (היה קיים טמפלייט אחד בלבד שתמך בעברית) וכך נוצר המדריך להוספת עברית ב-prezi על כל הטמפלייטים שעזר לרובכם להתקדם ולנטוש את הPower-point ולהתחיל ליצור מצגות מדהימות ומגניבות.
דבר נוסף שכדאי לדעת על היתרון בשימוש ב-Prezi זה שהם השכילו והשיקו את אפליקציית פרזי לאייפד – prezi App for Ipad המאפשר לכם לנדוד עם המצגות שלכם לכל מקום ולא להיות מקובעים למחשב.
50 דוגמאות לאתרים מבוססי עיצוב מגיב/גמיש
שבוע שעבר פירסמתי פוסט שעוסק בנושא עיצוב מגיב / עיצוב גמיש מה זה? ואיך משתמשים בזה? , למי שטרם שמע על המונח עיצוב גמיש/מגיב אני ממליץ לבקר בפוסט הקודם שמתמצת את הנושא.
ציטוט קצר על ההגדרה:
עיצוב מגיב או עיצוב גמיש (Responsive Design) – עד היום לא בחרו שם רשמי בשפה העברית למונח הזה, מדובר בעיצוב שמגיב בהתאם לסביבה ורזולוציה שבה הגולש נמצא, לצורך העניין הרזולוציה במסך מחשב בגודל 22 אינץ שונה מהרזולוציה שיש באייפון / באייפד כנ"ל גם אם נטה את האייפון / אייפד לרוחב נקבל רזולוציה נוספת ולכן יש צורך לבצע התאמה של האתר להתקנים אלו כדי שאנחנו ההגולשים נוכל לנווט ולגלוש בקלות באתר מהתקנים השונים, את הזיהוי של ההתקנים מבצעים באמצעות שורת קוד ב-CSS, שיודעת לזהות מאיזה התקן ורזולוציה הגולש הגיע ובהתאם לכך לבחור את תצוגת האתר המתאימה ביותר.
בעקבות ההתעניינות רבה של גולשים בנושא, נוצר הפוסט הבא מתוך סדרה של פוסטים שיבואו בעתיד שיעסקו וילמדו אתכם את כל מה שתצרכו לדעת בשביל ליצור אתר מבוסס עיצוב מגיב/גמיש משלכם, הפוסטים יעזרו לכם להבין את החשיבה והמיתולוגיה שעומדת מאחורי האפיון, התכנון והעיצוב של אתר כזה שתיצור חווית משתמש תקינה לגולשים וכמובן כיצד ניגשים ליצור אותו מבחינה עיצובית ופיתוחית (כן נלכלך את הידיים קצת עם קוד).
בהמשך הפוסט תוכלו לראות מדגם של 50 אתרים שעושים שימוש בעיצוב מגיב/גמיש בצורה מדהימה ונכונה, תוך התייחסות נכונה לכל האספקטים שצריך לקחת כאשר מבצעים המרה מרזולוציות שונות. אני אישית נהנתי לראות את ההמרה מהאתר הגדול לאתר הכי קטן (שדורש לא מעט השקעה וחשיבה) שמותאם לתצוגת אייפונים וטלפונים.
דוגמאות לעיצוב מגיב
Simon Collison
Andersson-Wise Architects
Stephen Caver
Sparkbox
קרא עוד >>
11 אתרי עזרים וכלים מצטיינים לשימוש ב-HTML5
HTML5 הינה שפה יחסית חדשה שעדיין לא נכנסה לעבודה השוטפת של רובנו בארץ אבל בחו"ל כבר תוכלו לראות המון אתרים שמבוססים על הטכנולוגיה הזו, לאלו מכם שלא ראו את הפוסט המכיל אוסף של 75 אתרים נבחרים ב-XHTML/CSS לחודש יולי – השראה אתם מוזמנים להיכנס ולהתרשם ממגוון אתרים מבוססי HTML5.
למי שעוד לא יצא לעבוד עם HTML5 אז כדי שתדעו שהשפה הזו בשונה מהגרסאות הקודמות מחוללת בהחלט מהפך לרובנו והיא כוללת בתוכה המון פיצ'רים שימושים לתחום הוידיאו, אודיו, פונטים, גרירת אלמנטים,יצירת אנימציות ועוד… למי שרוצה טעימה מוזמן להתרשם מ- 11 נגני וידאו מבוססי HTML5 שחובה שתכירו . היופי גם בטכנולוגיה החדשה הזו שהיא תומכת בגרסאות קודמות כמו HTML4 ו XHTML1 ככה שלא תרגישו בשינוי.
אז לכל המעצבים שחיפשו כלים ל-HTML5 שיוכלו לתת להם טבילה ראשונה בעולם הקוד והטכנולוגיה החדשה שרובנו טרם הספקנו לטעום ממנה אתם מוזמנים להישאר מעודכנים בטכנולוגיה המדהימה הזו ולהבין למה התחילו להספיד את הפלאש ולעשות מ-HTML5 כ"כ הרבה באזז ורעש.
כלי אונליין ליצירת סקיצות ב-3D
לפי התמונה אני בטוח שאתם כבר משערים מה הכלי שהאתר הזה מספק, מדובר בכלי לייצור סקיצות אבל לא באופן הרגיל והמוכר שלנו, האתר מבוסס על HTML וקנבס שהופך את הציור לתלת מימד.
בשביל להזיז את הקנבס ולצפות בתצוגת תלת מימד יש להחזיק את מקש הרווח ולגרור את העכבר לרוחב המסך, קיימת אפשרות גם לבחור סגנון ציור קו מדושדש וכד'. כלי מגניב
כלי אונליין לשליטה בתמונות
לכל מי שרצה להציג חלק מתמונה גדולה שהוא טוען או לשנות תמונה במעבר עכבר, וכל מיני משחקים עם תמונות שבשנים האחרונות נהיה דבר נורא נפוץ יכול באמצעות הכלי הבא פשוט לטעון תמונה או אפילו לתת לינק לתמונה שיושבת ברשת, ולהתחיל להגדיר איזה חלק מהתמונה הוא מעוניין לטעון/להציג/מיקום ועוד. ללחוץ על הכפתור הירוק "create CSS" ולהטמיע את הקוד בקובץ CSS בקלות, הכלי הזה גם מועיל למהירות הטעינה של האתר בכך שאתם משתמשים בפחות תמונות, הכלי פותח באמצעות jQuery, CSS3 ו HTML5.
כלי אונליין לשליטה בתמונות נוסף
כלי נוסף שמאפשר אותו דבר זה בשם sprite cow רק שהוא מכיל מספר אפשרויות נוספות כמו בחירת רקע, וכד'.
כלי לבדיקת פונטים אונליין
בחירת פונט מתאים לאתר שלכם זה אחד הדברים החשובים כאשר בונים אתר, זו גם חובתו של המעצב לדעת לבחור את הפונט הכי מתאים לאתר שהוא מעצב, האתר הבא מאפשר לכם לשנות את הפונט של כל אתר שתרצו ולצפות בשינוי אונליין וכל זה מבלי צורך לשנות קוד. השינוי של הפונט מתבצע באופן נורא פשוט ע"י גרירה של הפונט לתוך האזור של הסרגל כלים ולאחר מכן הרשימת פונטים יוצגו בתפריט נפתח כמו בתמונה למעלה, אתם יכולים להשתמש במאגר 35 פונטים חינמיים שישדרגו לכם את העיצובים או במאגר פונטים של גוגל.
כלי ליצירת סקיצות במהירות
זה אחד מהכלים המגניבים שראיתי המבוססים על HTML5 ציור על קנבס, אני מאמין שמעצבים רבים ימצאו שימוש משעשע ומדליק בכלי הזה.
כלי ליצירת שבלונות אונליין
באמצעות הכלי הבא תוכלו ליצור שבלנות )patterns) אונליין בקלות, כלי שימושי מאוד למי שרוצה ליצור רקע לאתר, כותרת וכל מיני שטחים וכד', הכלי בעל מגוון רחב של אפשרויות ופשוט ונוח לשימוש ממליץ בחום!
20 תוספים שחובה שיהיה לכם בבלוג!
לאחר שהתחלתי לעבוד עם וורדפרס, לא רק בתור מערכת בלוגים, אלא ממש בתור מערכת ניהול תוכן לאתרי תדמית ולפעמים אפילו קצת יותר מזה התחלתי להתעמק בכל עולם התוספים ולהתחיל לתהות ולמצוא תוספים שימושים ויעילים לעבודה השוטפת של הבלוג או האתרים שאני בונה, מרבית התוספים השימושיים שמצאתי דווקא באים לידי ביטוי בפאנל ניהול של המערכת ומאפשרים לכם להרחיב את האפשרויות בפאנל ניהול שלכם.
כל התוספים שיופיעו בהמשך הפוסט לא צריכים לגרום כל נזק לאתר שלכם, או להאטה כלשהי, כל שכן, התוספים אינם מצריכים משאבים מיוחדים ככה שאין שום סיבה להירתע מלהתקין אותם.
1. Akismet
אני מאמין שזה פלאגין שמוכר לכם מפני שהוא מגיע עם כל מערכת של וורדפרס, התוסף נועד כדי למנוע ספאם מבלי שיהיה לכם צורך להשתמש בקאפצ'ה
התוסף הבא מאפשר לכם להחליף את הגופן באתר שלכם, מה שיפה בתוסף הזה שהוא מבוסס javascript ולכן תוכלו לראות את הגופנים מכל דפדפן ואפילו מטלפונים ניידים, התוסף קל להתקנה ולא פוגע באפשרות לסמן את הטקסט.
חבילת קידום אתרים אולטימטיבית לאתר שלכם, התוסף הבא מאפשר לכם להגדיר לכל פוסט את הכותרת,תגי מטא,תיאור,מידע ועוד…
טופס יצירת קשר המוכר והטוב, קל להגדרה ולהתקנה, ניתן להגדיל בקלות את השדות בטופס ולקשר את הטופס ליותר מאדם אחד.
אדובי edge אנימציות מבוססות JavaScript & Html5 ללא ידע בכתיבת קוד
החודש אדובי השיקה תוכנה חדשה הנקראת Adobe Edge או בקיצור שלה eg, התוכנה משמשת מעצבים ואנשי צד לקוח שמעוניינים לעבור ולהשתמש ב-HTML5 , CSS3 ו- JavaScript
התוכנה מאפשרת לכם ליצור אנימציות מבוססת JS ו- JSON באמצעות טיים- ליין פשוט נוח כמעט כמו שהכרנו באפטר אפקטס ופרימייר, מהתרשמות ראשונה שלי מהתוכנה היא לא הכי נכונה וקצת מפספסת כמה דברים אבל הכיוון בהחלט טוב, והוא יכול לעזור מאוד למי שרוצה ליצור אנימציות ואפקטים מגניבים וקלים כמו fade in/out , easeing ,rollover effects וכד',
אני אישית מרגיש משום מה שה-edge בא להחליף את האח הבכור שלו שנגנז עוד לפני שהושק (בבקשה תתקנו אותי שאני טועה) תוכנה בשם adobe thermo , אומנם Thermo היה אמור להיות מושק בשנת 2006 מה שאומר הרבה לפני שחשבו על HTML5 ו-CSS3 אבל הוא הכיל אותם עקרונות ורעיונות, שEdge סבור להביא לנו, וזה למנוע מהמעצבים לכתוב קוד ולהיעזר בתוכנות שיבצעו אנימציות מבוססות קוד ללא צורך בידע טכני.
שוחחו איתי אונליין
שימושון
תגיות
א | ב | ג | ד | ה | ו | ש |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
קישורים
- flashoo – קמפוס הפלאש הישראלי
- newsgeek
- אייל שחר מול המכונה
- אינטרנט ישראל
- אנטייטלד
- אסטרטגיה באינטרנט
- ארגון חווית משתמש הישראלי
- בלוג תוצרת הארץ – של נופר
- בניית אתרים
- בקופסא
- הבלוג של אלכסנדר יודייב
- הבלוג של אמיר דותן
- הבלוג של ארז וולף
- הבלוג של גיא בורשטיין
- הבלוג של ויטלי מיז’יריצקי
- הבלוג של חברת נטקראפט
- הבלוג של יוניש
- הבלוג של יוסי ג'אנה
- הבלוג של יעל קריידרמן
- הבלוג של מאור ברזני
- הבלוג של מורד שטרן
- הבלוג של ניר טובר
- הבלוג של רוני אורבך
- הבלוג של רן לירון
- הבלוג שעושה כבוד לקונספט
- המזלג
- המעצב בתחתונים
- וובמאסטר
- ויראליקס
- טיפים וטריקים לוורדפרס
- טיפים לחיפוש עבודה
- מברשות לפוטושופ
- מזבלה
- פיקסל פרפקט מגזין
- פרסי העיצוב וחווית משתמש
- פשוט שימושי – ברק דנין