All posts by ליאורה זכאי

26 שנות ניסיון של בניית אתרים - אתרי אינטרנט לעסקים קטנים ובינוניים הוראת בניית אתרים במכללות האוניברסיטאיות בצפון.
אלמנטור בילדר

אלמנטור בילדר לחיים קלים

האם לפעמים חשבתם כמה קל או קשה לבנות את האתר לפי עיצוב  שלי.. של מעצב…??

הזמנים השתנו .. המון… פעם היה צריך לדעת הרבה קוד.. הרבה שפות קוד.

היום הכל נעשה פשוט יותר וכך גם בניית האתר לפי עיצוב מותאם מראש.

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

לא מזלזלת ביכולות הפרו.. ומאוד ממליצה.. אבל תתחילו בלנסות עם החינמי..

בכל מקרה.. הנה הקישור לבילדר, קיראו.. דפדפו..

האלמנטור !!!

ואם כבר החלטתם על הבילדר המופלא הזה… הנה כמה עצות זהב..

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

    הגדרות בסיס לאתר בעורך

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

    בחירת נתונים מהנתונים גלובלים

    הגדרות בסיס לאתר בעורך

פודקאסטים כמנוף תוכן

פודקאסטים – למה?

פודקאסטים כמנוף תוכן

למה בכלל פודקאסט?

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

אבל כעת… גם זה לא מספיק…

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

בהחלט ממליצה…

אז ככה…

יש כאלה האהובים עלי במיוחד…

  • עושים שיווק של קובי גור שצולל כל שבוע לנושא אחר בשיווק אינטרנטי והוא בהחלט מומחה בתחום – https://www.osimhistoria.com/osimshivuk
  • לבן על שחור, שידורים על נושאים שיווקיים, פירסומיים ומיתוג. ממש מעניין.
    https://roy-ribak.co.il/mypodcast/
  • אתר האוסף פודקאסטים מכל הנושאים, תוכלו לבחור את מה שמעניין אתכם –  https://podcastim.org.il//
  • אוסיף עוד במהשך…

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

לטופס עם חתימה

טופס עם חתימה

תמיד אמרתי.. אין ארוחות חינם..
עדיין לא הצלחתי למצוא פלגאין חינמי לביצוע טופס עם חתימה דיגיטלית שתופס…

המחירים לא נמוכים.. אבל שווה בדיקה..:)

הנה כל מה שצריך וגם סרטון הסבר…

לכן על זה…

Photo by Igor Miske on Unsplash

תמונות חינמיות ברשת… וגם לקניה שפויה

תמונות חינמיות ברשת.... וגם לקניה שפויה...

אחת הבעיות הגדולות היא למצוא את התמונה המתאימה… וכשכבר מצאנו אותה… המחיר בשמיים… שנתי או סתם מוגזם…

אז הנה כמה אפשרויות נוספות..

חלק מהאתרים מאפשר לקחת פשוט. בחינם וללא כל התחייבות את התמונות.

חלק מבקש שרק תוסיפו קרדיט – שאגב מגיע לגמרי ליוצר..

וחלק מאפשר לקנות חבילות במחיר ממש שפוי ונכון….

אהבתם??? שתפו… כתבו מה דעתכם… אם תרצו עוד דברים? אני פה בשבילכם…

 

Beautiful Free Images | Unsplash Unsplash אתר עם תמונות ברזולוציה גבוהה ובחינם… אומר שקרדיט לא חובה אבל יוערך מאוד.
 יש להם חבילות חינמיות ואם תרשמו לאתרתקבלו כל חודש תמונה איכותית חינם…
 המאגר הכי הכי שיש לתמונות חינמיות…. שווה ממש.
Free Stock Video Footage HD & 4K Clips Royalty-Free Videos מאגר וידיאו חינמי ומגוון
 מקור גרפי וקטורי לכל דורש… מבקש רק קישור ליוצר..
מאגר חינמי משוחרר מזכויות יוצרים לחלוטין ומתעדכן כל שבוע.
 תמונות ואיקונים חינם
 לגמרי חופשי רזולוציה גבוהה.
 חופשי לגמרי. לא  מבקש כלום
 לגמרי חופשי רק שימו לב לשורה העליונה – שם יש פרסום של תמונות בתשלום ובלחיצה אתם מועברים לאתר בתשלום.
 עורך דומה לפוטושופ – אונליין ברשת אפשר לעשות איתו די הרבה.. מפתיע לטובה..:)
 הרבה תמונות חופשיות – רק תשרשמו.. לא בתשלום.
 מאפשר הורדת תמונות חופשי אבל מבקש להקפיץ פרסומות – יש לבטל את חסימת הקופצים.
