Tagged in: בניית אתרים

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

אלמנטור בילדר

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

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

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

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

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

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

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

האלמנטור !!!

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

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

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

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

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

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

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