קהילת דיגיטל ואינטראקטיב

פורום קהילת אנשי המקצוע מתחום האינטרנט: מעצבי אתרים, מתכנתים ומפתחים, אנשי UX-UI, וכו'. הכתיבה בפורום הינה לחברי הקהילות המקצועיות של פרוג.
מנהלת הפורום: סיון
להצטרפות לקהילת מפתחי אתרי אינטרנט, הקש כאן
להצטרפות לקהילת ux-ui, הקש כאן

בניית אתרים וחוויית משתמש >> תוכן מקצועי

תיקי עבודות של עיצוב אתרים >> העבודות האחרונות, תהנו!

SHUGE שפרה כהן.png
SHUGE שפרה כהן 01.png
אומנות האופציות שפרה כהן.png
WhatsApp Image 2026-03-10 at 2.11.40 AM (1).jpeg
WhatsApp Image 2026-01-07 at 11.45.24 AM.jpeg
קלף קליין.jpg
בראש פתוח.jpg
מכון ספורנוקטן.jpg
לב גדול.jpg
בלוי ספרים.jpg
הצגת אתר תדמית משרד שמעוני5.jpg
WST השקעות נדלן בדובאי-3.png
WST השקעות נדלן בדובאי-2.png
WST השקעות נדלן בדובאי-1.png
WST השקעות נדלן בדובאי.png
הצגת פרוייקט ישראל דיזקינד 4.png
  • 253
  • הנה עוד מודעה לאנשי מקצוע:
    המשתמש: יצחק למפרט ממש מחפש מישהו מקצוען מהקהילה שלנו כאן:

    מפתח WordPerss לאתר חדשות דתי-חרדי - מפתח WordPerss לאתר חדשות דתי-חרדי

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

    לא מדובר באתר תדמיתי ובידע פשוט בוודרפס/אלמנטור, אלא בפיתוח ממש.
    העבודה היא -ב-
    תחזוקה ופיתוח, שיפור תהליכי עבודה, שנה ניסיון ב-MySQL' CSs, HTML, JAVA SCRIPT, PHP

    כ- 130 שעות חודשיות, סביבה צעירה.

    מנויי פרימיום בפרוג מרוויחים יותר!
    רוצו לשמוע עוד על הפרסום וצרו קשרים עסקיים

    בהצלחה!
    מערכת מנויי פרוג-פרימיום
    0 תגובות
    רק @נעמי. יכולה לחשוף אותי לדברים אלופים כאלו!


    תראו את זה
    DALIK SAMKAI
    מציג את האפליקציה הבאה:


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

    נסו את זה בשיחה הבאה שלכם בזום.

    http://www.blubbles.live/
    אפשר לראות כאן עוד על הרעיון:



    וכמובן קרדיט DALIK SAMKAI
  • 201
  • הנה עוד מודעה לאנשי מקצוע:
    המשתמש: י.רוז ממש מחפש מישהו מקצוען מהקהילה שלנו כאן:

    דרושה מעצבת אתרים - דרושה מעצבת אתרים

    דרושה מעצבת אתרים לאתר קטן בעל 4 מסכים.
    אודה לקבלת הצעות מחיר למייל yaelfe3279אין לכתוב כתובת מייל

    תודה.

    מנויי פרימיום בפרוג מרוויחים יותר!
    רוצו לשמוע עוד על הפרסום וצרו קשרים עסקיים

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

    1. ההיסטוריה של הגריד.
    2. גריד בדיגיטל.

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

    ~~~~~~~~~~~~~~

    גרידים בעיצוב אינטרנט וממשק משתמש כיום

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

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

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

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

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

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

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

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

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

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

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

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

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

    1. תכננו כיצד גריד קשור למכולה שלו [קונטיינר – הדיב שעוטף אותו]
    יוזף מולר-ברוקמן הדגיש בספרו "מערכות גריד" כי האופן בו גריד ממוקם בתוך העמוד - כיצד מסדרים את השוליים - יכול להשפיע רבות על ביצועי הגריד הן מבחינת פונקציונאלית והן מבחינה אסתטית.
    1597173439153.png
    2. אל תעצבו עם גריד – תעצבו את הגריד
    כשפותחים מסמך חדש לעיצוב פרסום או אתר, זה מפתה להתחיל עם הגריד "הרגיל" שלנו - אולי מספר עמודות שהיינו רגילים אליהן, או רוחב המרווחים בין העמודות שאנחנו תמיד משתמשים בהם. אבל כדאי להישאר על הנייר, ולקחת את הזמן כדי להבין לאיזה סוג גריד אנחנו זקוקים באמת לפרויקט שלנו. זה יכול לחסוך לנו להינעל על גריד שלמעשה אינו מתאים עבור הפרויקט שאנחנו עובדים עליו.

    1597173478794.png

    3. מקמו את ההתחלה והסיום של האלמנטים בשדה הגריד ולא במרווח שבין העמודות
    יש להשתמש ב gutter - המרווח הריק בין העמודות, רק כדי להפריד בין אלמנטים. טקסט וגרפיקה יכולים להשתרע על עמודות מרובות, כמובן - אך עליהם להתחיל ולהסתיים בקצה העמודה, לא ב gutter .
    1597173517835.png
    4. אל תשכחו ליישר לקו הבסיס
    לוודא שכל הטקסט בעיצוב מבוסס עמודות ידבק בקו בסיס קבוע יכול לעשות את ההבדל הגדול בתחושת ההרמוניה והארגון שבדף. יישור לקו בסיס לעיתים קרובות נעלם מהעין בעיצוב אתרים אך בעזרת תכנון קפדני ניתן להשיג זאת.
    1597173550436.png
    5. לעיצוב אינטרנט UI, כדאי לשקול להשתמש במערכת כמו גריד של 8px
    כיום העיצובים שלנו צריכים לעבוד ולהיראות על פני מגוון מכשירים ורזולוציות מסך. שימוש בממדים ומרווחים שהם כפולות של מספר בסיס עוזר להפוך את המעברים הללו לנקיים ושיטתיים. כיום מקובל להשתמש בגריד 4 פיקסלים או 8 פיקסלים, מכיוון שמשמעות הדבר היא שעיצובים יכולים להתאים בצורה מושלמת על מסכי רטינה: פיקסל אחד במסך ברזולוציה נמוכה הופך לגריד של 2 על 2 פיקסלים על מסך ברזולוציה גבוהה.
    1597173603285.png

    להלן כמה דוגמאות

    1597173633645.png
    Pixelot.de מאמץ באמת את הגריד, שומר על הקו אופקי והקו האנכי גלויים

    1597173662022.png
    42Angels.com מבוסס על גריד של 5 עמודות, אך משתמש גם ברקע פסיפס עדין כדי להשלים את המראה

    1597173697648.pngז
    DHCreative.com שומר את זה נחמד ופשוט


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





    function jeroen_sormani_change_city_to_dropdown( $fields ) {


    $city_args = wp_parse_args( array(
    'type' => 'select',
    'options' => array(
    'אלעד' => 'אלעד',
    'אשדוד' => 'אשדוד',
    'אשקלון' => 'אשקלון',
    'באר שבע' => 'באר שבע',
    'בית שמש' => 'בית שמש',
    'בני ברק' => 'בני ברק',
    'ביתר' => 'ביתר',
    'גבעת זאב' => 'גבעת זאב',
    'גבעתיים' => 'גבעתיים',
    'זכרון יעקב' => 'זכרון יעקב',
    'חיפה' => 'חיפה',
    'חצור' => 'חצור',
    'טלז סטון' => 'טלז סטון',
    'ירושלים' => 'ירושלים',
    'כרמיאל' => 'כרמיאל',
    'לוד' => 'לוד',
    'מודיעין עילית' => 'מודיעין עילית',
    'נתיבות' => 'נתיבות',
    'נתניה' => 'נתניה',
    'עפולה' => 'עפולה',
    'ערד' => 'ערד',
    'פתח תקווה' => 'פתח תקווה',
    'צפת' => 'צפת',
    'קרית אתא' => 'קרית אתא',
    'קרית גת' => 'קרית גת',
    'קרית מלאכי' => 'קרית מלאכי',
    'ראש העין' => 'ראש העין',
    'רחובות' => 'רחובות',
    'רכסים' => 'רכסים',
    'רמת גן' => 'רמת גן',
    'רעננה'=> 'רעננה',
    'תפרח' => 'תפרח',
    ),
    'input_class' => array(
    'wc-enhanced-select',
    )
    ), $fields['shipping']['shipping_city'] );

    $fields['shipping']['shipping_city'] = $city_args;
    $fields['billing']['billing_city'] = $city_args; // Also change for billing field

    wc_enqueue_js( "
    jQuery( ':input.wc-enhanced-select' ).filter( ':not(.enhanced)' ).each( function() {
    var select2_args = { minimumResultsForSearch: 5 };
    jQuery( this ).select2( select2_args ).addClass( 'enhanced' );
    });" );

    return $fields;

    }
    add_filter( 'woocommerce_checkout_fields', 'jeroen_sormani_change_city_to_dropdown' );

    add_action( 'wp_enqueue_scripts', 'gallery_scripts', 20 );
  • 191
  • הנה עוד מודעה לאנשי מקצוע:
    המשתמש: שמש ממש מחפש מישהו מקצוען מהקהילה שלנו כאן:

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

    דרושה מתרגלת עם נסיון בוורדפרס ואלמנטור לעזרה לבנות קורס בניית אתרים
    פעם בשבוע, שעות 15:30-17:30 בירושלים
    ימי שני העבודה מיידית החל מהשבוע (מחר)
    במידה ואת מתאימה, שלחי לי הודעה באישי
    עם מס' נייד וקורות חיים.

    מנויי פרימיום בפרוג מרוויחים יותר!
    רוצו לשמוע עוד על הפרסום וצרו קשרים עסקיים

    בהצלחה!
    מערכת מנויי פרוג-פרימיום
    0 תגובות
  • 347
  • טוב לא באמת מאצ'ינג ;)
    אבל אוספת לבבות, בא לכם ללבב כאן?


    יש בדף למטה אפשרות לפתוח מייל ולשלוח לחברה,
    מעניין כמה זה יהיה בשימוש,
    מה דעתכם על הרעיון?

    (אגב לקהל הרלוונטי, ממליצה שם על כתבה שווה על יצירתיות!)
    0 תגובות

    הצטרפות לניוזלטר

    איזה כיף שהצטרפתם לניוזלטר שלנו!

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

    לוח מודעות

    הפרק היומי

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


    תהילים פרק כה

    אלְדָוִד אֵלֶיךָ יי נַפְשִׁי אֶשָּׂא:באֱלֹהַי בְּךָ בָטַחְתִּי אַל אֵבוֹשָׁה אַל יַעַלְצוּ אֹיְבַי לִי:גגַּם כָּל קוֶֹיךָ לֹא יֵבֹשׁוּ יֵבֹשׁוּ הַבּוֹגְדִים רֵיקָם:דדְּרָכֶיךָ יי הוֹדִיעֵנִי אֹרְחוֹתֶיךָ לַמְּדֵנִי:ההַדְרִיכֵנִי בַאֲמִתֶּךָ וְלַמְּדֵנִי כִּי אַתָּה אֱלֹהֵי יִשְׁעִי אוֹתְךָ קִוִּיתִי כָּל הַיּוֹם:וזְכֹר רַחֲמֶיךָ יי וַחֲסָדֶיךָ כִּי מֵעוֹלָם הֵמָּה:זחַטֹּאות נְעוּרַי וּפְשָׁעַי אַל תִּזְכֹּר כְּחַסְדְּךָ זְכָר לִי אַתָּה לְמַעַן טוּבְךָ יי:חטוֹב וְיָשָׁר יי עַל כֵּן יוֹרֶה חַטָּאִים בַּדָּרֶךְ:טיַדְרֵךְ עֲנָוִים בַּמִּשְׁפָּט וִילַמֵּד עֲנָוִים דַּרְכּוֹ:יכָּל אָרְחוֹת יי חֶסֶד וֶאֱמֶת לְנֹצְרֵי בְרִיתוֹ וְעֵדֹתָיו:יאלְמַעַן שִׁמְךָ יי וְסָלַחְתָּ לַעֲוֹנִי כִּי רַב הוּא:יבמִי זֶה הָאִישׁ יְרֵא יי יוֹרֶנּוּ בְּדֶרֶךְ יִבְחָר:יגנַפְשׁוֹ בְּטוֹב תָּלִין וְזַרְעוֹ יִירַשׁ אָרֶץ:ידסוֹד יי לִירֵאָיו וּבְרִיתוֹ לְהוֹדִיעָם:טועֵינַי תָּמִיד אֶל יי כִּי הוּא יוֹצִיא מֵרֶשֶׁת רַגְלָי:טזפְּנֵה אֵלַי וְחָנֵּנִי כִּי יָחִיד וְעָנִי אָנִי:יזצָרוֹת לְבָבִי הִרְחִיבוּ מִמְּצוּקוֹתַי הוֹצִיאֵנִי:יחרְאֵה עָנְיִי וַעֲמָלִי וְשָׂא לְכָל חַטֹּאותָי:יטרְאֵה אוֹיְבַי כִּי רָבּוּ וְשִׂנְאַת חָמָס שְׂנֵאוּנִי:כשָׁמְרָה נַפְשִׁי וְהַצִּילֵנִי אַל אֵבוֹשׁ כִּי חָסִיתִי בָךְ:כאתֹּם וָיֹשֶׁר יִצְּרוּנִי כִּי קִוִּיתִיךָ:כבפְּדֵה אֱלֹהִים אֶת יִשְׂרָאֵל מִכֹּל צָרוֹתָיו:
    נקרא  2  פעמים
    למעלה