משה סייטס

משה סייטס

מפתח אתרי אינטרנט

מומחה וורדפרס, ווקומרס, אלמנטור, ותוספים.
מפתח HTML CSS

השירותים שלנו

טופס הזמנת שירות
ויצירת קשר

פרופיל

קטגוריות פעילות בפורום

כלים שימושיים

תגיות מורחבות

Notifications

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

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

  5. לכל שאלה יש לפתוח נושא חדש, ואין להמשיך שרשור אחד לנושא אחד, גם אם התעוררה בעיה כתוצאה מהבעיה הקודמת. דבר זה שומר על נראות הפורום, וכן מועיל למשתמשים לחפש אחר כך.
  6. תמיכה טכנית וייעוץ שלא דרך הפורום ניתנת בתשלום. הודעה זו מהוה הסכם מראש על כך.
  7. נשמח לקבל הצעות ייעול, שיפורים, הצעות לפיתוח ועיצוב האתר, ודיווח באגים כאן.
  8. אין לכתוב באתר נושאים השנויים במחלוקת או פרסומות מכל סוג שהוא.
    אין לדון באתר על גורמים צד ג' לטוב ולמוטב.
    הודעות הנכללות בחשש ההגבלות הנ"ל לא יאושרו.

שכבת מצגות בעיצוב אתרים

שיתוף ב facebook
שיתוף ב twitter
שיתוף ב whatsapp
שיתוף ב email

Table of Contents

0
(0)

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

הצד המאפשר אינו מכיל רק סוג קוד אחד, אך הוא כולל סוגים שונים. ראשית כל זהו קוד HTML, היוצר מסגרת בה ניתן להטמיע CSS (Cascading Style Sheets) או שפות תכנות כגון PHP. במילים אחרות, HTML משמש לבניית התוכן בדף, בעוד ש- CSS מאפשר טיפול בתוכן האתר שלך ובסגנון שלו בנפרד ושפות תכנות מעבירות הוראות למחשב.

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

קוד המצגת כולל:

  • HTML ו- HTML 5
  • CSS
  • שפות סקריפט כגון JavaScript, jQuery ו- Ajax.

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

1. יצירת ממשק מולטימדיה

עיצוב מונפש וסוחף מושג באמצעות שימוש ב- Adobe Flash או בשילוב של HTML, CSS ושפות סקריפט אחרות המעורבות יחד.

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

HTML 5, המהדורה האחרונה של HTML עשתה צעד ענק קדימה מבחינת יכולות עיצוב שכבת המצגת. הוא מספק ערכת כלים משופרת של אלמנטים ומאפיינים ומודה על הדרך בה מעצבים עובדים ומשתמשים באלמנטים מסוימים. לדוגמה, זה מאפשר למעצבים להגדיר קבוצת ניווט עם 'nav' החדש במקום אלמנט 'div' ששימש בעבר. תכונות התמיכה בעיצוב האנימציה והאינטראקציה של HTML5 השתפרו בצורה מרשימה, והעובדה ש- HTML5 נתמך בדפדפנים ניידים כמו Safari של אפל פתחה את אפשרויות עיצוב האתרים.

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

פלאש היא אנימציה וטכנולוגיה אינטראקטיבית המאפשרת ליצור ממשק סוחף ביותר. באשר להטמעה של אלמנט Flash בעיצוב אתרים התהליך הוא די פשוט. הרכיב שפותח ב- Adobe Flash מיוצא כקובץ SWF עצמאי ובאופן זהה לתמונה, קובץ ה- SWF מוטבע בתוך דף HTML. הקובץ .swf יכול להיות חלק קטן מהעמוד או שהוא ממש יכול להיות הממשק כולו. יש לשים לב שמשתמשים חייבים להתקין את נגן הפלאש בדפדפן שלהם על מנת לצפות בדף שמציע רכיב .swf.

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

HTML5 – חלופת פלאש

כאמור, שילוב של HTML 5, CSS וקוד jQuery מאפשר כעת להעתיק אתרי אנימציה שהיו אפשריים רק בפלאש. באמצעות אלמנט 'בד' קל הרבה יותר מתמיד לעצב ממשק משתמש עשיר ומונפש. רוב הדפדפנים המודרניים למחשבים שולחניים ולניידים תומכים בתקן HTML5 המאפשר ליצור עיצוב שעובד על פני מספר רב של פלטפורמות.

1.1 DHTML, JavaScript, jQuery ו- Ajax

זכור כי HTML פשוט מהווה מבנה לתוכן. שפות סקריפט כגון JavaScript, Ajax ו- jQuery השולטות בהתנהגות רכיבי ממשק המשתמש והתוכן המוצג בדף שזורות במבנה זה.

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

jQuery היא צורה פשוטה של ​​JavaScript המתמקדת באינטראקציות הנפוצות בין JavaScript ל- HTML. הוא נועד להקל על הניווט בדף אינטרנט. jQuery היא תוכנת קוד פתוח חינמית וזמינה באופן מקוון. באפשרותך להעתיק ולהדביק סקריפטים מוכנים בדפי האינטרנט שלך ולהתאים אותם לשרת את מטרותיך. באמצעות jQuery, ניתן ליצור אפקטים של אנימציה ועיצוב אינטראקציה עם הרבה פחות קוד ממה שיידרש עם JavaScript.

דוגמאות לאפקטים של jQuery:

  • הרחבה וקריסה לפי חלונות
  • סיבוב תמונות קרוסלה
  • זום תמונה בעת התהפכות וכו '.

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

1.2 אפקטים גרפיים מתקדמים של CSS

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

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

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

היתרונות של שימוש ב- CSS עבור ממשק המשתמש שלנו כוללים:

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

1.3 עיצוב רספונסיבי

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

תכנון רספונסיבי אפשרי הודות לחלק 'שאילתות מדיה במפרט CSS3. הוא מזהה את גודל הדפדפן ואומר לדף לטעון את גיליון הסגנונות המתאים, למשל 'widescreen.css' או 'mobilescreen.css'. זה אפשרי מכיוון שגיליונות סגנון שונים מכילים מערכות פריסה שונות, גדלי גופנים והגדרות מיטוב תמונה.

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

פורסם על ידי Bart Dom
אין לנו אחריות על המידע בפוסט זה

כמה שימושי היה הפוסט?

לחץ על כוכב כדי לדרג אותו!

דירוג ממוצע 0 / 5. ספירת קולות: 0

אין הצבעות עד כה! היה הראשון לדרג את הפוסט הזה.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

עדכונים נוספים:

שאל את השאלות שיש לך בוורדפרס, וקבל את המידע שאתה צריך!

X
wpChatIcon
X

הוסף את שאלתך

האתר בבניה

הכניסה ליוצרים בלבד

כבר רשום?