wordcamp.co.il

מציגה: מאיה מרום, בצק אלים

פיירבאג - נשק יום הדין של מפתחי התבניות 

אפשר להוריד אותו מ - www.getfirebug.com

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

ctrl+shift+C

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

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

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

מדריכים לעיצוב ב - CSS ושדרוג תבניות

http://www.tamba2.org.uk/wordpress/graphicalcss/
מדריך מצויין ומאוד תכל'סי לשימוש ב - CSS לעיצוב ושינוי תבניות בוורדפרס. http://www.wpdfd.com/issues/70/css_from_the_ground_up/
מאמר ארוך (לוקח שעתיים-שלוש לקרוא) אבל מאוד ידידותי ומכסה כמעט את כל מה שצריך לדעת ב-CSS http://codex.wordpress.org/Stepping_Into_Templates
מדריך חובה לכל מי שמתקרב לעריכת תבניות - מהאתר הרשמי של וורדפרס http://www.htmldog.com/guides/cssbeginner/
מדריך CSS למתחילים http://www.subcide.com/tutorials/csslayout/index.aspx
איך יוצרים עיצוב CSS מהתחלה http://www.w3schools.com/css/css_intro.asp
מדריך בסיסי מצויין ל-CSS

משאבים יקרים מפז

http://www.stylegala.com/features/css-reference/ האינציקלופדיה הקבועה שלי לחיפוש מהיר אחר תגיות של CSS
http://www.virtualhosting.com/blog/2007/100-legal-sources-for-free-stock-images/ מדריך למציאת תמונות חינמיות לשימוש בבלוג
http://www.colourlovers.com/ רשת חברתית מגניבה לשיתוף ומציאת סכימות צבעים יפות
http://www.alvit.de/handbook/ דפי-הזהב של עיצוב לאינטרנט ועיצוב בכלל. שלל של קישורים לאתרים מעניינים ומדריכים בכל נושא שקשור לעיצוב לאינטרנט. יש סקשן מושקע במיוחד לוורדפרס.

דוגמאות לבלוגים מעוצבים כהלכה (לא כולם בלוגים אפילו!!) - מהמצגת

http://geniantsandbox.com/
http://www.jrvelasco.com
http://wp-themes.designdisease.com/
http://www.kitsimons.com/
http://www.firewheeldesign.com/widgets/
http://pay.perclick.ro/
http://interface.fh-potsdam.de/innoforum/
Kindea
http://ilovetypography.com/
http://www.fontshop.com

דוגמאות לבלוגים מעוצבים כהלכה (לא כולם בלוגים) - לא הופיעו במצגת

http://www.webdesignerwall.com/
http://webrevolutionary.com/oh-apple-how-you-frustrate-me/
http://www.northxeast.com/
http://thebignoob.com/soldiers/ryan/
http://www.funatiq.com/
http://www.mbdragan.com/blog/unseen_romania/
http://www.theshirtproject.org/
http://doshimodo.com/

מקומות עם צבעים מעניינים להשראה

http://www.rightbrainterrain.com/index.htm
World War II Posters

השראה לגריד (שלד לעמוד) וקונספט

http://www.processtypefoundry.com/
http://www.fontshop.com/fonts/

הפוסט הזה נכתב בתאריך יום חמישי, 25 באוקטובר, 2007 בשעה 3:30 pm תחת הקטגוריות עיצוב. אפשר לעקוב אחר התגובות לפוסט הזה באמצעות פיד RSS לתגובות. אפשר לכתוב כאן תגובה, או לכתוב בבלוג שלך פוסט כתגובה ולשלוח טראקבאק.