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

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

קרא עוד >>

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 סבור להביא לנו, וזה למנוע מהמעצבים לכתוב קוד ולהיעזר בתוכנות שיבצעו אנימציות מבוססות קוד ללא צורך בידע טכני.

קרא עוד >>

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

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

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

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

videojs.com

colinaarts.com

moovie

sublimevideo.net

sublime video

קרא עוד >>

88 פוטרים מעוצבים שיתנו לכם השראה מדהימה

יול 10, 2011 // על ידי אבי כהן // css, html, כללי, עיצוב, פוטושופ, פלאש ואנימציה, שימושון // 3 תגובות

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

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

1. morphix.si

113