SplitShire – Free stock photos מאפשר הורדת גדלים שונים – לא דורש אפילו רישום.. חופשי לגמרי לכל מטרה.
 המאגר בתשלום האהוב עלי.
פותחים חשבון – נרשמים. אפשר לאסוף תמונות לפי פרויקט ולהציג ללקוח. מכירת חבילות בתשלום סביר לגמרי.
 
מאגר מעניין – בתשלום לפי גודל התמונה
בניית אתרים בחיפה והצפון - זכאי קום 052-6551414

html 5 הדרכה

html 5 הדרכה

נתחיל בתזכורת לגרסת html4 הקיימת באתר ההדרכה שלנו שם תמצאו את התגים הבסיסיים וכיצד משתמשים בהם. כמה אלמנטים מהגרסה הישנה יוצאים משימוש או משנים את יעודם בגרסת ה5 אך לפיw3c שהם המכתיבים את הסטנדרטים ברשת – יש לנו מספיק זמן להפנים ועדיין להשתמש בגרסת ה 4 , במקרה הקרוב יותר עד שנת 2014 ובהכרזה האחרונה מבטיחים סיום מוחלט של בניית התקן עד לשנת 2022. יש למה לצפות..:)

מכיוון שכמובן לא אני כותבת התקן ולא אני המפרשת אותו.. אני מביאה לכם את הפירוש המעשי שלי הלקוח מהמקורות הבאים-

הדרכה זו יוצאת מההנחה שאת התגים הבסיסיים למדתם ואתם יודעים. מכאן נמשיך ל-:

  1. תגי המסמך והגדרת הדף
  2. התגים החדשים ומה יעודם.
  3. שימוש נכון בסגנונות
  4. טיפול במדיות השונות.
  5. נענה על שאלות הבאות מכם.

נתחיל..

התגים החדשים ב html5 – שימו לב – יש לעקוב אחר השינויים בהגדרות ובהתפתחות באתר הרשמי.

1 – המסמך

התג הפותח של המסמך המודע על גרסת השפה יהיה כעת רק – <!doctype html> שימו לב לסימן הקריאה שבסוגריים המשולשים.

*- תג פותח לדף יהיה <html> כרגיל הכל התקצר ונהיה פשוט יותר.

2- התגים החדשים וייעודם

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

התגים הבסיסיים של מבנה הדף נישארים.. כלאמר – מבנה דף בסיסי יראה כך

<!doctype html>
< html>
< head>
< meta charset="UTF-8">
< title>Untitled Document</title>
< /head>

<body>
< /body>
< /html>

