למען האמת, לא רק אחת, אבל אחת (לדעתי) משמחת במיוחד.

במילה אחת: גרפיקה, בשתי מילים: גרפיקה ווקטורית

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

בHTML5 יש לנו קנבס, מה ניתן לעשות איתו? הכל!

נתחיל במהו קנבס?

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

נתחיל מיצירת האלמנט בתוך דף הHTML שלנו:

<canvas id="myCanvas" width="220" height="180">
    Your browser does not have support for Canvas
</canvas>

מ

כאמור – אלמנט פשוט עם אטריביוטים רגילים לחלוטין כפי שאנחנו מכירים מכל אלמנט HTML אחר.

עכשיו נעבור לחלק האומנותי:

window.addEventListener('load', function () {

  // Get the canvas element.

  var elem = document.getElementById('myCanvas');

  if (!elem || !elem.getContext) {

    return;

  }


 השתמשנו באירוע הטעינה של הדף 


והצמדנו אליו פונקציה לבדיקה שאכן נוצר לנו אובייקט קנבס 


  ושיש לנו סיבה להמשיך מבלי להעיף הודעות שגיאה לכל עבר.  


אנחנו ממשיכים ליצירת ספקטרום של צבעים בו נשתמש מאוחר יותר:

var color, hue = [

    [255,   0,   0 ], // 0, Red,       0°

    [255, 255,   0 ], // 1, Yellow,   60°

    [  0, 255,   0 ], // 2, Green,   120°

    [  0, 255, 255 ], // 3, Cyan,    180°

    [  0,   0, 255 ], // 4, Blue,    240°

    [255,   0, 255 ], // 5, Magenta, 300°

    [255,   0,   0]], // 6, Red,     360°

 אנחנו מייצרים צורה גראדיינית:
gradient = context.createLinearGradient(0, 0, elem.width, 0);

 מוסיפים את הצבעים:
gradient = context.createLinearGradient(0, 0, elem.width, 0);
for (var i = 0; i <= 6; i++) {
    color = 'rgb(' + hue[i][0] + ', ' + hue[i][1] + ', ' + hue[i][2] + ')';
    gradient.addColorStop(i * 1/6, color);
  }

 ציור של אלמנט מצולע עם הצללה:

context.shadowOffsetX = 5;

  context.shadowOffsetY = 5;

  context.shadowBlur    = 4;

  context.shadowColor   = 'rgba(0, 0, 0, 0.5)';

  context.fillRect(5, 5, 200, 100);

 שימוש בטקסט בתוך הקנבס:
context.font = 'bold 36px sans-serif';
context.textBaseline = 'top';
context.fillText('!שלום עולם', 25, 120, 200);
context.strokeText('!שלום עולם', 25, 120, 200);



 והתוצר הסופי אמור להראות כך:

ניתן לראות דוגמא חיה כאן: http://alink.co.il/html5/hello

מבוסס על מדריך שנלקח מהאתר הזה: http://www.robodesign.ro/coding/canvas-primer/20081208/

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

שמתי לב לזה באופן מיוחד בראיון העבודה האחרון שלי (למקום העבודה בו אני עובד עכשיו) כשהמנטרה שלי היתה: “אתם צריכים מישהו ברמה הרבה יותר גבוהה מזו שאני מחזיק בה”

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

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

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

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

התקנתי לעצמי את המערכת וניסיתי לשחק איתה קצת, מהר מאוד איבדתי בה עניין ומחקתי אותה מהשרת שלי,כך שלמעשה לא רכשתי בה יותר מידי נסיון

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

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

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

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

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

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

אני יודע Javascript

אני יודע גם Java

וגם CSS,HTML,ASP3,CSHTML,.Net,Ruby וכנראה גם לא מעט טכנולוגיות ושפות נוספות

אני יודע גם להתקין,להגדיר ולעשות התאמות לWordpress,Joomla ומערכות ניהול תוכן נוספות

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

אז זהו, כל מה שנשאר זה רק לפנות אלי.

]]> http://alink.co.il/wp/?feed=rss2&p=62 1