CSS Mask in HTML 5
< התוכן שמופיע כאן מועמד לסטנדרטיזציה ב html5 יתכן וחלק מהדברים לא יעבדו כרגע על כל דפדפן >
בהמשך לפוסט הקודם על css ב html5 עשיתי עוד ניסוי קטן לגבי masks (אולי מיסוכים?) .
רציתי להחליף צבעים תכנותית לתמונה קיימת . כדי לעשות את זה ניגשתי למלאכה והתחלתי לנבור ברשת , די מהר מצאתי שגם לזה יש פתרון ב css3.
מיקמתי שני div אחד מעל השני - בראשון תמונה של מכונית (המכונית חייבת להיות לבנה כדי שנוכל לצבוע אותה בקלות)
בשני צללית של המכונית , הצללית כוללת אך ורק את החלקים שרציתי לצבוע דינאמית.
ועל זה הוספתי סקריפט jQuery שמשנה את צבע הרקע של div.carMask
וככה זה ניראה :
HTML5 CSS
< התוכן שמופיע כאן מועמד לסטנדרטיזציה ב 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)
HTML5 Client Side Storage
[ התוכן שמופיע כאן מועמד לסטנדרטיזציה ב html5 יתכן וחלק מהדברים לא יעבדו כרגע על כל דפדפן ]
ישנם שני ממשקים שתפסו את עיני לגבי שמירת נתונים דרך הדפדפן
- אכסון נתונים - מאפשר שמירת נתונים בדפדפן בצורת key - value .
- אכסון מקומי בצורה עבודה לא מכוונת - אפשרות לשמור נתונים במבנה sql מקומי (משתמש ב sqlite).
אכסון מבנה נתונים פשוט
שמירת הנתונים נעשית דרך api חדשים בשם localStorage sessionStorage שניהם ממשים את אותו ממשק ומבצעים את אותן הפעולת אך תחום שמירת התנונים הוא שונה
עבור sessionStorage התחום הוא ה session ועבור localStorage הוא הדומיין (בדומה לשמירת cookies). ה api מאוד פשוט וניתן להבין אותו בקלות לפי דוגמאת הקוד הבאה
אכסון מבנה נתונים מורכב
ניתן ליצור גם מסדי נתונים מקומיים לשמירת מבנה נתונים מורכב על בסיס sqlite בנית טבלאות , ניהול גרסאות ,שאילתות וטאנסאקציות כולן אפשריות מול בסיס הנתונים המקומי.
שיטת העבודה היא מול מסד הנתונים היא טרנסאקציונאלית - יוצרים אוביקט מסד נתונים דרכו יוצרים טרנסאקציה ובתוך הטרנסאקציה מבצעים את השאליתות (ניתן לראות בדוגמת הקוד)
מקורות
לחלץ להפוך ולטעון
בהמשך לפוסט הקודם החלק הראשון בבנית ה EPG הוא למצוא את המידע ולטעון אותו לתוך מסד הנתונים , אחרי שמצאתי באינטרנט קובץ XML שמכיל רשימת ערוצים ותכניות התחלתי לחשוב איך אני מכניס אותם לרייבן 
הנסיונות שלי להכניס את המידע למסד הנתונים לימדו אותי שלושה דברים
- ניהול מידע במסד נתונים מבוסס מסמכים
- בניית אינדקסים
- עבודה עם סטים
ניהול מידע
לוח משדרים מורכב מהמאפיינים הבאים
- Channels
- Programs
- Tags or Categories
במסד נתונים רלציוני הייתי מכין שלוש טבלאות והייתי שם מפתחות (forigen keys) במקומות המתאימים בכדי לקשר את הטבלאות, אך לא כך הדבר ברייבן.
מידע במסד נתונים מבוסס מסמכים אינו צריך לעבור נורמליזציה. צריך לשמור את המידע בצורה שהכי נוחה לשליפה. ובכך יכול להיות שיהיו כפילויות (רחמנא ליצלן) של מידע . במודל שלי זה בא לידי ביטוי בכך שכל ערוץ מכיל אוביקט של תוכנית (אני עדיין לא סגור לגבי זה ויתכן כי בעתיד אני אעיף את המידע משם) ובכך ש לתאגים אין בכלל מסמך נפרד והם רק מערך בתוך האוביקטים של תוכניות וערוצים.
אין שכפול מידע וישנו שדה שמציין את המזהה את הערוץ
אוביקט התוכנית מכיל עותק של אוביקט הערוץ
בניית אינדקסים
בניית אינדקס הוא תהליך חד פעמי ובשלב זה אפשר לחשוב עליו כמו על יצירת VIEW במסד נתונים. בניית אינדקס כרוכה ברישום 2 פונקציות מיפוי וצמצום (Map-Reduce) כאשר הרעיון מאחורי שיטה זו הוא חלוקת הבניה של האינדקס לשתי פונקציות נפרדות אחת שמגדירה איך המידע ניראה ובעצם ממפה את המודל (מכאן Map) ואחת שאחראית על סינון התוצאות או צמצומם (מכאן Reduce) .
רייבן מגיע עם אינדקס אחד פשוט ויעיל אשר נותן לתשאל את מסד הנתונים על פי סוג המסמך.
עבודה עם סטים
למעט עריכה וצפייה (פעולות CRUD) על מסמך בודד עבודה על סטים (מספר מסמכים) נעשית דרך האינדקסים ניתן להשתמש בAPI לקבלת אינדקס מלא או לצמצם את התוצאות החוזרות ,שלא כמו עבודה על מסמך בודד חלק מהעבודה על סטים (מחיקה לפי אינדקס לדוגמא) לא ניתן לבצע דרך הסשן אלא דרך אוביקט DocumentStore
ואחרי הכל הנה המחלקה שטוענת את הנתונים לתוך רייבן (את הפרויקט המלא ניתן להוריד מכאן).
שמירת מסמך C# RavenDB
אני אעבור בקצרה על בנית פרויקט 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.שומרים את כל השינויים שנעשו בסשן.
צפייה במסמכי רייבן דרך הדפדפן
הוספת content-type header
צפיה במסמך json דרך הדפדפן
הדבר הבא היה להתקין תוסף לתצוגת JsonView לפיירפוקס ו Pretty JSON לכרום כדי לקבל תצוגה מעומדת ומסודרת של המסמך. טריק קטן לגבי צפייה בכרום - התוסף מצפה למילה JSON בשורת הכתובת ניתן לראות דוגמה לכך בתמונה מצד ימין
RavenDB web admin
אחרי ההתקנה , אפשר להתחיל לשחק עם הממשקים השונים , אורן האדם מאחורי הפרויקט מדגים הרבה באמצעות curl , יש בזה הרבה בכדי להראות שרייבן לא חייב לעבוד עם דוטנט , שממשק התקשורת מאוד פשוט (על בסיס עקרונות REST) והנתונים נשמרים בפורמט מאוד "רזה" ונח (JSON) . הממשק שאני (ואתה קורא יקר) אשתמש בו הכי הרבה לדעתי זו ספריית הקוד ב C# שממסכת את הקריאות . אבל לשם התחלה , דווקא נתחיל עם אתר הניהול
לאחרת הרצת השרת ניתן לגשת לאתר הניהול בכתובת http:/localhost:8080 ששני הלינקים החשובים שלנו הם למסמכים ולאינדקסים
עמוד הכניסה לממשק הניהול של רייבן
בעמוד המסמכים ניתן לנהל (להוסיף לערוך ולמחוק) את הנתונים הנשמרים ברייבן. הפורמט שבו נשמרים הנתונים (ומוזנים בממשק הניהול) כאמור הוא JSON.
עמוד האינדקסים מאפשר לנו להגדיר מאין "indexed view" שניתן לחפש ולסנן על פיהן את התוצאות במהירות.
בנית האינדקסים נעשית על פי טכניקת מיפוי-צמצום (או בשמה המקורי Map-Reduce) כאשר הרעיון מאחורי שיטה זו הוא חלוקת הבניה של האינדקס לשתי פונקציות נפרדות אחת שמגדירה איך המידע ניראה ובעצם ממפה את המודל (מכאן Map) ואחת שאחראית על סינון התוצאות או צמצומם (מכאן Reduce) .
ונסיים בבדיחה
ScriptObject + DynamicObject = DynamicScriptObject
בסילברלייט ניתן לתקשר עם הדפדפן ולקרוא למתודות ג'אואסקריפט לדוגמה :
HtmlPage.Window.Invoke("method")
בצורת תקשורת זו מקבלים חזרה אובייקטים מסוג ScriptObject שבכדי לתשאל אותם צריך לבצע משהו בסגנון :
myScriptObjct.getMember("memberName")
כמובן שתשאול ישיר היה יכול להיות יותר נוח וקריא
myScriptObjct.memberName
בעזרת dynamic ו DynamicObject ב C# 4 ניתן לבצע תחבולה שכזו וליישם אוביקט פרוקסי דינאמי שמקל על הקידוד
RavenDB חלק א' – ההתקנה
ונתחיל בחלק הכיפי , מורידים את הגרסה האחרונה מהאתר (קובץ zip) ופורסים . מכיוון שרייבן (עדיין לא החלטתי אם לעברת אותו ל"עורב ד.ב.") לא מצריך התקנה וניתן להריץ במקביל גרסאות שונות שלו החלטתי לפתוח תיקיה ראשית כאשר כל גרסה נשמרת בתיקיה נפרדת .
התקנת גרסאות שונות של רייבן במקביל
התקנה של רייבן כוללת מספר תיקיות ,השמות של כל תיקיה די מסבירים את עצמם וכרגע נתרכז בשתיים רלוונטיות :
Server - בצורה הכי פשטנית שרת הרייבן הוא תוכנת דוט נט שמקבלת ומוסרת הודעות בפרוטוקול HTTP ומכאסנת מידע על הדיסק המקומי. ניתן להריץ את התוכנה בשני אופנים
1. שרת שרץ בתור שירות מערכת , דרך שורת הפקודה (CMD) או מאוכסן באתר asp.net
2. מוטמע בתוך אפליקציה (embedded)
כמובן שבצורה השנייה ניתן לגשת ישירות למסד הנתונים ללא צור ב HTTP
Client - ספריות השירות שבתיקיית client עוטפות את התקשורת בין השרת לאפליקציה ב API פשוט יותר שאינו מצריך להתמודד עם קריאות HTTP ופענוח המידע החוזר.
מבנה תיקיות
כדי להתחיל לשחק עם השרת מפעילים את הקובץ RavenDB.exe עם הרשאות אדמיניסטרטור
כפתור ימני -> הפעל כאדמיניסטרטור
ולהיכנס דרך הדפדפן לכתובות http://localhost:8080 (במקרה הצורך ניתן לשנות את מספר הפורט בקובץ RavenDB.exe.config ולהפעיל מחדש את השרת)
הממשק כמו ספרית ה client שהזכרתי קודם הוא גם עוד מעטפת ל HTTP API של רייבן
עמוד הפתיחה לממשק ניהול רייבן
אגב, הקוד המלא של רייבן זמין ב git hub
היום התחלתי עם עורב
כבר תקופה ארוכה אני סקרן לגבי מסדי נתונים לא רלציוניים (עברית בבקשה מישהו ?) , אבל אף פעם לא מוצא את הזמן או להתחיל. ההשקה לאחרונה של RavenDB דירבנה אותי להתחיל לחפור בענין.
כמובן כמו כל אחד התחלתי מהסוף , הורדתי ,התקנתי ,הרצתי שיחקתי קצת והחלטתי שזהו - הפעם זה זה. הפרויקט האישי הבא שלי מתחיל.
התחלתי סולושן חדש הוספתי פרויקט MVC ומשם דברים התדרדרו ... כל שורת קוד שכתבתי העלתה שתי שאלות וכל תשובה שמצאתי העלו עוד שלוש. אז כדי לעשות לי סדר ולהעביר לך (קורא יקר) את הזמן החלטתי לתעד את המסע הזה מהתחלה.