ואז נוספו התגים הבאים כדי לסדר טוב יותר את המסמך-

  1. הפותח את המסמך בחלק הבודי יהיה ההדר-
    <header>
    בהדר יכלל כל המידע השייך להכרות עם הנושא שלנו. מותר לכלול בהדר גרפיקה וטקסט, הדרים המוכרים לנו כ h1-6 ואפילו טבלת מידע על העסק שלנו

    <header>
            <h1>HTML5Doctor.com</h1>
    </header>
  2. <h1-6> אילו ההדרים אותם אנו מכירים, גודלם בהתאם לחשיבותם ומכאן ש1 הוא הגדול והחשוב יותר והיתר בסדר יורד.
    עד כה טוב היה לשים h1 פעם אחת לדף כדי להציג את כותרת הדף החשובה. ואחריה את תתי הכותרות בהתאם.
    כעת כשהדף מחולק לסקשנים ולארטיקלים וכל אחד הוא נושא בפני עצמו – יש לתת כותרת h1-6 לכל חלק בניפרד ואין זה נחשב לכפילות או הורדת הערך של הכותרות. להפך. הסמנטיקה הטובה היא לתת לכל מחלקה את הכותרת החשובה שלה. בתנאי שאכן חילקנו את הדף למחלקות ולארטיקלים.
    אין צורך לתת דוגמה – ובכל זאת..
    <body>
    < h1>Let's call it a draw(ing surface)</h1>
    < section>
    < h1>Diving in</h1>
    < /section>
    < section>
    < h1>Simple shapes</h1>
    < /section>
    < section>
    < h1>Canvas coordinates</h1>
    < section>
    < h1>Canvas coordinates diagram</h1>
    < /section>
    < /section>
    < section>
    < h1>Paths</h1>
    < /section>
    < /body>
  3. <hgroup> משמש לצרף יחד לקבוצה כמה כותרות יחד באותו הסקשן.

    <hgroup>
    < h1>כותרת חשובה ראשונה</h1>
    < h2>כותרת חשובה שניה – מחוברת אליה בגרופ</h2>

    </hgroup>

  4. <nav> זהו החלק השמור לתפריט האתר.
    ההגדרה אומרת שבחלק זה יופיעו קישורים המובילים להתניידות באתר. הכוונה כמובן לתפריט ולא סתם מקבץ קישורים.
    <nav>
            <ul>
                            <li>Nav Link</li>
                            <li>Nav Link</li>
    
                            <li>Nav Link</li>
            <ul>
    </nav>
  5. <article>
    הכוונה אינה לכתיבת מאמר אלא לחלק שבו יש תוכן עצמאי. התוכן העצמאי יכול להכיל :
    טופס לשליחה, מאמר ממגזין,פוסט בבלוג או כל חלק תוכן עצמאי. תג הarticle יכול להיות מקונן (שוכן בתוך) חלק אחר של הדף, כמו למשל sction ואז הוא מהווה חלק עצמאי של אותו החלק אך חייב להיות קשור אליו רעיונית. (ראה הסבר במקור)
    <article>
            <header>
                    <h4><a href="#comment-2" rel="bookmark">Comment #2</a>
                    by <a href="http://example.com/">שם כותב המאמר</a></h4>
    
                    <time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time>
            </header>
            <p>
    כאן כל התוכן והמאמר באריכות ובפירוט.</p>
    </article>
    
  6. <section> אלמנט זה מציין חלק מובנה בדף, בנוי מנושא שלם הכולל כותרת משלו, תוכן ואפילו פוטר משלו.
    באתרים דף הבית למשל יכול להכיל כמה סקשנים שכל אחד מייצג תחום עיסוק אחר של העסק.
    בקןד נראה את המבנה כך
    <section>
    <h1>Level 1</h1>
            <section>
    
            <h1>Level 2</h1>
                    <section>
                    <h1>Level 3</h1>
                    </section>
            </section>
    
    </section>
  7. <footer> הוא החותם את המסמך ומכיל בתוכו את כל מה שתרצו לשים כסיומת. בדרך כלל פרטי התקשרות קצרים וזכויות יוצרים.
  8. <aside>מייצג חלק בדף הקשור לתוכן הדף אך יכול להחשב ניפרד ממנו. חלק זה בדרך כלל היא הבר הצדדי.
    <aside>
            <h2>Blogroll</h2>
            <ul>
                            <li><a href="#">My Friend</a></li>
    
                            <li><a href="#">My Other Friend</a></li>
                            <li><a href="#">My Best Friend</a></li>
            </ul>
    
    </aside>
    או ראו בקישור הזה
  9. <abbr> מייצג קיצור- ראשי תיבות
    מגיע עם title בו נרשום את הצירוף הארוך וזה יראה במעבר עכבר על ראשי התיבות המסומנות בדפדפנים אחדים בקו מנוקד תחתיו.
    The <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> started working on HTML5 in 2004.

    =
    The WHATWG started working on HTML5 in 2004.
    abbr-tag

  10. <audio> מייצג קול או הזרמת צלילים.
    הקבצים הניתמכים על ידי דפדפנים הם-

    Supported audio codecs:

    • Chrome 3+ supports .ogg and .wav
    • Firefox 3.5+ supports .ogg and .wav
    • Opera 10.5+ supports .ogg and .wav
    • Safari 4+ supports .mp3 and .wav
    <audio src="music.oga" controls>
            <a href="music.oga">Download song</a>
    
    </audio>
  11. <bdo> משמש להוראת הצגת כיוון כתיבה במקומי, למשל בתוך השורה או בתוך קטע בשפה העברית, כשדרוש קטע באנגלית יש להפוך את כיוון הקריאה – אז יש להשתמש בפקודה זו.
    <p><bdo dir="rtl">Don't cheat by reading this in a mirror!</bdo></p>
  12. <figure> משמש להצגת אלמנט – תמונה בדרך-כלל כשהמשכה יש טקסט נלווה כהסבר.
    הטקסט הוא כהערה או פירוש לאלמנט אליו הוא מצורף. שני החלקים, האלמנט והמצורף אליו מקובצים יחד לכאלמנט אחד אותו אפשר להזיז לצד אחר במסמך או למסמך אחר ללא הפרעה בתוכן הדף הזורם.
    <figure>
    < img … > (or video, table etc)
    < figcaption>A rabid unicorn goring a fairy.</figcaption>
    < /figure>
  13. <video> משמש להצגת וידיאו עם נגן חדש מובנה, התג יכול להכיל בתוכו עוד מידע על הסרט.
    <video src="video.ogv" controls poster="poster.jpg" width="320" height="240">
    <a href="video.ogv">Download song</a>
    </video>

 

