עמוד 2 מתוך 22 מבוא בחוברת הזו אנחנו ניתן לכם טעימה מדפוסי העבודה ותודעת השירות שלנו, הטכנולוגיה שבה אנו משתמשים בשונה מחברות אחרות,לצוות שלנו משנה לתת לך שירות אישי מקצועי ואדיב המתבסס אל עובדות מחקרים ובעלי מקצוע נדירים עם ותק של למעלה מ 10 שנים הגישה שלנו מחזירה לנו משובים מצוינים ותורמת בזאת בגיוס לקוחות איכותיים חדשים. Sitepro בשנת 2013 התאחדנו,יסדנו ומיתגנו את עצמנו תחת המותג סייטפרו. כיום חברת סייטפרו מורכבת מאנשי מקצוע שכל אחד מהם מביא עמו את המומחיות וניסיון בתחום. אנו מציעים ללקוחות שלנו אתר אינטרנט איכותי, מקצועי ומתוכנן הבנוי עד לפרטים הקטנים ברמת גימור גבוהה. אנחנו נותנים שרות לחברות גדולות ויודעים גם לתת מענה לחברות קטנות ובינוניות. לווי אישי ומתן פתרונות תכנות שאין להם גבולות המעניק ללקוחות שלנו יתרונות עסקיים. סטנדרטים גבוהים בגרפיקה והנפשת האתר גורמות להנעה לפעולה ויחסי המרה איכותיים מובילים לקמפיינים פרסומיים מוצלחים. אנחנו לא הראשונים "סוף מעשה במחשבה תחילה" שלמה אלקבץ ( 1584 1505 ) מתוך הפיוט לכה דודי 2
עמוד 3 מתוך 22 תוכן עניינים 1 מבוא.... 2 פרק - 1 אינטרנט בישראל : מספרים שחשוב שתדעו 5 איך מחפשים? באיזו דרך? )דפדפנים ומנועי חיפוש( פרק 2 קוד פתוח או סגור?... 7 מהי פלטפורמת קוד פתוח, וכיצד היא בנויה? יתרונות קוד פתוח חדשנות טכנולוגית אפשרויות פיתוח אחסון שירות ניוד ועוד... מערכות לניהול תוכן בקוד פתוח בשימושנו: OPENCART, JOOMLA, MAGENTO, WORDPRESS למה דווקא וורדפרס - 8...Wordpress הערצת Wordpress פופולאריות גבוהה יותר בקרב בעלי מקצוע אתרי אינטרנט - התפלגות השימוש בפלטפורמות אתרי מכירות - התפלגות השימוש בפלטפורמות ecommerce( ) מרכיבים טכנולוגים: סלולר וטבלטים רספונסיביות )התאמה מלאה הרחבה - פונקציונאליות לסלולר ומסכים דרישות UI דרישות UX דפדפנים - התאמה מלאה - במה אנחנו שונים מחברות אחרות:... 10 מתן שירות אישי, עמידה בזמנים, זמינות, ליווי מקיף, דרכי התקשרות, שעות פעילות חריגות תכנון לפני ביצוע וארגון חומרים... 11 איסוף החומר השיווקי של החברה חילוץ מידע דיגיטלי קיים חומר גרפי קיים עריכה גרפית אפשרות בחירה תוכן - טקסטים סרטונים וידאו ואנימציות קטלוג הדמיות תלת מימד תכנון לפרטי פרטים על בסיס מחקר... 12 גיבוש אסטרטגיה דיגיטלית אסטרטגית קידום מחקר תכנון מילות מפתח לפרויקט דוגמא תרשים זרימה ופונקציונליות )מפת אתר(... 13 דוגמא איפוס כוונות שרטוט / סקיצה טכנית הגדרת כל מרכיבי האתר... 14 דוגמא - שרטות האתר המחשת דף הבית משוב הערות תיקונים סקיצה גרפית הדמיה והמחשת האתר... 15 דוגמא משוב הערות תיקונים תוכן עניינים - 2 המשך... 4 3
תוכן עניינים 2 פרק - 2.1 בניית עמוד 4 מתוך 22 בניית אתר: מה השונה... 17 עיצוב גופן - פונטים תפריטי הניווט באתר תזמון להופעת אלמנטים התאמות דפדפנים סלולר ורספונסיביות הנעה לפעולה אפקטים מיוחדים חיבורים חיבור לכלים סטטיסטיים רשתות חברתיות יצירת קשר - פניות בדיקות טכניות ושיפורים... 18 UX חווית משמש UI ממשק משתמש סימולציות התאמות שיפור ביצועים תכנות והתאמות קוד התאמות קידום יעד פרסום אינטרנטי מנגנוני אבטחה יתר האתר, סוגו ותכונותיו... 19 דפים פנימיים מעוצבים ריבוי שפות הזנת תכנים פרק 2.2 -מה השונה - זמינות האתר- אחסון אבטחת שרת / ניוד חופשי / שירות ותמיכה בסיום התקשרות ובכל עת זמינות האתר - אחסון אבטחה שרת אבטחת שרת אבטחת אתר ותקינותו סיום בניית האתר מסירת קבצים ניהול הדומיין הדרכה על המערכת ניוד חופשי בסיום התקשרות ובכל עת פרק - 3 פרק - 3 איך מתחילים לעבוד איתנו: 3 שלבים... 21 פגישת עם המזמין תיאום ציפיות - הערכה תקציבית הצעת מחיר לפרויקט קביעת לו"ז חתימה 4
עמוד 5 מתוך 22 - פרק 1 אינטרנט בישראל : מספרים שחשוב שתדעו קיימים אתרי אינטרנט רבים המציעים ומציגים את עצמם בדרך כזאת או אחרת. כל חברה, עסק או יזם, חולמים על עיצוב מעולה ומבנה מנצח, שיגרמו לאתר שלהם להגיע למקומות טובים בתוצאות החיפוש ולעשות את עבודתו נאמנה. כל מנכ"ל ובעל עסק שואף לכך שיהיו לו יתרונות עסקיים רבים יותר ביחס למתחרים; המרוץ האינסופי להצלחה הקיים בכל שוק ובכל תעשייה הופכת את השאיפה הזו למאתגרת ביותר. קצת סטטיסטיקה אוכלוסיית ישראל מונה קרוב ל- 8,980,000 תושבים, נכון לינואר. 2019 לפי נתוני דן אנד ברקסטריט, יש כ- 600,000 עסקים מדווחים בישראל. הסטטיסטיקות לגבי שימוש באינטרנט עפ"י סקירת האתר האתר wikimedia.org בישראל, 67% מהאוכלוסייה שמעל גיל 20 משתמשת באינטרנט. השימושים הנפוצים הם חיפוש מידע )95%(, ודואר אלקטרוני (85%). יותר מ- 80% מהמשתמשים העידו על עצמם שהם שולטים במידה רבה בפעולות אלו. קצת היסטוריה חשוב לציין כי עוד בשנת 2011 ישראל הייתה במקום ה- 13 בעולם במספר הטלפונים הסלולאריים עם אינטרנט מהיר )62.2 יחידות לכל 100 תושבים( בסקר שערכה בזק בשנת 2014, עלו הנתונים הבאים: ישראלים משקיעים 45% מזמנם הפנוי ברשת. תושבי מרכז הארץ משקיעים בממוצע 6.2 שעות ביום באינטרנט, ואילו תושבי הפריפריה משקיעים 4.3 שעות ביום. 76% מהישראלים מעדיפים לקרוא חדשות במכשירים ניידים על פני קריאת חדשות במחשב נייח. 75% ממשקי הבית בישראל הם בעלי רשת אלחוטית ביתית. צריכת הנתונים הממוצעת למשק בית עלתה מ- 1.6 גיגה בינואר 2014 ל- 2.1 גיגה באוקטובר של אותה שנה. 80% מהישראלים מאזינים למוזיקה ברשת, 75% צופים בסרטים וסדרות, אך רק 31% קוראים ספרים ומגזינים. אחוז המשתמשים באינטרנט בשנת 2019 לפי סקר החדשנות שנערך בשנת : 2019 השנה, צפוי שיעור המשתמשים בטלפון חכם בישראל להגיע ל-. 86% היום, השימוש באינטרנט עומד על קצת יותר מ- 5.4 שעות ביום; מדובר בשיעור החדירה הגבוה ביותר בכל הזמנים. כ- 53% מתוכם משתמשים המשלבים את שניהם : טלפון חכם ומחשב נייח. מספר הולך וגדל של צרכנים בישראל משתמשים בטלפון חכם ובטאבלטים יותר מבכל התקן אחר. מספר הדומיינים הרשומים עם סיומת IL מספר הדומיינים הרשומים לפי "איגוד האינטרנט הישראלי עומד על 248,317 )קישור: https://www.isoc.org.il/whois )נתונים חלקיים(, מרץ ) 2019 5
עמוד 6 מתוך 22 איך מחפשים? באיזו דרך? )דפדפנים ומנועי חיפוש( התפלגות השימוש בדפדפנים התפלגות השימוש בדפדפנים מעודכן לפי נובמבר 2018 לפי נתוני: wikipedia.org )מקור: ) netmarketshare.com )קישור: )https://en.wikipedia.org/wiki/usage_share_of_web_browsers התפלגות השימוש בדפדפנים, נובמבר :)netmarketshare.com( 2018 Desktop Mobile Tablet כולל Brows Browser % % Browser % Source % er Chrome 63.50 Chrome 65.49 Chrome 62.59 Chrome 57.16 Safari 19.03 IE 9.66 Safari 29.07 Safari 36.43 Firefox 4.56 Firefox 8.99 UC 1.38 AOSP 3.59 UC 1.01 Edge 4.23 Opera 1.40 Opera 0.80 Opera 1.44 Safari 3.76 AOSP 1.26 Firefox 0.46 IE 3.98 Opera 1.56 Firefox 1.55 Others 1.56 Edge 1.77 Others 6.31 Others 2.75 AOSP 0.86 Others 3.87 התפלגות מנועי חיפוש התפלגות השימוש במנועי חיפוש מפברואר 2018 עד לפברואר :)statcounter.com( 2019 )קישור: )http://gs.statcounter.com מנועי חיפוש מובילים Google Bing Yahoo Baidu Yandex Other Global 91.58 % 2.76 % 2.13 % 1.38 % 0.62 % 1.53 % Israel 97.55 % 0.98 % 0.69 % 0.16 % 0.49 % 0.16 % 6
עמוד 7 מתוך 22 קוד פתוח או סגור? מהי פלטפורמת קוד פתוח, וכיצד היא בנויה? פלטפורמה בקוד פתוח מבוססת בעיקר על שפת הפיתוח PHP בשילוב עם טבלאות מסדי נתונים של.MySQL כל התיקיות והקבצים של המערכת מותקנים על שרת ייעודי, וכל קובץ פתוח לכל שינוי שתרצו לעשות במערכת. לאחר התקנת המערכת, התאמתה לביצוע שינויים ותוספת של פונקציונאליות לפי הגדרת האתר ואפיונו, האתר כולו זמין לכל שינוי ועדכון לפלטפורמה - זאת בניגוד לאתרים הבנויים בממשקי ניהול סגורים, כמו,wix אתרים של חברות שפיתחו ממשק ניהול משלהם והפיתוח תלוי רק בהם, או אתרים הכתובים ב net. )שהיא שפה "מקומפלת", כך שעל השרת נמצא רק קבצים שאינם קריאים(. חוסר תלות, גמישות וחופש פעולה הופכים את השימוש בקוד פתוח ליתרון משמעותי. יתרונות קוד פתוח חדשנות טכנולוגית אפשרויות פיתוח אחסון שירות ניוד ועוד... ללא תלות במפתח ללא תלות בחברת אחסון פיתוח ותוספות - פתוח תמיד פיתוח עתידי - לא מוגבל מערכות עולמיות תפעול - פשוט וקל יכולות עיצוב - לא מוגבל קצב עדכוני מערכת יום יומי עמידה בתקנים - המתקדם ביותר דרישות מנועי חיפוש - המתקדם ביותר חיבור לקמפיינים ומדידת יחס המרה נגישות האתר התוספים המתקדמים ביותר ממשקי ניהול ותפעול ניתנים לשינוי עיצוב ועריכה ממשק ניהול ותפעול ניתן לשדרוג ועריכה - לא מוגבל חיבור לרשתות, וואטסאפ, צ'אט וכו' לא מוגבל התחברויות והתממשקות לא מוגבל התאמה מלאה לסלולר וטאבלטים כסטנדרט פלטפורמה - תמיד עדכני וחדשני ביותר תוספים - תמיד עדכני וחדשני ביותר פלטפורמה ותוספים בהובלה חדשנית מהירות ואופטימיזציה ניתנים לעריכה ושיפורים חיבור תוכנות סטטיסטיקה ומעקב אחרי גולשים מערכות לניהול תוכן בקוד פתוח בשימושנו: OPENCART,JOOMLA,MAGENTO,WORDPRESS וכו'.. אתרי תדמית ואתרי מסחר פורטלים ומנגנונים וכו' - מורכבים יותר ומורכבים פחות - נבנים בקוד פתוח, אך קיימים מקרים מעטים בהם יש לשלב גם קוד סגור. 7
עמוד 8 מתוך 22 למה דווקא וורדפרס - Wordpress הערצת Wordpress הפופולאריות של Wordpress היא כלל עולמית. הפלטפורמה תומכת בעברית, ערבית, רוסית, צרפתית ו- 68 שפות נוספות מרחבי העולם.למעלה מ- 34 מדינות עורכות תחרויות וכנסים לקידום ופיתוח פלטפורמת וורדפרס בתחומן. פיתוח ועדכון קטעי קוד, תוספים ויכולות המערכת פורצים את גבולות החדשנות ונמצאים בתהליך שיתוף תמידי בין גופים ברחבי העולם. פופולאריות גבוהה יותר בקרב בעלי מקצוע פופולאריות זו גורמת למספר הולך וגדל של בעלי מקצוע לבחור לעבוד דווקא עם פלטפורמה זו. מעצבים אנשי קידום ברשתות כותבי תוכן חברות אחסון אנשי קידום התפלגות השימוש בפלטפורמות אתרי אינטרנט - התפלגות השימוש בפלטפורמות )מקור:,builtwith.com מרץ 2019( )קישור: )https://trends.builtwith.com/cms/country/israel in Israel Top Million in the world Entire Internet platform Wordpress Other Drupal Webydo Cpanel )מקור:,builtwith.com מרץ 2019( platform Woocommers Wix Shopify Other Magento OpenCart Ecwid Nopcommerce Virtualmarket prestashop % 56 27 4 5 9 Distribution in Israel % 35 11 11 10 9 7 6 4 3 3 ) ecommerce( platform % Wordpress 50 Other 42 Drupal 5 Google 3 platform Wordpress Other Joomla sqarespace Progres site infinity Wix % 54 26 4 4 4 7 אתרי מכירות - התפלגות השימוש בפלטפורמות )קישור: )https://trends.builtwith.com/shop/country/israel ecommerce Usage Distribution in the Top 1 Million Sites platform Other Woocommers Shopify Magento prestashop Bigcomers Opencart לסיכום: וורדפרס אינה נרדמת בשמירה ומבטיחה פיתוחים וחידושים בעתיד הקרוב והרחוק % 38 22 18 12 4 3 3 8
עמוד 9 מתוך 22 מרכיבים טכנולוגים: - Wordpress פלטפורמה דינמית, יעילה, תקנית ביותר לאורך שנים ופופולארית ביותר כיום. המערכת בנויה בשפת תכנות,PHP משתמשת בבסיסי נתונים MySQL ומשלבת JavaScript או CSS להצגה ועיצוב ברמות הגבוהות יותר. Wordpress -בנויה וערוכה להוספה/מחיקה/שכפול עמודים בטכנולוגית Drag & Drop ללא הגבלה - יתרון משמעותי לפלטפורמות בקוד פתוח. סלולר וטבלטים רספונסיביות )התאמה מלאה( קוד ה- CSS3 החדש מאפשר הצגת קבוצות של חוקי עיצוב לאתר בהתאם לתבניות המבוססות על רוחב מקסימאלי ומינימאלי של המסך. טכנולוגיית HTML5 מאפשרת בניית אתרים למכשירים ניידים )עיצוב רספונסיבי(. הבניית אלמנטים נעשית באחוזים, כך שכל מרכיבי האתר גמישים כלפי אחד לשני ומוצגים בצורה נכונה בכל המסכים. הרחבה - פונקציונאליות לסלולר ומסכים התאמה ייחודית לכל סוג מסך, התאמה לכל מכשירי הסלולר והטאבלטים וקביעת צורת ההופעה מיוחדת. התאמה לנייד: למה זה חשוב דרישות UI הצרכנים והגולשים עתידים להשתמש בממשקים הפנימיים של האתר, כגון מעקב הזמנות, רישום כלקוח ועוד. ממשק המשתמש אחראי לשימוש נכון, פשוט, ברור ולא מסורבל של הגולש. דרישות UX חלק זה מתייחס לתפקוד של הגולש באתר, לאופן הניווט, להופעה נכונה ולשילוב במיקום. אלמנטים גראפיים ברורים ותוכן קצר וקולע מאפשרים לגולש נוחות שימוש, ערך מוסף בנוחות וקבלת פרטים חשובים לגולש אשר מה שמשפיע על תהליך השיווק. דפדפנים - התאמה מלאה לטכנולוגית Wordpress יש התאמה מלאה לדפדפנים Opera,Safari,Firefox,Chrome,Explorer וכו... 9
ה ה עמוד 10 מתוך 22 - פרק 2 במה אנחנו שונים מחברות אחרות: מתן שירות אישי, עמידה בזמנים, זמינות, ליווי מקיף, דרכי התקשרות, שעות פעילות חריגות, תודעת שירות זמן מענה ממוצע: 2:33 דקות )שנת 2018( ביצוע על הצד הטוב ביותר ללא התפשרות על איכות עמידה בהתחייבויות וציפיות עמידה בלוחות זמנים המזמין נהנה מהתהליך במקום לבזבז זמן לאורך הפרויקט. ליווי שוטף ארגון חומרים מתן תשובות ופתרונות מקיפים בכל הקשור לפרויקט מציאת פתרונות משלימים במיקור חוץ )כותבי תוכן, צלמים וכו '( התארגנות מול גורם צד ג',התממשקות וחיבור למערכות חיצוניות וחברות אשראי. דרכי התקשרות וואטסאפ טלפון פגישה במשרד פגישה אצל הלקוח. מייל התחברות מרחוק למחשב המזמין שעות פעילות מסודרות פעילות החברה: ימים א' ' 8:00-18:00 קבלת שירות: א' ', 9:30-16:00 שעות פעילות חריגות: כוננות - 24/7 מתן תגובות חירום ועזרה ראשונה 10
עמוד 11 מתוך 22 תכנון לפני ביצוע וארגון חומרים מעורבות בתהליך קבלת החלטות לפרויקט נעשה בקפידה ע"י מנהל פרויקט בשיתוף בעלי תפקידים (אסטרטגיה דיגיטלית / עיצוב / תכנות / קידום / חוויית משתמש פגישה - אפיון / מחקר - צרכי הלקוח כללי ארגון חומרים פגישת אפיון הבנת צרכי הלקוח אפיון דרישות, רצונו ת, ציפיות, שאיפות רכישה ניהול וארגון חומרי האתר הקפדה על חומרים ייחודיים איסוף החומר השיווקי של החברה - סייטפרו דואגת לארגון החומרים של הלקוח תוך יצירת קשר עם בתי דפוס וחברות צד שלישי,כולל עיון בהיסטוריה אינטרנטית ופורטלים למטרות איסוף מידע. חומר OFF LINE שיווקי )ברושורים, קטלוגים, כרטיסי ביקור וכו'( חילוץ מידע דיגיטלי קיים חומר גרפי קיים עריכה גרפית חילוץ חומרים גרפיים וטקסטים מהאתר הישן וקטלוגים חילוץ נתונים על מוצרים מהאתר הישן, תוכנות ניהול וכו ' בחירה ומציאת חומרים גרפיים מתאימים. ללא שימוש בתמונות מוכרות רישיונות בין לאומיים פוטושופ אייקונים בעיצוב אישי עריכה ועיצוב תמונות והתאמות גודל עריכת מוצרים )וגזירת רקע( דחיסת תמונות - סגירה לשימוש באינטרנט )צמצום גודל קובץ( עריכה לתמונות קיימות - החומרים עוברים עריכה קפדנית; משולבים בהם אפקטים, פילטרים, גזירות ושילוב אלמנטים אחרים, שינוי גדלים והתאמות תוך שמירה על צבעים דומיננטיים. רכש מדיה - על החומרים הוויזואליים באתר להיות מקוריים וללא שימוש קודם. בנוסף, נרכשים חומרים בעלי רישיון לשימוש מסחרי ובאיכות מקסימאלית. עריכה לתמונות שנרכשו - כל התמונות לאתר עוברות התאמה ועיצוב-מחדש על מנת להיות מקוריות, ייחודיות ושונות מאלו של המתחרים, תוך שימור ושימוש בצבעים הקיימים. אפשרות בחירה תוכן - טקסטים הזמנת עריכה לשונית והגהה הזמנת מאמרים בעלי מבנה קידום )למטרת קידום( הזמנת מאמרים ממוקדים ומקצועיים המשמשים את המטרה בדיקת מקוריות ואי כפילויות ברשת האינטרנט התוכן/מאמר נבחר בקפידה. אנו שומרים ונותנים הנחיות לאיכות הטקסט ולעומקו. תוכן טוב אמור לצמצם את אחוז הנטישה מהאתר, לגרום לגולש להתעמק ולהבין דברים שרצה לשאול. המחקר עוזר לנו לתכנן תוכן איכותי לאתר שיעשה את העבודה ובין היתר יניע לפעולה אותה תכנן הלקוח. סרטונים וידאו ואנימציות קטלוג הדמיות תלת מימד שילוב התאמה, הגדרות מתקדמות הזמנת סרטונים )בהתחשב בזמן טעינה( המרת קטלוג רגיל לדיגיטלי שילוב קטלוגים דיגיטליי ם אינטראקטיביים הזמנת הדמיות תלת מימד 11
עמוד 12 מתוך 22 תכנון לפרטי פרטים על בסיס מחקר גיבוש אסטרטגיה דיגיטלית גיבוש רעיון - אסטרטגיה לאינטראקציה עם הגולש אסטרטגית האתר - תכנון יסודי יעוד האתר - תכנון יסודי מטרת האתר - תכנון יסודי בניית אסטרטגיה דיגיטלית רחבה ומקיפה אתר אינטרנט טוב יהיה תמיד בנוי ומתוכנן היטב - עם אסטרטגי ית עיצוב, אסטרטגיית שיווקית, סדר הופעת דברים נכונה באתר ומסר ברור שהוא מעביר ללקוח. לעניין את הלקוח זאת אומנות לשמה. אסטרטגית קידום מחקר תכנון מילות מפתח לפרויקט הגדרת מילים לקידום מבוסס מחקר מילות מפתח ובניית אסטרטגיה לחיזוק הופעות במנועי חיפוש לטובת קידומו. נבנית אסטרטגיה של מילות מפתח ומאמרים ויתרונות של מוצרים, לדוגמא. כל אלו יזניקו את האתר החדש בדירוגים. מציאת מילות מפתח וביטויים שלילת ביטויים לא רלוונטיים דוגמא מחקר והכרת נפח החיפושים בתחום מחקר תחרות למילות מפתח סטטיסטיקות של שנה אחורה בניית אסטרטגיית קידום 12
עמוד 13 מתוך 22 תרשים זרימה ופונקציונליות )מפת אתר( מעבר על הטרנדים בתחום בשיתוף עם המזמין, מנהל הפרויקט מציג בפניו את החידושים ואת הפתרונות הטכנולוגים שאפשר לשלב באתר כמו גם אפקטים והצגה נכונה של מוצרים. זיהוי הזדמנויות זיהוי הזדמנויות פוטנציאליות לביצוע הפרויקט, הצעות ייעול ותוספות ושדרוגים בנוסף לאפיון. כל זאת כלול במחיר. תרשים זרימה מציג את ראשי הפרקים או הקטגוריות / תתי קטגוריות ומוצרים באתר. הוא מפרט את כל דפי האתר; למעשה אלו קוביות המציגות את דפי האתר, כאשר עבור כל קובייה ניתן לראות איך מגיעים אליה ולאן היא מובילה. בדרך כלל באתרים קטנים, עקב גודל האתר, תרשים הזרימה מצורף לסקיצה הטכנית בשלב הבא. דוגמא איפוס כוונות בשלב זה עוברים על הפרויקט כולו עם הלקוח ומאשרים את נכונות הפעולות העתידות להתבצע. 13
עמוד 14 מתוך 22 שרטוט / סקיצה טכנית הגדרת כל מרכיבי האתר בניית סקיצה טכנית לכל מרכיבי האתר בעמוד.PDF מנהל הפרויקטים מתכנן את כל מרכיבי האתר לפי הסדר, גדלים, מיקומים והפרופורציות ביניהם, בהתחשב בדרישות שהוא קיבל, תוך מתן דגש על חוויית משתמש והופעה במכשירים סלולאריי ם. דוגמא - שרטות האתר המחשת דף הבית סקיצה טכנית - פרשנות שיטת ההתנהלות בסייטפרו שונה מזו שבחברות רבות אחרות. שלב התכנון הטכני מגלם בתוכו את כל הדברים שסוכמו בצורת שרטוט, כך שכל הדברים שהוגדרו בכתב ובעל פה מיושמים ומוצגים - כולל הדפים והקטגוריות שיהיו באתר, והכי חשוב - באיזה סדר כרונולוגי הם יופיעו. בדרך כלל מוצגות ללקוח 3-2 סקיצות. שרטוט טכני של האתר מכיל את כל מרכיבי האתר - אחד לאחד. סקיצה זו לוקחת בחשבון את גודל התמונות, הטקסטים, הכפתורים, האלמנטים ושאר מרכיבי האתר. משוב הערות תיקונים בשלב זה עוברים על הערות הלקוח ומאשרים את נכונות שהפעולות העתידות להתבצע.סבב התיקונים נועד לצמצם טעויות בבקשות המזמין. לדוגמא: יש מצבים בהם לא תוכנן מקום בדף הבית לאלמנט מסוים ועוד. ויתור על סבבי תיקונים בשלבים הראשונים, ודחייתם עד לשלבי הפרויקט האחרונים, עשויים לפגוע בעיצוב והמיתוג. 14
עמוד 15 מתוך 22 סקיצה גרפית הדמיה והמחשת האתר מעבר על הטרנדים הגרפיים בשלב זה מוצגים למזמין סגנונות גרפיים שניתן לשלב באתר, אפשרויות גרפיות ואייקונים חדשים עבורו. גרפיקה סקיצה גרפית גרפיקה עיצוב סקיצה גרפית לכל מרכיבי האתר PSD גרפיקה ייחודית וייעודית לדרישות אייקונים ואלמנטים גרפיים מקוריים בעיצוב אישי גרפיקה מקורית וייחודית בעיצוב והתאמה אישית הגרפיקה חייבת להיות מיוחד במינה, שונה ומבליטה את הלקוח אייקונים אייקונים ואלמנטים מעוצבים בהתאמה אישית סקיצה גרפית עם כל מרכיבי האתר PSD( ) אפיון המבנה הגרפי של האתר - המבנה גרפי של האתר מתחיל להצטייר במוחו של המעצב לאחר שהוא מקבל לידיו את חומרי הפרויקט ואת הסקיצה הטכנית שאושרה על-ידי המתכנת ומנהל הפרויקטים. המעצב מגדיר את התוכן הגרפי שיש להכין ומשתף את מנהל הפרויקט איזה גרפיקה הוא עתיד להכין. אייקונים ואלמנטים אלמנטים שיווקיים גרפיים כוללים, בין היתר, אייקונים לקידום מכירות שנועדו להמחיש ולהציג ללקוח בצורה גרפית את מה שהוא עשוי לחפש בתוך האתר, למשל - משלוחים לכל חלקי הארץ, תשלומים, אחריות ועוד. תכנון קונספט גרפי הגדרה של שפ ת עיצוב גרפי - עיצוב ייחודי שחייב להופיע בכל מקום באתר, בצורה המשכית, כיצירת אומנות אחת, שביחד מהווה מכלול אחיד מעוצב - שזהו האתר. אפקטים גרפיים מיוחדים - המשולבים יחד עם חומרי האתר ומשלימים אותם בהתאמה. הם כוללים הדגשות, הצללות, חיתוך פינות, התאמת צורות בתמונות ועוד. סיכום: סקיצות גרפיות הוא החלק הדומיננטי ביותר בתהליך כולו. כאן המזמין נחשף למעשה לכל מה שעתיד להיבנות. בשלב זה, הגרפיקה תואמת אחד לאחד לאתר, מתבססת על שלבים קודמים ומאחדת את הכול בצורה ויזואלית מפורטת. ניתן גם לראות את כל הצבעים, האייקונים וצבעי הרקע בשילוב טקסטים, במיקומים ובגדלים שעתידים להיבנות. 15
דוגמא עמוד 16 מתוך 22 סקיצה גרפית - פרשנות תיאום ציפיות מתבצע עם המזמין, שמקבל פרשנות לדרך ולתוצאה. כל נקודה, מיקום וצבע מוסברים ללקוח מתוך מטרה לצמצם את סבבי התיקונים ולכוון לרצון המזמין ושותפיו בחברה. משוב הערות תיקונים בשלב זה עוברים על הערות של הלקוח ומאשרים את נכונותן של הפעולות העתידות להתבצע, טרם עבודת התכנות והבנייה של האתר. סבב תיקונים נועד לצמצם טעויות - לדוגמא, במצבים בהם בדף הבית לא יועד מקום לאלמנט ספציפי. ללא סבבי תיקונים בשלבים הראשונים, אנו עלולים לפגוע בעיצוב והמיתוג בשלבים מאוחרים יותר. קישור לאתר של הדוגמאות )לינק (...קישור 16
עמוד 17 מתוך 22 פרק - 2.1 בניית אתר: מה השונה בניית אתר מקצוענות הקמת אתרים מאפס - לא מתבנית קיימת דרישות מיוחדות כללי פיתוח תוספים ושימוש בתוספים תחת רישיונות שימוש בקוד תחת רישיונות מיתוג הלקוח באינטרנט לא עובדים עם חומרים מוכנים עיצוב עיצוב אישי על-ידי מעצב שימוש לפי פונטים מיוחדים ומוכרים למנועי חיפוש גופן - פונטים תפריטים בכל רמת קושי ומורכבות תפריטי הניווט באתר תפריטי הניווט באתר תפריט לכל סוגיו נבנה לפי סדר ההופעה והמיקום המסוים, ולפי סקיצה טכנית וגרפית, מתוך התחשבות בגולשים העתידים שירצו להגיע למיקום באתר וידעו איך לחזור ממנו - וכמה צעדים אחורה צריך לבצע. בסייטפרו אנחנו מגבשים את הרעיון ואת אופן הביצוע עוד בשלב מוקדם. תזמון להופעת אלמנטים תזמון להופעת אלמנטים באתר - נדרשות פעולות הקשורות לסדר הופעת אלמנטים, טקסטים, תמונות ועוד. התזוזה אפקטים מיוחדים אפקטים מיוחדים - תזוזות של אלמנטים וסדר הופעתם בזמן מוגדר ולפי פעולת הגולש באתר. מעבר לזה, אפקטים מיוחדים באתרי אינטרנט נועדו למשוך את תשומת הלב של הלקוח או להסתיר פרטים ספציפיים. מצד אחד, כפתור ליצירת קשר המתוזמן להופיע ליד התוכן השיווקי עשוי לעודד את הגולש ללחוץ וליצור קשר ; מצד שני, במקרה של הסתרת פרטים, משתמשים בהצללה, או, למשל, בטשטוש מתוזמן של סרטונים או תמונות בהם לא מעוניינים לחשוף פרטים. זה מה שהופך את האתר הפשוט לחדשני ומוצלח. נגישות נגישות האתר נגישות בסיסית לפי חוק הנגישות. האינטרקטיבית יותר באתרי אינטרנט הופכת את אתרי האינטרנט למחושבים עד הפרט האחרון. התאמה לכל הדפדפנים ברמת החשיבות הנדרשת Opera,Safari,Firefox,Chrome,Explorer דפדפנים התאמות רמת חשיבות בניית מבנה האתר באחוזים גמישות האתר והתאמתו לכל צורות המסכים לפי סלולר ורספונסיביות הצגת האתר בגרסה אחרת לסלולר התאמות לטלפונים סלולאריים וטאבלטים - על האתר והאלמנטים שבו להיות נוחים לשימוש. למשל, בסלולר, על כפתורי ההזמנה להיות בגודל מתאים שיאפשר ללקוח ללחוץ בנוחות, וללא ניצול שטח המסך כולו. כפתורים חמים תזמון אלמנטים לפי זמן, סדר וחשיבות הנעה לפעולה תוספי מקדמי מכירות - מתן אפשרות ליצור קשר, לברר פרטים ולהזמין הם הדברים שאליהם אנחנו מכוונים; גם כאשר מדובר ברמה הבסיסית ביותר - שילוב כפתור מהיר לשיחה וקישור האתר ל- Waze, ניווט מהנייד ועוד - כל אלו מביאים ליחס ההמרה לגדול. הנפשה, הבלטה ותזוזת אלמנטים באתר חיבורים חיבור לכלים סטטיסטיים רשתות חברתיות יצירת קשר - פניות Google Analytics ניטור כניסות חיבור והגדרת תוספים לכל רשת חברתית צ'אט וואטסאפ Email SMS קו וירטואלי חיבור CRM 17
עמוד 18 מתוך 22 פרק - 2.1 )המשך( בניית אתר, מה השונה בדיקות טכניות UX חווית משמש ושיפורים התאמת האתר לדפוסי גלישה שיפור נוחות גלישה קבלת חוויה וגישה נוחה לגולש התאמות חוויית משתמש (UX) באתר - חוויית המשתמש מבטאת את אופן הצגת האתר במסכים השונים לגולש הממוצע. שמירה על פרופורציות גרפיות בחוויית המשתמש - לפי סקיצה גרפית במסגרת בניית אתר, נוצרת תעלומה חלקית שצריך לפתור. נדרשות פעולות עיצוב, פעולות תכנות והנפשה. תזוזה במעבר בין המסכים השונים והדפדפנים במחשבים נייחים וסלולאריים עלולה לשבש את הנראות והפרופורציות של האלמנטים, וכך גם את חוויית הגלישה. יש לשלב התאמות אלו על-פי התכונות האופייניות לכל מכשיר. UI ממשק משתמש שיפור ופשטות הגעה, ביצוע הזמנות וכו ' התאמות חווית ממשק משתמש (UI) באתר - ממשק פנימי לגולש מותאם ונבנה מתוך התחשבות בכל הפעולות הרלוונטיות שהגולש אמור לבצע באתר. האם נוח להזמין באתר? האם בחירת וריאציות של המוצר נוחה לשינוי? האם מעקב ההזמנה ברור ועובד באופן תקין? כל זאת ואלמנטים רבים נוספים מותאמים ונבדקים בהתאם לכל סוגי המכשירים הסלולאריים, המחשבים הנייחים והטאבלטים. סימולציות התאמות שיפור ביצועים סימולציות התאמות ושיפורים שיפור מהירות האתר שיפור ציוני האתר תכנות והתאמות קוד, ניקוי קוד מיותר סימולציות גלישה סימולציות רכישה חיבור בין המערכות השונות תכנות והתאמות קוד התאמה לכל מנועי חיפוש ברמת החשיבות הנדרשת התאמות קידום הפניות 301 )מהאתר הישן לחדש לטובת שמירת המקום במנועי החיפוש( עמוד שגיאה 404 מפת אתר XML אופטימיזציה לכל האתר הכנה לקידום - בהתאם לדרישות מנועי החיפוש. תחילה נתקין את התוספים לקידום מוצלח, ניתן דגש למבנה נכון של כתובות, כותרות) h2,meta Description,Meta Keywords,h1(, כמו גם אופטימיזציה לתמונות מבחינת גודל התיאור. נבצע התאמות לניידים, למפת אתר, לשיפור זמן טעינה, ושילוב ושימוש במילות המפתח הרלוונטיות ודומיננטיות הגורמות לאתר להתקדם. מעוניינים בהצלחה עסקית של המזמין יעד פרסום אינטרנטי מנגנוני אבטחה תוספות קוד - מנגנונים לחיזוק עמידות בפני פריצות ותקלות - לאבטחת מקסימאלית של האתר 18
עמוד 19 מתוך 22 בניית יתר האתר, סוגו ותכונותיו דפים פנימיים מעוצבים מספר דפי האתר המעוצבים מתחלקים לכמה סוגים עיקריים: דפי מידע, דף אודות או שירותים, דפי קטגוריות למיניהם ותתי קטגוריות כמו דף צור קשר, דף מפת סניפי הרשת וכו'. רק לאחר בניית דף הבית והדפים הפנימיים וסבבי התיקונים אפשר להתחיל לבנות את שאר האתר כמו שהוגדר במהלך האפיון ובסקיצה הטכנית והגרפית. סוגי האתר אינם זהים ; קיים הבדל בין אתר מכירות לבין אתר תדמית עם חמישה עמודים או אתר גלריה, כאשר השוני מתבטא במרכיבי האתר. לאחר שלב זה, נבנים כל מרכיבי האתר, מנגנונים, עגלת קניות, חיבורים לסליקה, צ אטים, וריאציות ולוגיקות בדפי מוצרים, מנגנוני רכישה וניהול מלאי וכו'. ריבוי שפות במידת הצורך ובהתאם למה שנקבע במעמד האפיון. הזנת תכנים הזנת טקסטים באתר - באחריות סייטפרו להזין את הטקסטים באתר, כפי שסוכם מראש. תמונות וסרטונים - באחריות סייטפרו לערוך, לעצב ולהזין את התמונות והסרטונים באתר כפי שסוכם מראש. הזנת מוצרים נוספים - במידת הצורך ובכמויות שסוכמו מראש, מקבלים הדרכה לניהול האתר )הזנת מוצרים(. 19
ותמיכה בסיום התקשרות ובכל עת עמוד 20 מתוך 22 שרת אבטחת שרת אבטחת אתר ותקינותו מסירת קבצים ניהול הדומיין הדרכה על המערכת ניוד חופשי אחסון עדכונים קידום סטנדרט ללא עלות נוספת זמינות האתר - אחסון אבטחה מיקום חוות שרתים : ישראל. ) //:HTTPS( SSL ביצועים מהירים, מתואם קידום גיבוי ושיחזור מלא שבועי. אבטחה נגד פריצות - מנגנון מיוחד לוורדפרס. שני גורמים מטפלים פיצול התראות לשני גורמים מטפלים פיקוח והשגחה על שרתים )מעגל ראשון = אנחנו "סייטפרו"( פיקוח והשגחה על שרתים )מעגל שני צד שלישי( תוספות קוד - מנגנונים לאבטחת האתר. סריקה וניטור ופתרון בעיות טכניות בשוטף. שדרוג גרסאות בשוטף. סיום בניית האתר מסירת קבצי המקור ( גיבוי ) עם סיום הבניה - ובכל עת ניתוב דומיין - העלאת האתר לאווי ר הדרכה על מערכת ניהול התוכן בהתחברות למחשב מרחוק )כשעתיים(. ניוד חופשי מתן עזרה ללא תלות באחזקת האתר מתן שירות ללא תלות ללא נקודות יציאה, ללא דמי יציאה. ניוד מלא: קבצי האתר,דומיין וכו' מתן הדרכה על המערכת ניהול - בכל עת. מסירת קבצי המקור עם סיום הבניה - ובכל עת. ליווי ומתן שירות )עדכונים, קידום וכו'( ליווי ומתן שירות בשוטף )עדכונים, קידום, אחסון וכו'( בסיום התקשרות ובכל עת לפי רכישת חבילת אחסון. פרק 2.2 -מה השונה - זמינות האתר- אחסון אבטחת שרת / ניוד חופשי / שירות לפי רכישת בנק שעות הזנת תוכן - שעת עבודה ( 150 ש"ח לשעה ). גרפיקה -שעת עבודה ( 150 ש"ח לשעה ). תכנות -שעת עבודה ( 250 ש"ח לשעה ). לפי רכישת חבילת קידום קידום ממומן - תקופה מינימלית 3 חודשים 20
עמוד 21 מתוך 22 - פרק 3 איך מתחילים לעבוד איתנו: 3 שלבים פגישת עם המזמין חלק א' וחלק ב' נעשים במעמד הפגישה עם המזמין. יש מקרים שהפגישות מפוצלות, למשל - במידה שהמזמין קיבל הערכה תקציבית ויש לו צורך להתארגן. אפיון - חלק בלתי נפרד מבניית האתר וקידומו כסטנדרט של סייטפרו! שלב - 1 פגישת הכרות - אפיון דרישות, מטרות ויעדים אפיון דרישות מקדים נעשה לאחר שנאסף מידע בהקשר לעסק ובהכרת המתחרים והתחרותיות של התחום או המוצר באינטרנט. כך עולות הצעות ושאלות רלוונטיות מטעמנו ומצד הלקוח ומוגדרים יעדים נכונים לביצוע ועלות בניית האתר. בירור רקע כללי על החברה - בירור צרכים בסיסים שאותם מגדיר הלקוח. יש לקוחות שאינם מבינים בעולם האינטרנט וזקוקים לעזרה. הבנת חזון ואסטרטגיה - חזון החברה והאסטרטגיה, צורת השיווק בהווה ולאן שואפים להגיע בעתיד. זהו חלק בלתי נפרד שיש לשלב למהלך קידום החברה באינטרנט. לימוד צרכים - נשאלות שאלות רבות על אופי החברה, היקף הפעילויות העסקיות בפועל, תיאום ציפיות ויעדים, לאן מכוון הלקוח והיעד השיווקי האינטרנטי. סקירת מתחרים בתחום - לצורך בידול האתר, חברת סייטפרו מבצעת סקר מתחרים. כדי לחבר את הרצונות למציאות של הלקוח, החברה אוספת חומר וחוקרת אודות המתחרים ומה מציעים המתחרים - באיזו צורה, גרפיקה, שיווק, וצורת ההגשה הם פועלים. סקר מילות מפתח ראשוני - כדי להצליח בתחרות באינטרנט, יש לקחת בחשבון את היקף התחרות ואת מילות המפתח עמן מקודמים המתחרים. זיהוי מטרות - הגדרת מטרה ראשית ומשנית וערך מוסף. לפעילות עסקית ולפעילות אינטרנטית אמורה להיות מטרה ראשית ומשנית, הערך המוסף יכול להתבטא באמצעות שירות ומוצר ייחודי. תיאום ציפיות - הערכה תקציבית הגדרת טווח מחירים לפרויקט, תיאום ציפיות של סייטפרו מול כל האפשרויות הניתנות לביצוע והעלות שלהן. הלקוח מקבל טווח של מחירי מינימום ומחירי מקסימום לביצוע הפרויקט. שלב - 2 אפיון מעמיק לביצוע הפרויקט לתחילת עבודה לקוח המעוניין להתקדם, ואישר תקציבית את הפרויקט, יכין את החומרים הנדרשים ויתכונן בהתאם לשאלות שמנהל הפרויקט הכין. פגישת האפיון כוללת: סקירת החומרים, תכנון האתר עם מנהל הפרויקטים, כניסה לפרטים הקטנים של הפרויקט בהתאם לחומרים שהתקבלו וסיכום הפרטים הנוגעים לביצוע הפרויקט. הכל מתועד בכתב ובהתאם לתיעוד זה נקבע המחיר הסופי לפרויקט. סקירת חומרי החברה - מנהל פרויקטים סוקר עם המזמין את החומרים הגרפיים והשיווקיים של החברה, ובוחן את איכותם ואת התאמתם על-מנת להבין מה חסר ומה יש להשלים. חשיפה לפתרונות טכנולוגים - מתכננים שימוש חכם בטכנולוגיה ובאפשריות הקיימות על-מנת לפתור סוגיות ניהוליות ומתן אינפורמציה ללקוח מתוך האתר, בעזרת אסטרטגיה דיגיטלית ודרישות המזמין. זיהוי צורך הגולש - הגדרת מבקרי האתר: מדוע הגיעו לאתר, פילוח ואפיון פרופיל של גולשים פוטנציאלים, התייחסות לכל אחד ואחד לפי פוטנציאל עסקי ולמה כל גולש אמור להיחשף אליו באתר. דרישות מיוחדות - דרישות רלוונטיות, כגון - התממשקות לתוכנות ניהול, אלמנטים מיוחדים, הזמנת סרטון תדמית וצילום מוצרים, עזרה בתרגום ותיאום עם חברות צד שלישי של הלקוח ייעוץ שיווקי אסטרטגי אינטרנטי - מנהל הפרויקט מעלה הצעות נוספות לחיזוק הפעילות האינטרנטית ובמידת הצורך מסביר את הדברים לעומק. בחירת סוג האתר ופונקציונליות - בהתאם לנתונים שהתקבלו במעמד האפיון, נקבע סוג האתר, הטכנולוגיה שלו והפונקציות שהוא אמור לבצע, כאשר כל נגיעה בפרטים הקטנים וכל פיקסל באתר נלקחים בחשבון. חשוב להדגיש שכל האתרים שלנו הם בקוד פתוח ובהתאם לטכנולוגיה המתקדמת והנפוצה ביותר בעולם. 21
עמוד 22 מתוך 22 שלב - 3 הזמנת עבודה הצעת מחיר לפרויקט על סמך האפיון, הדרישות והיקף העבודה הנדרש, ניתן מחיר סופי לפרויקט )קיימים מקרים בודדים חריגים בהם ניתנת הערכה תקציבית. בנוסף, ניתנת האפשרות לרכוש שעות עבודה נוספות ). מצורפים נספחים להזמנה : קביעת לו"ז לוחות זמנים לביצוע )קיימים מקרים בודדים חריגים בהם ניתנת הערכת לסיום הפרויקט(. הערות תשלום תחילת עבודה - המזמין מסדיר את תשלום ומאשר את הזמנת העבודה. חתימה. ח.פ /ע.מ. חותמת + חתימה: שם: תאריך: חברה: חתימה ע"י מנהל או מורשה חתימה המוסמך לחתום בשם החברה ולחייבה, תשלום מלא או חלקי מהווה הסכמה להזמנה. 22