‫מקודד לשוא‬

‫CSS Mask in HTML 5‬

‫דניאל‬ — Thu, 08 Jul 2010 18:21:50 +0000

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

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

מיקמתי שני div אחד מעל השני – בראשון תמונה של מכונית (המכונית חייבת להיות לבנה כדי שנוכל לצבוע אותה בקלות)

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

ועל זה הוספתי סקריפט jQuery שמשנה את צבע הרקע של div.carMask

וככה זה ניראה :

‫HTML5 CSS‬

‫דניאל‬ — Sun, 04 Jul 2010 14:07:04 +0000

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

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

טרנספורמציות – Transforms

סט מאפיינים שמאפשר לסובב לשנות גודל ושינויים דו ממדיים לאלמנט.

translate(80px, 80px) הקוד למעלה מתאר הסטה של 80 פיקסלים מהמיקים המקוריה

scale(1.5, 1.5)הגדלה פי 1.5 לאלמנט

rotate(45deg)סיבוב בזווית 45 מעלות

מעברים- Transitions

מעברים מאפשרים לשינוי מאפיניי css להתרחש בצורה חלקה לאורך זמן

transition-property – על איזה מאפיין יעבוד המעבר

transition-duration – משך זמן המעבר (בשניות)

אנימציות – Animation

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

@keyframes מגדיר אנימציה חדשה , כל אנימציה מכילה ערכי from to וניתן להוסיף ערכי ביניים באחוזים

animation-name מקשר את האנימציה להגדרת ה css

מקורות (טיוטות העבודה של w3c)

‫תהליך תקינה ב w3c‬

‫דניאל‬ — Thu, 24 Jun 2010 13:27:21 +0000

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

על פי מסמכי תאור התהליכים של W3C תקינה מתקדמת בחמש רמות בשלות:

טיוטת עבודה (Working Draft)
קריאה אחרונה לטיוטה (Last Call Working Draft)
מועמד להמלצה (Candidate Recommendation)
המלצה מוצעת (Proposed Recommendation)
המלצה – (W3C Recommendation )

טיוטת עבודה - העבודה בתהליך, התוכן יכול להתעדכן להתחלף,או להתבטל.

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

מועמד להמלצה - חלק מהתקינות מסובכות יותר ויתכן כי הן צריכות יותר בדיקה (עי ארגון התקינה או חברות חיצוניות) כמו בטיוטה לא ניתן להתבסס על התוכן לתקינה.

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

המלצה - היא התקינה של אירגון w3c שאותה ממליצים לספקי התוכנה ליישם.

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

‫HTML5 Client Side Storage‬

‫דניאל‬ — Tue, 22 Jun 2010 09:10:55 +0000

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

ישנם שני ממשקים שתפסו את עיני לגבי שמירת נתונים דרך הדפדפן

אכסון נתונים – מאפשר שמירת נתונים בדפדפן בצורת key – value .
אכסון מקומי בצורה עבודה לא מכוונת – אפשרות לשמור נתונים במבנה sql מקומי (משתמש ב sqlite).

אכסון מבנה נתונים פשוט

שמירת הנתונים נעשית דרך api חדשים בשם localStorage sessionStorage שניהם ממשים את אותו ממשק ומבצעים את אותן הפעולת אך תחום שמירת התנונים הוא שונה

עבור sessionStorage התחום הוא ה session ועבור localStorage הוא הדומיין (בדומה לשמירת cookies). ה api מאוד פשוט וניתן להבין אותו בקלות לפי דוגמאת הקוד הבאה

אכסון מבנה נתונים מורכב

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

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

מקורות

w3c Offline Web Applications

w3c Web Storage

‫לחלץ להפוך ולטעון‬

‫דניאל‬ — Tue, 15 Jun 2010 17:35:16 +0000

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

הנסיונות שלי להכניס את המידע למסד הנתונים לימדו אותי שלושה דברים

ניהול מידע במסד נתונים מבוסס מסמכים
בניית אינדקסים
עבודה עם סטים

ניהול מידע

לוח משדרים מורכב מהמאפיינים הבאים

Channels
Programs
Tags or Categories

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

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

אין שכפול מידע וישנו שדה שמציין את המזהה את הערוץ

אוביקט התוכנית מכיל עותק של אוביקט הערוץ