הנה חלק מרשימה עליה דיברתי- תוכלו להקיש על תג ולקבל את איפיונו ושימושו- באנגלית.

Elements introduced in HTML5

There has been a few elements introduced in HTML5. Some of them were imported from XHTML2, others from large statistical surveys on made by Google, Opera and other people. The analysis of class names and id names helped defining what were the most common semantic patterns. These new elements are not yet completely imported in all browsers at this time.

בניית אתרים בחיפה והצפון - זכאי קום 052-6551414

קישורים חשובים לבניית אתרים

קישורים חשובים לבניית אתרים

קישורים חשובים לבניית אתרים

כל הקישורים שלפנינו הם קישורים לכלים הדרושים לכל בונה אתרים ועוזרים לו בעבודה.

עיצוב בגריד

- בניית אתרים בחיפה והצפון - זכאי קום 052-6551414css3

מה זה css ואיך אוכלים את זה?

מה זה ואיך זה ב css?

תמיד  אני נישאלת אותה שאלה.. כמה זה בסטייל? או למה הכוונה ב….

אז הנה קישור לדף שיסביר …

ועוד קישור עם כל התגים בסטייל – שווה להציץ

em – הדגשה יחסית לגודל הפונט

ex- יחסי לגובה הפונט הקיים באלמנטֿ

ch - יחסית לגודל סיפרה 0

rem - גודל הפונט המוגדר במקור לדף

vh – יחסי ל גובה viewpoint – 1  השינוי יהיה באחוזים !!!

vw- יחסי לרוחב viewpoint - 1  השינוי יהיה באחוזים !!!

unitrelative to
emfont size of the element
exx-height of the element's font
chwidth of the "0' glyph in the element's font
remfont size of the root element
vh1% of the viewport's height
vw1% of the viewport's width
vmin1% of the viewport's smallest dimension
vmax1% of the viewport's largest dimension
 
בניית אתרים בחיפה והצפון - זכאי קום 052-6551414

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

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

לפני הכל הנה הקישור למקור המידע

https://www.isoc.org.il/freedom-of-internet/accessibility/legal-aspects-accessibility

 

והכי חשוב…

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

http://www.negishim.org/התקנת-קוד-נגישות.html

קצת ממה שלמדו ואמרו אחרים…

שווה בדיקה…

https://www.isoc.org.il/event/websites-accessibility

 

אתרים כיום חייבים להיות בנויים על פי תקנים.. זה זה כולנו יודעים..

מעבר לתקני הקוד – התגים.. יש תקן חשוב במיוחד והוא תקן הנגישות…

כשאני מלמדת את הנושא אני משווה אותו לסללילת שביל לעגלת נכים.. חשוב !

ובכן איך ואיפה לומדים על אילו?? הנה קישור להגדרת התקנים על נגישות

והנה תקציר הדברים פה:

רמה A

