Single page website2
-
Upload
efi-petilon -
Category
Documents
-
view
183 -
download
3
Transcript of Single page website2
![Page 1: Single page website2](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a0d2051a28ab60108b46f4/html5/thumbnails/1.jpg)
Single Page Website
דור ברונפן
אלינה גרשון
מאיה סינאיוק
![Page 2: Single page website2](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a0d2051a28ab60108b46f4/html5/thumbnails/2.jpg)
עמוד אחד.
גלילה פנימית.
חוויה ויזואלית אינטואיטיבית.
כל הקוד נטען בפעם הראשונה .
אין טעינה מחדש במהלך הגלישה.
?מה זה
![Page 3: Single page website2](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a0d2051a28ab60108b46f4/html5/thumbnails/3.jpg)
.קל לניווט הודות לעיצוב הפשוט וכפתורי הניווט הברורים√
. מעביר את מסר העמוד בצורה ברורה√
.איכות על פני כמות –עיצוב √
.קל יותר לתיחזוק√
.מכיוון שאין טעינה מחדש, ניצול נמוך של רוחב הפס√
יתרונות
![Page 4: Single page website2](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a0d2051a28ab60108b46f4/html5/thumbnails/4.jpg)
.כל התכנים נמצאים בעמוד הראשי√
קל יותר למנוע החיפוש לסרוק את –אין דפים פנימיים √
.האתר
פחות אחוזי נטישה הודות לכך שהגולש רואה את כל התוכן √
.בכניסה הראשונה
SEOיתרונות
![Page 5: Single page website2](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a0d2051a28ab60108b46f4/html5/thumbnails/5.jpg)
xכי אין חלוקה לעמודים, דאטה לכל חלק באתר-אין מטה .
xאין קישורים פנימיים בין דפי האתרים .
x מאיט את הטעינה הראשונית וגם את –יותר " כבד"העמוד
. סריקת מנועי החיפוש
SEOחסרונות
![Page 6: Single page website2](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a0d2051a28ab60108b46f4/html5/thumbnails/6.jpg)
דגשים ליצירת אתר
![Page 7: Single page website2](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a0d2051a28ab60108b46f4/html5/thumbnails/7.jpg)
מיקוד
עמוד יחיד לא אמור , לאתר יש מטרה ואין צורך לסטות ממנה . להיות עשיר בתוכן
![Page 8: Single page website2](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a0d2051a28ab60108b46f4/html5/thumbnails/8.jpg)
עיצוב הדף כך שידגיש את הנקודה המרכזית
להדגיש תוכן בצבע וכל דבר אחר , לשחק עם גודל הפונטים . שימשוך את העין לנקודה המרכזית
![Page 9: Single page website2](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a0d2051a28ab60108b46f4/html5/thumbnails/9.jpg)
הבהרת הניווט
המשתמש חייב לדעת כי הוא , במצב בו יש קישור חיצוני
יש להשתמש באייקונים מיוחדים בכדי . יופנה לאתר אחר . להבהיר שמדובר בקישור חיצוני
![Page 10: Single page website2](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a0d2051a28ab60108b46f4/html5/thumbnails/10.jpg)
להתפרע עם העיצוב
בכדי להתבלט , אתרים בסגנון הם מעין מודעות פרסומת . ולהיזכר האתר חייב ליצור רושם
![Page 11: Single page website2](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a0d2051a28ab60108b46f4/html5/thumbnails/11.jpg)
לקודד
אנימציות . חווית המשתמש היא קריטית באתרים כאלהאך עדיין צריך , ישדרגו את האתר jQueryאו AJAXמבוססות
הודעות שגיאה , טפסים, התנהגות לינקים: לזכור את הבסיס . ויישור האתר במרחב
![Page 12: Single page website2](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a0d2051a28ab60108b46f4/html5/thumbnails/12.jpg)
דוגמאות קוד
![Page 13: Single page website2](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a0d2051a28ab60108b46f4/html5/thumbnails/13.jpg)
גלילה אופקית
scroll.zip-rtl-http://ataze.info/scrolling/hoizontal
-internal-to-/scroll07/03/2012http://speckyboy.com/ jquery-with-link
![Page 14: Single page website2](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a0d2051a28ab60108b46f4/html5/thumbnails/14.jpg)
תמונות נעות
-to-http://blog.spoongraphics.co.uk/tutorials/how website-portfolio-page-single-own-your-build