חיפוש

מה זה עמוד דינמי – Dynamic Web Page – ומה היתרונות שלו?

עודכן ב: 13 נוב 2019

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


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


עמוד דינמי [Dynamic web page] הוא בעצם עמוד אחד בודד, שמתחבר למאגר הנתונים [Data Base] של האתר שלנו. אנחנו מעצבים עמוד אחד בלבד, ומשתמשים בו כדי להציג בכל פעם תוכן שונה, תוך שמירה על עיצוב זהה.

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

לפני שנמשיך, אני רוצה שנדבר בשפה אחת, ולכן חשוב לי מאד להזכיר ולהבהיר:


המילה "תוכן" מתייחסת לכל האלמנטים שיש בעמוד: מלל, תמונות, איורים, כפתורים, סרטונים, טבלאות, טפסים וכו' ...

המילה "עיצוב" מתייחסת לפריסה של האלמנטים ולהצגה הויזואלית שלהם – לנִרְאוּת. למשל: כותרת ראשית גדולה נטויה בצבע ורוד. תמונה קטנה בצד ימין של הקנבס. סרטון בסטריפ התחתון קרוב לפוטר, וכו'.


דוגמא לתוכן [= כותרת ראשית]:


מה זה עמוד דינמי – Dynamic Web Page – ומה היתרונות שלו?


דוגמא לעיצוב [= הנִרְאוּת של התוכן]: פונט נטוי מודגש בצבע ורוד


מה זה עמוד דינמי – Dynamic Web Page – ומה היתרונות שלו?


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

אבל מעבר ל"חיסכון" בצורך בעיצוב של כל עמוד בנפרד, יש לעמוד הדינמי יתרונות רבים נוספים:

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


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


כך נראה מסך העריכה "מאחורי הקלעים" של עמוד דינמי באתר שלי - עמוד "הדרכות וקורסים".



וכך מוצג אותו העמוד לגולשים בו: - הדרכות וקורסים

צילומי המסך האלה מציגים את "השינויים" במלל, בתמונות ובכפתורי הפעולה. ה"שינויים האלה" נשאבים לתוך קונטיינרים {מכלים] מתוך מאגר הנתונים [Data Base] של האתר.


אני יודעת שזה קצת מבלבל, ולכן אנסה להציג את הנושא בשפה פשוטה ככל האפשר:


נניח שיש לנו אתר להאזנה למוסיקה, בו אנחנו מאפשרים לגולש להקשיב למוסיקה, המחולקת למדורים מסויימים. נניח: מוסיקה קלאסית, מוסיקת פופ, מוסיקה ים-תיכונית וכד'.

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


ואפשר גם וגם [גם לפי סוג המוסיקה וגם לפי היוצרים] - כלומר: הגולש יוכל לבחור את סגנון המוסיקה וגם את היוצר / המבצע על פי טעמו.


דוגמא נוספת:


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

אנחנו מאפשרים לו לבחור בין לימודי הנדסה, משפטים, או שיווק.

הבחירה של הגולש תקבע אילו נתונים יוצגו לו בשלב הבא.


לדוגמא:

  • אם הגולש בוחר בלימודי הנדסה, יוצג לו מסלול מקוצר של חודשיים, בעלות של 1,000 ₪.

  • אם בחר בלימודי משפטים – יוצג לו מסלול של שנה בעלות של 2000 ₪

  • ואם בחר ללמוד שיווק – יוצג לו מסלול של חצי שנה בעלות של 1500 ₪.

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


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


דוגמאות לשימושים שונים בעמודים דינמיים:


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


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

תוכלו לראות את זה בלינק הזה - משחקי ילדות


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


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


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


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


למשל – באתר שלי יצרתי עמוד דינמי להרצאות דיגיטליות – כך נראה ה-URL של העמוד הדינמי:


https://www.wordswales.com/digital-lecture


יתרונות נוספים של של עמודים דינמיים:


כיוון שעמוד דינמי "מלקט" את התוכן מה-D.B, ו"שומר" על עיצוב אחיד של העמודים:

  • היתרון העצום של עמוד דינמי הוא בכך שאין סוף לעמודים שהוא יכול להציג [או להכיל], העמודים לא מוצגים באתר בתוך תת קטגוריה ארוכה כאורך הגלות, אלא במסד הנתונים של האתר, ולכן "האיחסון" שלהם לא מכביד על האתר.


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


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


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


  • עמודים דינמיים הם רספונסיביים [כלומר: מותאמים אוטומטית למכשירי המובייל] ואין שום צורך לבצע עריכה / עיצוב שלהם למכשירי המובייל השונים.


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


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


  • כל התכונות האלה הופכות את חוויית המשתמש וחוויית הגלישה באתר למשובחות. כך שהעמודים הדינמיים תורמים לשיפור חוויית משתמש [UX] באתר שלנו.





0 צפיות
  • Instagram  - טווה מילים
  • YouTube  - טווה מילים
  • Facebook טווה מילים

טווה מילים בונה אתרים שבונים עסקים

פתוח: א' - ה' מהשעה 9:00 עד 18:00 

לקבלת הצעת מחיר מדוייקת

א' - ה' מהשעה 9:00 עד 18:00 רצוף

 מודיעין מכבים רעות עמק האלה 255

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

gtag('set', {'user_id': 'USER_ID'}); // Set the user ID using signed-in user_id.