הפוך גיליון אלקטרוני ישן ומשעמם למפה אינטראקטיבית מבוססת אינטרנט, ציר זמן או טבלה עם קצת HTML פשוט באמצעותפרויקט תערוכה בחינם, קוד פתוח.
התערוכה לוקחת מערכי נתונים של עד כ-500 שורות, משרטטת מיקומים במפת גוגל, תאריכים על ציר זמן אינטראקטיבי ומציגה תמונות וקישורים בתצוגת טבלה או תמונה ממוזערת. הצופה יכול למיין, לחפש ולסנן נתונים בכל תצוגת תערוכה מבלי לטעון מחדש את הדף. אתה יכול לגרום ל-Exhibit לעשות את כל זה עם קובץ HTML בודד וגיליון אלקטרוני - אין צורך בתכנות הארדקור.
כדי לנסות את זה, אתמול זרקתי להדמיית התערוכה הראשונה שלי שנקראתמופעי ברודווי שראיתי ב-17 השנים האחרונות. מַדוּעַ? ובכן, אני מחפש להיפטר מערימת ה-Playbills המתאספת על המדף שלי, אבל אני רוצה לזכור אילו תוכניות ראיתי ומתי. אז צילמתי כל שער של Playbill (ראה את זהסט פליקר), הזינו מידע על כל מופע לעניין זהגיליון אלקטרוני של גוגל, וחיבר את השניים ל-Exhibit באמצעות HTML ו-CSS שנתלשו מדוגמאות אחרות של Exhibit. שחקו עם זה בעצמכםכָּאן, או צא לסיור במה שהפיק להלן.
כמה תצוגות תצוגה בפעולה
כדי לעבור בין תצוגות בתערוכת המופעים שלי בברודווי, לחץ על השורה העליונה של הקישורים (טבלה, תמונות ממוזערות, מפה, ציר זמן, אריחים). בואו נסתכל על כל אחד.
התצוגה הראשונה וברירת המחדל היא תצוגה טבלאית פשוטה ("טבלה"), שנראית הרבה כמו הגיליון האלקטרוני שלך. כאן אתה יכול ללחוץ על כל כותרת עמודה כדי למיין פריטים, לחפש לפי מילת מפתח או לסנן לפי "היבטים" שהגדרתי בסרגל הצד הימני (בין אם ההצגה הייתה מחזמר או הצגה, התיאטרון, ומחוץ לצילום המסך, צוות בולט חברים).
כדי להציג את הנתונים בשורה כמו בלוקים, נסה להציג תמונות ממוזערות, שם השתמשתי בגרסה הגדולה יותר של תמונות Playbill שלי כדי ליצור ייצוג חזותי יותר של הרשימה שלי. כברירת מחדל יש לי את ה-Playbills כאן ממוינים לפי סוג המופע (Musical או Play) ומקובצים ככאלה. לחץ על הקישור "ממוין לפי" כדי לשנות את ההגדרות הללו.
שתי הדוגמאות הללו הן דרכים נפוצות לייצוג רשימות. תצוגת המפה וציר הזמן היא המקום שבו הדברים הופכים מעניינים באמת.
כדי לחבר מפת Google לנתונים שלך, תצטרך לכלול קואורדינטות קווי רוחב ואורך בגיליון האלקטרוני שלךכמו שעשיתי. (כדי להשיג אותם בקלות, העתק והדבק את עמודת הכתובת שלך בזהדף אינטרנט מועיל לקידוד גיאוגרפי אצווה.) כך נראית מפת התיאטראות שבהן השתתפתי.
ציר הזמן-שאניהתאהב בשנת 2006-הוא גם דרך מגניבה להציג מידע על תאריך בנתונים שלך. קוד צבע את הנקודות על ציר הזמן שלך (נקודות כתומות הן מחזות זמר וכחול הן הצגות, במקרה שלי) וגרור ושחרר את ציר הזמן קדימה ואחורה כדי לראות את הנקודות המתוכננות. לחץ על כל נקודה כדי לראות פרטים על המופע עצמו. בהסתכלות אחורה בזמן, אתה יכול לראות שהשתתפתי בהרבה יותר הופעות בסוף שנות ה-90 מאשר בכל תקופה אחרת.
דוגמאות נוספות לתערוכה בפעולה
אוסף הפלייביל העלוב שלי הוא שימוש מאוד צנוע ומשרת את הכלי החזק הזה. בדוק כמה דוגמאות יפות וחינוכיות יותר בפעולה:
נשיאי ארה"ב- בדוק ציר זמן של כל נשיאות, ומפות של מקומות לידה ומוות בארה"ב
מיליארדרים בהיסטוריה-הדמיית מפה מסודרת שמראה לך את הכסף.
ערים בארה"ב לפי אוכלוסייה- ל-NYC יש מעגל ישן גדול מעליו.
הכינו תערוכה משלכם
תערוכה מורכבת משני קבצים: קובץ HTML אחד וקובץ נתונים אחד (שצריך להיות בפורמט JSON, שבו תומך גיליונות אלקטרוניים של Google). נכון לעכשיו, כדי ליצור תערוכה משלך, אתה צריך להיות די טוב בהתלבטות ב-HTML (ו-CSS, אם אתה רוצה שזה ייראה יפה), אבל יש המון מדריכים ודוגמאות שיובילו אותך דרך דברים (ולקרוע) כבוי קוד טוב מ).
כדי להכין בעצמך, כל התיעוד שאתה צריך נמצא ב-הצג את המדור של מחבר wiki.
למתחילים, אתה רוצה לעבור דרךהדרכה לתחילת העבודהרֵאשִׁית. לאחר מכן, לאחר שתערוכת נובליסטים של MIT פועלת, התחל לאסוף את הנתונים שלך. עברתי לכיצד ליצור תערוכה מנתונים המוזנים ישירות מגיליון אלקטרוני של Google, ולאחר מכן השתמש במדריכי הלימוד הבאים כדי להגדיר כל תצוגה:תצוגת תמונה ממוזערת,תצוגת מפה,תצוגת קו זמן, ותצוגה טבלאית.
היתרונות והמגבלות של התערוכה
זה די מדהים שאתה יכול לעשות סוג כזה של נתונים מבוססי אינטרנט מבלי לגעת במסד נתונים ממשי, אבל מחיר הנוחות הוא מגבלה על כמות הנתונים שבה אתה יכול להשתמש. התצוגה היא כולה JavaScript, כך שהביצועים ייפגעו אם יש לך מערך נתונים גדול, מעל 500 שורות. לדוגמה, אם מישהו רוצה לעשות הדמיה של העוקבים שלו בטוויטר (זמין, בנוחות, כ-JSON הודות ל-Twitter API), הוא יהיה בסדר כל עוד יש לו פחות מ-500 אנשים שעוקבים אחריו.
אבל עבור מערכי נתונים קטנים שאתה רוצה לפרסם בקלות בבלוג או באינטראנט של החברה שלך, Exhibit היא דרך בטוחה להרשים את הקוראים או הבוס שלך. (בלוגרים, תוסף וורדפרס של Exhibit אמור לצאת גם הוא בשבועות הקרובים).אתר האינטרנט של התערוכהלדוגמאות ותיעוד נוספים.
התערוכה הופכת את הגיליון האלקטרוני שלך לדף אינטרנט אינטראקטיבי[תוכנה חכמה יותר]
Smarterwareהוא הבית החדש של עורך Lifehacker אמריטוס ג'ינה טראפני הרחק מההאקר. כדי לקבל את כל העדכונים האחרונים מ-Smarterware, הקפד לעשות זאתהירשם לעדכון RSS של Smarterware. למידע נוסף, עיין בשבועון של ג'ינהתכונת Smarterwareכאן ב-Lifehacker.
