פוסטים בקטגוריה "css"

מצגת 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 תוספים שחובה שיהיה לכם בבלוג!

אוג 17, 2011   //   על ידי אבי כהן   //   css, html, וורדפרס, כללי, מדריכים, עיצוב, פוטושופ, שימושון  //  10 תגובות

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

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

 

1. Akismet

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

2. All-in-one Cufon

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

3. All-in-one SEO Pack

חבילת קידום אתרים אולטימטיבית לאתר שלכם, התוסף הבא מאפשר לכם להגדיר לכל פוסט את הכותרת,תגי מטא,תיאור,מידע ועוד…

4. Contact Form 7

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

5. Dean’s Permalink Migration

קרא עוד >>

אדובי edge אנימציות מבוססות JavaScript & Html5 ללא ידע בכתיבת קוד

אוג 1, 2011   //   על ידי אבי כהן   //   css, html, טכנולוגיה, כללי, מדריכים, עיצוב, שימושון  //  תגובה אחת

החודש אדובי השיקה תוכנה חדשה הנקראת Adobe Edge או בקיצור שלה eg, התוכנה משמשת מעצבים ואנשי צד לקוח שמעוניינים לעבור ולהשתמש ב-HTML5 , CSS3  ו- JavaScript

התוכנה מאפשרת לכם ליצור אנימציות מבוססת JS ו-  JSON  באמצעות טיים- ליין פשוט נוח כמעט כמו שהכרנו באפטר אפקטס ופרימייר, מהתרשמות ראשונה שלי מהתוכנה היא לא הכי נכונה וקצת מפספסת כמה דברים אבל הכיוון בהחלט טוב, והוא יכול לעזור מאוד למי שרוצה ליצור אנימציות ואפקטים מגניבים וקלים כמו fade in/out , easeing ,rollover effects וכד',

אני אישית מרגיש משום מה שה-edge בא להחליף את האח הבכור שלו שנגנז עוד לפני שהושק (בבקשה תתקנו אותי שאני טועה) תוכנה בשם adobe thermo , אומנם Thermo היה אמור להיות מושק בשנת 2006 מה שאומר הרבה לפני שחשבו על HTML5 ו-CSS3 אבל הוא הכיל אותם עקרונות ורעיונות, שEdge סבור להביא לנו, וזה למנוע מהמעצבים לכתוב קוד ולהיעזר בתוכנות שיבצעו אנימציות מבוססות קוד ללא צורך בידע טכני.

קרא עוד >>

עמודים:«1234»

שוחחו איתי אונליין

נובמבר 2024
א ב ג ד ה ו ש
 12
3456789
10111213141516
17181920212223
24252627282930