בניית רכיב אקורדיון באמצעות jQuery + CSS וללא תוספים

בפוסט הזה נדבר על יצירה של אקורדיון – רשימה של כפתורים שבלחיצה על כפתור – נפתח ונסגר התוכן שלו מתחתיו. מדובר ברכיב ממש פשוט מכל בחינה – HTML, CSS וjQuery, כך שלהטמיע בשבילו תוסף JS ייעודי זה בזבוז מושלם. בשלב הראשון נגדיר את הבסיס שחייב להיות, ואחר כך נתקדם הלאה, לעיצוב, הנגשה ואופציות נוספות. קוד … להמשך קריאהבניית רכיב אקורדיון באמצעות jQuery + CSS וללא תוספים

הגדרת תגי מטא עבור רשתות חברתיות במערכת וורדפרס

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

הוספת כפתורי שיתוף ברשתות חברתיות

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

iframe רספונסיבי באמצעות CSS

בטח נתקלתם בזה יותר מפעם אחת. אתם מטמיעים סרטון מיוטיוב או כל iframe אחר, ונותנים לו רוחב, לדוגמה 100%, או 300 פיקסלים. אתם נותנים גם גובה, כך שייראה טוב בדסקטופ. ואז מגיע השלב של רספונסיב לעמוד, והרוחב של הiframe קטן או גדל באחוזים ניכרים מרוחבו בדסקטופ. מה עושים עם הגובה? אם היה מדובר בתמונה, היינו … להמשך קריאהiframe רספונסיבי באמצעות CSS

בניית טולטיפ – tooltip – הדרך הפשוטה באמצעות CSS

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

סלקטור "אח" – Siblings בCSS

הקדמה בקוד HTML, האלמנטים בנויים בצורה של איזשהו עץ משפחה. יש את אלמנט הhtml, שהוא מה שמכונה root – השורש של העץ שלנו. לhtml תמיד יש 2 בנים ישירים – head, body. אלו הם בנים ישירים. יש לו גם צאצאים לא ישירים, לדוגמה div, nav, .myHeader וכל האלמנטים שנמצאים בתוכו. הפוסט הזה ידריך אתכם איך … להמשך קריאהסלקטור "אח" – Siblings בCSS

עיצוב כפתורי צ'קבוקס ורדיו (checkbox/radio)

עיצוב אלמנטים של HTML עשוי להיות משימה מאתגרת לעיתים, וזה משום שהפקדים (inputs) מהסוג צ'קבוקס ורדיו לא ממש טורחים לקבל את הCSS שאנחנו כותבים להם, בטח לא בכל הדפדפנים והמכשירים, וזה עוד לפני שדברנו על הסימון הפנימי של עיגול או V, שאם אנחנו רוצים לדוגמה עיגול או V בעיצוב מסויים – זה עשוי להיות כבר … להמשך קריאהעיצוב כפתורי צ'קבוקס ורדיו (checkbox/radio)

הנגשת פופאפ

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

הנגשת אתרים – פרק שלישי – ניווט מקלדת

ניווט מקלדת

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

הנגשת אתרים – פרק שני – הנגשה ללקויות ראייה

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