בניית אינדקסים

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

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

עבודה עם סטים

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

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

‫כרום לא טוען את הדף‬

‫דניאל‬ — Mon, 14 Jun 2010 07:40:40 +0000

אם מופיע לך ההודעה הבאה

This webpage is not available
The webpage at http://www.codeinvain.com/ might be temporarily down or it may have moved permanently to a new web address.
Here are some suggestions:
Reload this web page later.

או

Error 105 (net::ERR_NAME_NOT_RESOLVED): The server could not be found

וכדי לצאת ממנה אתה צריך לטעון מחדש את הדף או לסגור לגמרי את הדפדפן ולפתוח מחדש יש פתרון לבעיה

בטל את "Use DNS pre-fetching to improve page load performance" בהגדרות הדפדפן

לחץ על האייקון של המברג

בחר options

עבור לטאב השלישי Under the hood

בטל את הסימון באפשרות השלישית

‫שמירת מסמך C# RavenDB‬

‫דניאל‬ — Thu, 10 Jun 2010 14:44:05 +0000

אני אעבור בקצרה על בנית פרויקט hello world ב RavenDB

אחרי ההתקנה , פתחתי פרויקט C# console application חדש הוספתי רפרנסים ל dlls שבתיקיית client
Newtonsoft.Json.dll

Raven.Client.Lightweight.dll
אני מנסה לבנות אפליקציית דוגמה בדומיין קצת שונה מניהול אתר או חנות וירטואלית ובחרתי לבנות מסד נתונים ללוח משדרים (epg)

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

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

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

מבחינת הפעולות עצמם :

1. מגדירים אוביקט מסד נתונים חדש ומספקים לו "connection string" ומאתחלים אותו (2 שורות)

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

3. מאחסנים את האוביקט בסשן (הוא עוד לא נשמר במסד הנתונים אך כבר מקבל Id יחודי)

4.שומרים את כל השינויים שנעשו בסשן.

‫המפרצים שלי גדלו בעוד סנטימטר‬

‫דניאל‬ — Tue, 08 Jun 2010 19:22:27 +0000

איזה עצבים שוב האינטרנט נפל

תודה פיקוק

תודה 014

תודה בזק

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

אבל היום אחרי הרבה מאוד שנים נלחמתי (בשיניים) על זכותי לגלוש באינטרנט.

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

משחק ההאשמות

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

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

‫צפייה במסמכי רייבן דרך הדפדפן‬

‫דניאל‬ — Mon, 07 Jun 2010 15:13:58 +0000

הוספת content-type header

כחלק מהמשחקים שלי ניסיתי לבנות לעצמי מן סביבת עבודה נוחה .

שליפת מסמכים מרייבן נעשית דרך HTTP ורציתי לנצל את היכולת של הדפדפן ושל רייבן בכדי לצפות בקלות במסמכים ממסד הנתונים. כשניסיתי לגשת בפעם הראשונה הדפדפן פתח את דיאלוג "שמור קובץ בשם" , למזלי השתמשתי בפיירפוקס בזמן הבדיקה וראיתי כי הMIME המוחזר הוא application/x-www-form-urlencoded

אחרי משחקים רבים וחיטוט בקוד המקור של השרת ראיתי כי ה MIME מגיע משדה METADATA של המסמך שנשמר ברייבן

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

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

צפיה במסמך json דרך הדפדפן

הדבר הבא היה להתקין תוסף לתצוגת JsonView לפיירפוקס ו Pretty JSON לכרום כדי לקבל תצוגה מעומדת ומסודרת של המסמך. טריק קטן לגבי צפייה בכרום – התוסף מצפה למילה JSON בשורת הכתובת ניתן לראות דוגמה לכך בתמונה מצד ימין

‫RavenDB web admin‬

‫דניאל‬ — Wed, 02 Jun 2010 19:11:51 +0000

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

לאחרת הרצת השרת ניתן לגשת לאתר הניהול בכתובת http:/localhost:8080 ששני הלינקים החשובים שלנו הם למסמכים ולאינדקסים

עמוד הכניסה לממשק הניהול של רייבן

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

עמוד האינדקסים מאפשר לנו להגדיר מאין "indexed view" שניתן לחפש ולסנן על פיהן את התוצאות במהירות.

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

ונסיים בבדיחה