תגובות

4 טיפים ו6 פלאגיני jQuery מעולים להתמודדות עם חיתוך תמונות בWeb

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

1. תנו למשתמש להרגיש בבית

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

2. האם אתם באמת צריכים את זה?

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

3. אל תמציאו את הגלגל מחדש

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

4. תמיכה מאחורי הקלעים

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

Having said that, קבלו 6 פלאגיני jQuery מעולים להתמודדות עם חיתוך תמונות בWeb!

JCrop

ImgAreaSelect

Crop Zoom

העלאה וחיתוך תמונה בעזרת PHP וjQuery

Crop

Photoshoot Image Crop

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

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

3 תגובות לפוסט "4 טיפים ו6 פלאגיני jQuery מעולים להתמודדות עם חיתוך תמונות בWeb"

כתיבת תגובה

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