חלופה טקסטואלית לתוכן שאינו טקסט
ALT TAG  לתמונות
חלופה שמיעתית לCAPTCHA
עזרה בהזנת קלט
זיהוי אוטומטי של שגיאות קלט והתראה ממוקדת על השגיאה באמצעות טקסט (לדוג' שימוש בSPRY)
לספק הוראות מדויקות להזנת הקלט (לדוג' תיאור בLABEL)
חלופה למדיה המוקלטת מראש, וידאו או אודיו
קטע אודיו או וידאו יהיה בעל מנגנון עצירה, עוצמת הצליל וקצב ההשמעה
קטע אודיו – חלופה טקסטואלית
קטע וידאו – כתוביות
גמישות בהצגת התוכן בלי לאבד מידע
כותרת בעלת משמעות לכל עמוד
אין לעצב את הדף בצורה כמותית
סדר התוכן בעל משמעות
עיצוב ברור וקריא
תחביר תקין של קוד העמוד (HTML)
צבעים מנוגדים של הכתב והרקע
קישורים בעלי משמעות (אין להשתמש ב"לחץ כאן" וכד')
כל קישור, כפתור או דבר דומה יכיל כמה אלמנטים עיצוביים
לאפשר שליטה על גלילה, הבהוב ותנועה אוטומטיים
יש להמנע מעיצוב באופן הגורם להתקפים אפילפטיים
לא יותר משלושה הבזקים בשנייה אחת
תכני טקסט קריאים ונהירים
יש להשתמש בפירורי לחם (BREADCRUMBS)
רישום של שפת הממשק והתוכן בקוד העמוד
שליטה על האתר אך ורק באמצעות המקלדת
בלי דרישה לקצב הקלדה מסוים
אין להשתמש בהגדרת מוקד\פוקוס של המקלדת. מוקד המקלדת הוא האזור המסומן במסך הניתן להזזה באמצעות חיצי המקלדת, בדפי אינטרנט הוא אינו נראה באופן חזותי
הגדרת Tab index בעלת משמעות
משך זמן קריאה מספק של העמוד ללא ריענון אוטומטי
אפשרות שליטה על משך הזמן לקריאת העמוד (למעט אירועים בזמן אמת)
מנגנון שליטה על עדכונים אוטומטיים
רמה AA

(כוללת את כל המאפיינים של רמה A)

חלופה למדיה בשידור חי, וידאו או אודיו
כתוביות בשידור חי
קטע ווידאו המוקלט מראש בעל כתוביות עם תיאורי אירוע או תיאור בשמע של האירועים
עזרה בהזנת קלט
הצעות לתיקון השגיאה בהזנת קלט
תמיד יתבקש אישור הפרטים המוזנים בטופס לאחר מילואם על-ידי הגולש תוך נתינת אפשרויות התיקון המתבקשות
מתן הזדמנות לתיקון שגיאות קלט
מסמך המאפשר סקירה של הפרטים ואישורם
גמישות בהצגת התוכן בלי לאבד מידע
אפשרות לשינוי גודל של טקסט עד 200% ללא שימוש באמצעי עזר
עיצוב ברור וקריא
אין להשתמש בתמונות של טקסט
שימוש בכותרות (HEADINGS) ותוויות (LABELS) כדי לתאר את התוכן באתר
יחס ניגוד של הטקסט והרקע 5:1
תכני טקסט קריאים ונהירים
רישום בקוד על שינוי השפה בחלקים שונים של הדף
שליטה על האתר
אפשרות לאיתור עמוד באתר באמצעות מספר דרכים
ממשק האתר יאפשר מציאת מוקד המקלדת באופן חזותי
רמה AAA

(כוללת את המאפיינים של רמה A ורמה AA)

חלופה למדיה וידאו או אודיו
אין להשתמש בקטעי אודיו המשמשים כרקע אומנותי לתוכן האתר
ווידאו המוקלט מראש יהיה בעל תרגום לשפת הסימנים
תיאורים מורחבים בשמע לכל קטעים הווידאו
אודיו המשודר בחי יהיה בעל חלופה טקסטואלית
בקטע אודיו יהיה הבדל של 20 דציבלים בין קולות הרקע לדיבור הישיר אל המאזין
עיצוב ברור וקריא
יחס ניגוד של הטקסט והרקע 7:1

קישורים ששווה לדעת - בניית אתרים בחיפה והצפון - זכאי קום 052-6551414
- בניית אתרים בחיפה והצפון - זכאי קום 052-6551414pixlr-editor - online photoshop

במקום פוטושופ – עבודה ברשת – אונליין ובחינם

במקום פוטושופ – עבודה ברשת – אונליין ובחינם

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

https://pixlr.com/editor/

תהנו…