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

חווית משתמש: הסיפור של כפתור שלח לפי גוגל

מאי 16, 2012 // על ידי אבי כהן // css, html, Javascripit, חווית משתמש, טכנולוגיה, כללי, עיצוב, פוטושופ // 2 תגובות

מה קורה אחרי שלוחצים על כפתור "שלח" במייל?

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

לצפייה באתר: the story of send

אני נהנתי… ואתם?

11 אתרי עזרים וכלים מצטיינים לשימוש ב-HTML5

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

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) אונליין בקלות, כלי שימושי מאוד למי שרוצה ליצור רקע לאתר, כותרת וכל מיני שטחים וכד', הכלי בעל מגוון רחב של אפשרויות ופשוט ונוח לשימוש ממליץ בחום!

קרא עוד >>

11 דוגמאות לבדיקת שדות בטפסים באמצעות AJAX

ספט 18, 2011 // על ידי אבי כהן // Javascripit, וורדפרס, טכנולוגיה, כללי, מדריכים, עיצוב, שימושון // אין תגובות

האם שמתם לב שיותר ויותר אתרים משתמשים באימות שם משתמש בטפסים באמצעות AJAX, דבר המאפשר לכם לקבל חיווי מיידי בנוגע לזמינות של השם משתמש אותו אתם ממלאים בטופס, בפוסט הבא אביא לכם 11 טפסים מבוססי PHP/ASP.NET שמשתמשים באימות AJAX.

בדוגמאות הבאות יש שימוש ב-php ו ajax שמתבסס על מחלקת Jquery שנתחיל?

1. AJAX (jQuery)בדיקת שם משתמש עם PHP

האם שמתם לב שהרבה אתרים משתמשים בכלי האימות בשדה השם משתשמש כאשר אתם ממלאים את השדה, האימות מתבצע באמצעות AJAX ששולח בקשה לPHP שבודק האם השם משתמש כבר רשום במערכת.

דמו | להורדה

2. בדיקת זמינות שם משתמש באמצעות Jquery/PHP

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

דמו | להורדה

3. בדיקת זמינות שם משתמש ב- ajax באמצעות jQuery

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

למדריך | להורדה

קרא עוד >>

11 נגני וידאו מבוססי HTML5 שחובה שתכירו

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

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

בפוסטים האחרונים כתבתי לא מעט על html5 ועל פלאש, הפעם אתם מוזמנים ליהנות מ-11 נגני וידאו מבוססי HTML5 שיעזרו לוידאו באתר שלכם לתמוך באייפון והתקנים ניידים כאלו ואחרים שאינם תומכים פלאש, וגם לשפר את האתר שלכם מבחינת קידום אתרים ׁ(SEO).