שיחה ההאקר Emad
11 באוגוסט 2012 – 21:50 | 31 תגובות

קבוצת ההאקרים הפועלת תחת שמו של אימעד מורניה, RememberEmad, ופרסמה כי פרצה לשרתי חברת ההוסטינג WebGate, פרסמה היום קובץ נוסף ובו כ-500 פרטים נוספים ובהם שמות משתמש וסיסמאות של אתרים שאוחסנו ב-WebGate. נראה כי העימות בן קבוצת …

המשך קריאה »
geek

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

הרשת

סיפורים מהרשת, בעיקר זו הישראלית. מה קורה, מי קורה ולמה קורה.

וורדפרס

בעיקר תבניות מתורגמות לעברית ולפעמים דברים שקשורים לבלוגים ובלוגרים.

מערכות ניהול תוכן

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

פלטפורמות חברתיות

על רשתות חברתיות, כלים לבניית רשתות ופלטפורמות חברתיות וכל מה מכונה web 2.0

בניית אתרים, וורדפרס »

גלילה אופקית ב-RTL פלאגין ל-jQuery
9 בספטמבר 2011 – 9:27 | 18 תגובות

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

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

אתר עמוד אחד בוורדפרס

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

הגלילה נעשית באמצעות הסקריפט jQuery ScrollTo, בהשראת הפוסט Coding a CSS3 & HTML5 One-Page Website Template ואת היישום על וורדפרס, כאמור אציג בכנס.

מגלילה אנכית לגלילה אופקית

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

ראשית, כדי להשתמש בסקירפט ScrollTo לגלילה אופקית, יש להעביר לו פרמטר נוסף, axis=x.
$.scrollTo( this.hash || 0, 1500,{axis:'x'});
פרמטר זה מורה לגלילה להתבצע על ציר ה-X בלבד.

פתרון ניווט הגיוני, יהיה ליצור איזור שיהיה קבוע ולא יגלל (באמצעות position: fixed) ובו יוצג התפריט.
למשל כך:

<header> <!-- This will get position:fixed -->
<hgroup><h1>logo<h1></hgroup>
<nav></nav>
</header>
<section id="container"> <!-- This is the rest of the site that will be scrolled -->
<article id="link1"></article>
<article id="link2"></article>
</section>

בדוגמת הקוד למעלה, <header> הנו האיזור שיהיה קבוע ולא יגלל וכל השאר כן.
כעת אצור קונטיינר שבו אציג את האלמנטים (איזורי התוכן השונים) אשר יגללו. בקוד למעלה <article> יהיו אזורי התוכן הנגללים. לשם כך, אתן רוחב קבוע לכל איזורי ה-article ואקבע להם float: right. כדי שהם יסתדרו בשורה אלו ליד אלו אצטרך להגדיל את רוחב האתר (כדי שכולם יכנסו בשורה אחת). בדוגמה זו רואים את האלמנטים בשורה מסודרים בשורה.

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

אייטם צמוד לגבול השמאלי

אייטם צמוד לגבול השמאלי

כדי לטפל בבעיה זו, נוכל להוסיף לכל אייטם, padding-left, כדי "לדחוף" אותו לצד הימני של המסך. הבעיה, שאיננו יודעים מה הרזולוציה של מסך המשתמש, כלומר, לא נדע כמה לדחוף אותו ימינה. לשם כך יש לבצע חישוב:
רוחב המסך (של המשתמש) פחות רוחב האייטם – זה המרחק שנרצה לדחוף שמאלה, כלומר להוסיף לאייטם ב-padding-left.
הבעיה שחישוב כזה יצמיד את האייטם ממש לגבול הימני של המסך, ויתעלם מריווח ימני שניתן לאלמנט עצמו (נניח ונרצה שהוא יופיע קבוע מהגבול הימני באמצעות padding-right.
לשם כך, יש לבצע מחדש את החישוב:
רוחב המסך (של המשתמש) פחות רוחב האייטם, פחות רוחב הריווח הימני שניתן לאייטם – זה יהיה הסכום שנרצה להרחיק את האייטם מהגבול השמאלי. חישוב כזה גם יבטיח כי כל אייטם יופיע לבד ובאופן מלא על המסך (ולא יופיעו שניים או יותר).

חישוב הריווח השמאלי לאייטם

חישוב הריווח השמאלי לאייטם

rtlScroll.js

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

בהתייחס לקוד הדוגמה שלמעלה, הקריאה תהיה כזו

$('#container').rtlScroll();

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

הערה חשובה: הגלילה מימין לשמאל (כאשר האתר הוא ב-RTL) לא עובדת בIE9 (ובטח גם בחבריו האפילו יותר מפגרים ממנו). לי אישית לא ממש אכפת ושמיקרוסופט יטפלו במשתמשים שלהם, לי נגמרה הסבלנות לנסות להתאים אתרים לדפדפנים המחורבנים שלהם.

אתר עמוד אחד בוורדפרס – הרצאה בוורדקמפ 2011
2 בספטמבר 2011 – 14:00 | 12 תגובות
אתר עמוד אחד בוורדפרס – הרצאה בוורדקמפ 2011

כנס WordPress, וורדקמפ 2011, יתקיים ב-12 בספטמבר בירושלים. בכנס לצד מרצים מצויינים, אעביר גם אני הרצאה (שהולכת להיות מאד טכנית). מקווה לראות אתכם שם (לכו להרשם)

אתרי עמוד אחד
טרנד מאד נפוץ כיום בבניית אתרים, הוא אתר …

מבנה ה-URL של YNET – למה הוא כל כך מכוער
16 ביוני 2011 – 10:39 | 33 תגובות
מבנה ה-URL של YNET – למה הוא כל כך מכוער

אני מניח שהקוראים כאן רואים לפחות פעם ביום את הדף הראשי של ynet ובוודאי חלק גדול מהקוראים תהה על משמעות ה-URLים הבלתי ניתנים לפיענוח של ynet. הנה הסבר קצר.
האתר ynet (ושאר אתרי ידיעות: כלכליסט, xnet) משתמשים …

החיים באילוסטרציה – פוסט יום העצמאות
9 במאי 2011 – 23:39 | 19 תגובות
החיים באילוסטרציה – פוסט יום העצמאות

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

икони

צנוזרה על מילים בדומיינים – טורקיה זה כאן
1 במאי 2011 – 9:00 | 13 תגובות
צנוזרה על מילים בדומיינים – טורקיה זה כאן

במדור המחשבים ב-Ynet כותבת שלי דובילנסקי כי בטורקיה הועלתה הצעה לצנזורה על מילים בדומיינים, מילים כגון עירום ו-Gay "טורקיה: כתובות אינטרנט יצונזרו?".
דובילנסקי מצטטת פעיל רשת טורקי הטוען "לששום ממשל אין את הזכות להחליט שפעולה כלשהי …

עדכון קובץ CSS מקומי מתוך FireBug
15 באפריל 2011 – 16:37 | 15 תגובות
עדכון קובץ CSS מקומי מתוך FireBug

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

לפי גוגל טרנדס: מה היו האירועים החשובים באמת באח הגדול
13 במרץ 2011 – 23:53 | 4 תגובות
לפי גוגל טרנדס: מה היו האירועים החשובים באמת באח הגדול

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

119 queries in 0.271 seconds.