סקירת כנס Adobe Create The Web 2012

חברת Adobe קיימה אמש כנס ובו השיקה משפחת מוצרים חדשה בשם Edge המיועדת למפתחי Front-End ומעצבי אינטראקטיב. הכנס התמקד ב-HTML5 ללא מילה על פלאש, ועם אמירה ברורה שחברה רואה את HTML5 כהתקן העתידי ליצירת אפליקציות ל-web, tablets, mobile ו-TV.

בסקירה הבאה אספר בקצרה על הכלים החדשים, שחלקם הושקו הכנס רשמית וחלקם יושקו בהמשך השנה, בהתבסס על ה-Keynote מאתמול.

Adobe Edge Animate 1.0

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

כדי לשפר ולקדם את האפקטיוביות של הכלי הזה, Adobe התחילה לתרום קוד ל-WebKit – מנוע קוד פתוח המשתמש את הדפדפנים Chrome ו-Safari. בין היכולות החדשות – אפקטים על תמונות (שחור/לבן, כרומו, משחקי Saturation), אפקטים אנימטיביים כמו קיפולי דפים וכדומה. הכל במסגרת CSS3 Animations ללא קוד סקריפט כלל. היכולות החדשות הללו כבר מוטמעות בספארי שהושק עם iOS6.

החברה מצהירה שמחיר התוכנה יהיה כ-500 דולר, או 15 דולר ב-subscription, אך בשלב זה מציעה אותו להורדה בחינם מאתר החברה. לא בטוח כמה זמן הוא ישאר חינם, והאם התימחור המופקע הוא רק כדי לעודד אנשים לרוץ ולהוריד 🙂

Adobe Edge Reflow – כלי ליצירת אתרים רספונסיביים

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

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

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

Adobe Edge Code – עורך קוד בקוד פתוח

כלי שבטח מתכנתי רבים מכירים, פרוייקט שהתחיל תחת שם הקוד Brackets. מדובר בעורך קוד html ,css, js בקוד פתוח, שהפיתוח שלו עצמו נעשה בטכנולוגיות צד לקוח. הכלי כולל כמה פיצ’רים נחמדים כמו color picker מובנה, live refresh, חיבור לספריית הפונטים של גוגל, auto-complete וכדומה.

פרוייקט קוד פתוח שהחברה מקווה שהקהילה תמשיך לפתח ולתרום לו, וכמובן זמין להורדה ב-GitHub.

Adobe Edge Inspect – כלי לבדיקות אתרים על מובייל

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

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

כלי יעיל מאוד למי שמפתח אתרים ואפליקציות mobile web, בעצם פותר את הצורך לרוץ לכאחד מהמכשירים, להיכנס לאתר, לרענן את המסך על כל שינוי, וכן גם פיתרון ל-Inspection שעובד ממש כמו ה-Inspector של כרום.

Typekit & Adobe Edge Web Fonts

Typekit הוא שירות שהוקם בשנת 2009 ונרכש לפני כשנה ע”י Adobe, וכעת מוצג כחלק מסל פיתרונות האונליין של החברה. מדובר באתר המציע subscription המאפשר להישתמש בספריית פונטים מקצועיים גדולה מאוד בתוך אתר האינטרנט שלכם כטקסט חי, כאשר הפונטים נשלפים ישירות משרתי Typekit. השירות מכיל כיום קצת יותר מ-1,200 פונטים, ומשרת למעלה ממיליון וחצי אתרי אינטרנט.
Adobe הכריזה כי היא מוסיפה ל-Typekit את כל ספריית הפונטים הקנייניים שלה, ובנוסף – הכריזה על שת”פ עם monotype (מפעילת אתר fonts.com), מה שאומר שבקרוב תופיע כל ספריית ה-WebFonts העצומה של monotype גם ב-Typekit.

בנוסף, החברה הכריזה על שת”פ חדש עם Google ליצירת אתר אינטרנט חדש בשם Edge WebFonts, המציע כ-500 פונטים לשימוש חינם, הן מהספרייה של Google WebFonts, הן את הפונטים החינמיים של Typekit והן את הפונטים של Adobe. כולם יהיו זמינים לשימוש חינם במסגרת האתר החדש, בהתבסס על השרתים והמנוע של Typekit.

ההכרזה אחרונה בתחום הפונטים היא השקה של שני פונטים חדשים בקוד פתוח, הראשון נקרא Source Sans, שבנוי כפונט מסך ומיועד לשימוש חופשי בפרוייקטי קוד-פתוח של הקהילה;
והפונט השני נקרא Source Code Sans, שהוא פונט Mono המיועד לשימוש בעורכי-קוד. מעבר לנקיות ולאסטטיות שלו, הפונט מבדיל הייטב בין תווים דומים כמו הספרה 0 והאות O האנגלית, או למשל האות i הגדולה ל-L קטנה (I/l), וכדומה. ניואנסים קטנים שעושים את ההבדל. שני הפונטים, כאמור, מופצים בקוד פתוח.

Adobe PhoneGap Build

כלי נוסף שנרכש ע”י Adobe לפני כשנה, מיועד להמרת אפליקציות HTML5 לסביבת מובייל, ובעצם חושף API אחיד לכל מכשירי המובייל כמו Geolocation, Contacts וכדומה, מה שמאפשר לאפליקציות mobile web לתקשר עם תכונות המכשיר כמו שאפליקציות native מתקשרות איתן.

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

ההשקה החדשה היא למעשה שירות אונליין חינאמי להמרת אפליקציות HTML5 לכל מערכות ההפעלה המוכרות: iOS, Android, WindowsPhone, BADA, webOS, BlackBerry. פשוט מעלים ZIP עם אפליקציית ה-web שלכם, והמערכת מייצרת מעיין wrapper וסוגרת את הקבצים כאפליקציה המוכנה להתקנה והעלאה ל-AppStores.

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

לסיכום

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

את כל התוכנות והשירותים החדשים ניתן למצוא באתר חדש בכתובת http://html.adobe.com

ודבר קטן נוסף – אתמול בערב ארגון ה-FWA הכריז על הקמת אתר חדש בשיתוף עם Adobe, בשם THE CUTTING EDGE AWARD. מדובר בתחרות שבועית המעניקה “פרסים” לאתרים המשתמשים בטכנולוגיות צד לקוח עדכניות וביישום פיצ’רים מודרניים. לנו נשאר לחכות ולראות מי יהיה הישראלי הראשון שיכנס לרשימה הנכספת 🙂