מורה פרטית לבניית אתרים בירושלים

[wmw]

פרק שני
תכנות צד לקוח וקבצי הדפדפן.

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

כעקרון, ניתן להשתמש תמיד רק בקובץ HTML שיכיל את הכל [כן, כולל את התמונות עצמן...] ולא להזדקק לקבצי JS או CSS.

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

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

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

זה תכנות בצד לקוח.
תכנות ג'אווה סקריפט.

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

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

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

[כמעט] לכל אובייקט HTML, יש מאפיין style המכיל את מאפייני העיצוב שלו.

היות וקשה מאד להדגים כאן בפורום את הדברים, המערכת כאן מעט מוגבלת ויש צורך בהמון טריקים כדי להסביר דוגמאות פשוטות.
אני ישתמש במערכת חיצונית המשמשת להדגמות של סקריפטים ועיצוב.
אני מקווה שהאתר פתוח לחסומים, אם נראה שלא, אנסה אולי להעלות קבצי HTML מצורפים [אבל זה יהיה קשה להבין כך]
המערכת נקראת jsfiddle, ונמצאת בכתובת הזו
לכל דוגמה שיוצרים, היא מייצרת קוד ייחודי בשורת הכתובת, וכך ניתן להעביר דוגמאות בקלות מאחד לשני.
היא מכילה 4 תיבות, המכילות את אובייקטי ה HTML, סקריפטים, ועיצוב. ותיבת תוצאה [result]
לאחר שינוי של מאפיין, יש ללחוץ על הכפתור RUN, והתוצאה תשתנה בהתאם.
אם רוצים לשלוח את השינויים למישהו, לוחצים על SAVE, ושולחים את הלינק החדש שנוצר.

אנו נבנה אובייקט טבלה בת שני תיבות, ונקבע לכל תיבה מאפיינים שונים
לא נשתמש ב CSS, וגם חלון הסקריפטים יישאר נקי לעת עתה.
כנסו ללינק http://jsfiddle.net/r8V8L/
יש שם טבלה כשאת מאפיינייה הגדרתי בתוך ה HTML עצמו עבור כל תא ותא בנפרד
יש שימוש במאפייני מיסגרת, מאפייני רקע, וצבע הטקסט.
יש שימוש בהגדרת צבע מפורשת [red, blue] וגם בקוד צבע מקוצר [red green blue#]

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

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

לשם הדגמה: אוסיף מספר אובייקטים ואקבע תגית סטייל כללית
בלינק הזה: http://jsfiddle.net/r8V8L/2/

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

בהגדרות הסטייל, שמים סולמית לפני ה ID, ונקודה לפני הקלאס.
הנה דוגמה http://jsfiddle.net/r8V8L/3/
כן נתתי ID לתגית P, וקלאס כהה ובהיר במחזוריות לטבלה
שימו לב: הרקע של אחת התיבות חריג! וזאת מפני שיש לה תגית סטייל מפורשת אישית משל עצמה, הגוברת על הגדרות העיצוב הכלליות.

וכאן מגיע מקומו של קובץ CSS

אם יש לי מספר עמודים באתר, ובהם אובייקטים כלליים זהים [הגדרות הגריד, תפריטים, כותרות וכו'] אין טעם לשים בכל עמוד שוב ושוב את תגית הסטייל.
לשם כך שמים את ההגדרות בקובץ CSS, ומוסיפים במסמך קישור לקובץ.

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

 

[rachel1]

מעולה!!!

 

[rachel1]

מעולה!!!

 

[צובעים בענק]

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

 

[wmw]

פרק שלישי
שפות שרת ומערכות "מוכנות" [ASP PHP WP]

נרענן את הזכרון בהבדל בין את סטטי לאתר דינאמי.

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

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

אתר דינאמי מצריך תיכנות!
מייקרוסופט מספקת מערכת של ASP דוט נט [לפני כן היה ASP קלאסי]
PHP מספקת מערכת סקריפטים מהירה, במערכת חינמית, עם שרתים שרצים גם על לינוקס.
WP מספקת מערכת מוכנה עם שלל תבניות ופיצ'רים מוכנים.

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

איך אני בונה דף כזה?
תלוי באיזו סביבה

הסביבה הקלה ביותר להבנה, היא סביבת PHP [וגם ASP קלאסי שדומה לה במבנה, אך היא כבר שפה שחלפה מן העולם ולא מפתחים בה יותר]

אני פותח דפדפן, ויוצר קובץ טקסט.
פותח בו תגיות HTML תגיות HEAD ו BODY, ומציב את כל האלמנטים הסטטיים הדרושים לעמוד.
כעת, במיקום שבו אני רוצה להציב טבלה דינאמית, אני פותח תגית PHP [או תגית סימן שאלה] ושם אני כותב קוד שרת
קריאה למסד נתונים, שאילתה, משתנה מסוג STRING, לולאה שרצה על על התוצאות ובונה את המחרוזת של הטבלה [כולל הלינקים], ובסוף התהליך, פקודת הדפסה לעמוד.

כעת אני שומר את קובץ הטקסט הזה עם סיומת PHP ושם בתיקייה המיועדת בשרת
מה יקרה כאשר דפדפן יבקש את הדף?

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

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

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

ASP דוט נט לעומת זאת, פועלת בצורה של פקדים.
פקדים הם אובייקטים בעלי תכונות שונות מאובייקטי HTML רגילים
במקום טבלת TABLE יש אובייקט ASP:TABLE שמכיל למשל תכונה בשם DATA SOURCE שיכולה להיות כל מיני אובייקטי DATA המקבלים פרמטרים להתחברות למסד נתונים.
כל אובייקט כזה חייב להכיל פרמטר בשם RUNAT שערכו SERVER, בלעדי זה הוא לא יפעל בכלל.

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

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

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

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

מנוע הWP [וורדפרס] בנוי בצורה כזו.
ישנו מסד נתונים עוצמתי, וישנם תבניות.
תבנית מכילה מספר דברים:
דף תוצאה, שהוא דף המכיל את כל חלקי העמוד ובו כתובים כל החלקים הבלתי ניתנים לשינוי, כצורתם.
ואילו החלקים הניתנים לשינוי, כתובים כמשתנים.
כמו"כ יש דף ניהול, עמוד שדרכו משנים במסד הנתונים וקובעים את ערכי המשתנים.
בדרך כלל יש גם קבצי CSS ו JS משלימים, ואתם דפי קוד PHP עם פונקציות נדרשות.
כאשר הגולש מבקש את הדף הספציפי, השרת מתחיל להריץ את קובץ ה PHP הראשי.
הוא מפנה אותו לקובץ המכיל את ה HTML הסטטי והמשתנים
השרת קורא את זה, שולף את הנתונים שקבע המעצב מתוך מסד הנתונים ומחליף את המשתנים בערכים שנשלפו, וכך, מעיבוד של כל התהליך כולו, נוצר מסמך HTML לדפדפן.

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

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

 

[rachel1]

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

 

[wmw]

במה את רוצה לתכנת?
באיזו שפה?
אפשר להתחיל להתקין ולהשתפשף

 

[chani2006]

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

זה היה מרתק, מלמד ומחכים לקרוא את ההסבר הקולח והברור שלך WMW! תודה!!!


עם זאת, אם יותר לי, אוסיף הערה לאלבום ולרחל:

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

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

אז מה כן?
בניית אתר סטטי (תדמיתי לדוגמא) שגרתי, דורשת בעיקר הבנה בעיצוב, ושליטה בכתיבת קוד HTML וCSS, כשתוספות ספציפיות בJS ניתן להוריד/לרכוש כJQUARY קיים או בהזמנה אישית ממתכנת.
בניית אתר דינאמי במערכת מוכנה, דורשת מעבר לידע הנ"ל הכרות מעמיקה עם המערכת, במקרה שלנו עם וורדפרס, ורכישת מיומנות בשימוש בשפע הפונקציות הגלומות בו.

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

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

בהצלחה!

 

[chani2006]

אשמח בכל אופן להתחיל לפעול לבדי(עד שאמצע מורה ואם בכלל...)
אני מעוניינת לבנות אתר ליצירות של אומן - לא משהו רציני: דף הבית, גלריית תמונות, קצת אודות ודף יצירת קשר.
אני רוצה שהאתר יהיה בנוי בצורה איכותית וברורה.
לשם כך אני צריכה את עזרת המקצוענים כאן:
האם לבנות אותו על תבנית מוכנה ואם כן איך לבחור אותה ואיך לעבוד עליה...
או פשוט לבנות הכל לבד מההתחלה...??? שגם לזה אצטרך הסבר פשוט עם מה להתחיל(ולא עוד קישור למדריך html,css וכו' אלא פשוט את השלבים פחות או יותר.)
סליחה על מטר השאלות....
ושוב תודה לכל העוזרים הנפלאים!!!

לעניות דעתי:

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

שלב ב' - התקנת וורדפרס:
יש לציין שלצורך כך את צריכה גישה לשרת (FTP), כלומר רכישת דומיין ואכסון, או לחילופין התקנה של שרת מקומי עד להעלאה לאויר.

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

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

שלב ה'- הזנת תכנים:
שימוש במנגנון הניהול כדי להזין תכנים, תמונות וכו'.

הערה: התכנים יוכלו להשתנות ולהתעדכן כל הזמן על ידי האומן עצמו, בשונה מהעיצוב שיישאר קבוע, או שיוכל להשתנות רק בעזרתך.

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

מקווה שעזרתי קצת.

 

[שמח לעזור]

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

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

 

[שמח לעזור]

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

רחל כתבה:

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

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

 

[chani2006]

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

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

 

[rachel1]

לעניות דעתי:

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

שלב ב' - התקנת וורדפרס:
יש לציין שלצורך כך את צריכה גישה לשרת (FTP), כלומר רכישת דומיין ואכסון, או לחילופין התקנה של שרת מקומי עד להעלאה לאויר.

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

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

שלב ה'- הזנת תכנים:
שימוש במנגנון הניהול כדי להזין תכנים, תמונות וכו'.

הערה: התכנים יוכלו להשתנות ולהתעדכן כל הזמן על ידי האומן עצמו, בשונה מהעיצוב שיישאר קבוע, או שיוכל להשתנות רק בעזרתך.

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

מקווה שעזרתי קצת.

תודה על ההסבר הברור!
אני חושבת שבשלב ההתחלתי עדיין לא אכנס למערכות ניהול תוכן וכו'. סה"כ מדובר באתר סטטי ולא מסובך וכדי להתלמד אתחיל ראשית כל בפיתוח צד לקוח בלבד(html,css,js)
ואראה איך הולך לי.
מה דעתכם?
או שכן כדאי כבר לעשות הכל באתר אחד כדי להתנסות בכל התחומים יחד?

 

[rachel1]

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

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

 

[wmw]

טוב, קודם כל תודה לכל הקוראים והנהנים
שמח שאני לא טורח לחינם.

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

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

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

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

וזה לא קל.


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

 

[צובעים בענק]

wmw, כל הכבוד על היוזמה!!

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

בנוסף אשמח להעזר עוד ולדעת אילו צעדים בסיסיים צריך לעשות וכיצד
הגדרת שרת מדומה (לוקלהוסט??)
אח"כ, איך ממשיכים?[יעזור לנו מאד לראות צעד אחר צעד]

בעבר עשינו כפרוייקט אתר מכירות ב-ASP.net,עם data base, דווקא יצא נחמד אבל היום... זקוקה לסדר שוב את הכל בראש ...
הפרקים שלך באמת עושים את העבודה!! תודה!

תודה לרחל שפתחה את האשכול,
ל'חני' ול'שמח לעזור' על ההערות המחכימות!!
בהצלחה לכולם!

 

[wmw]

פרק רביעי - מבנה בסיסי למסמך HTML, עיצוב באמצעות מסמך CSS

מסמך HTML בנוי בצורה מאד דומה ל XML
כללי ה XML
1. לכל תגית פתיחה יש תגית סגירה או לוכסן סגירה לפני הסוגריים הסוגרות
2. אפשר לקנן תגיות, ולא ניתן לסגור תגית פנימית מחוץ לתגית החיצונית.
3. לתגית יש מאפיינים, שנכתבים בין הסוגריים של הפתיחה
4. לתגית יש תכולה שנכתבת בין תגיות הפתיחה לסגירה

דוגמאות לכללים [זה נכתב כביכול כ PHP, אבל זה פשוט HTML]:
כלל 1 - צורות חוקיות

<tag/> <tag></tag>

כלל 2 - קינון חוקי

<parrent>
    <son></son>
</parent>

- קינון בלתי חוקי

<parrent>
    <son>
</parent>
    </son>

כלל 3 - מאפיינים

<tag attr='yes' boo='no'></tag>

כלל 4 - תכולה

<tag>this is example</tag>

מבנה מינימלי של קובץ HTML חייב להבנות בצורה כזו:
תגית HTML כללית
בתוכה יש במקביל שני תגיות
הראשונה היא HEAD
והשניה היא BODY

דוגמה

<html>
    <head>
    </head>
    <body>
    </body>
</html>

ייעודה של התגית HEAD הוא להכיל הגדרות כלליות של העמוד
את תגית הSTYLE למשל שומרים ב HEAD
ה HEAD גם מכיל תגית TITLE המכילה את הכותרת שהדפדפן יציג בלשונית
כמו"כ יש ב HEAD את הקישורים לקבצי JS ו CSS
ה BODY מכיל את האלמנטים של העמוד עצמו
בתוכו שותלים את כל הפקדים, ולמעשה את כל מה שהגולש יראה [ולא יראה] על המסך.

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

ל CSS יש מגוון מאד רחב של סלקטורים
סלקטור הכוונה למשפט הקובע על מי יחולו ההגדרות
מבנה המסמך הבסיסי הוא סלקטור + סוגריים מסולסלות שבתוכן ישנם הגדרות הנכתבות במבנה של: פרמטר + נקודותיים + ערך + נקודה פסיק;

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

למשל:
אני מעוניין לרפד DIV בצורה הבאה:
20 פיקסלים מלמעלה
15 פיקסלים מימין
10 פיקסלים מלמטה
15 פיקסלים משמאל

אני יכול לכתוב כך:

div{
    padding-top:20px;
    padding-right:15px;
    padding-bottom:10px;
    padding-left:15px;
}

ואני יכול לכתוב גם כך:

div
{
    padding:20px 15px 10px 15px;
}

שימו לב, זה נכתב בכיוון השעון ומתחיל מהשעה 12...

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

גם לאובייקטים מורכבים, יש אפשרות לאפיון כל הערכים בבת אחת, או לאפיון מפורט בזה אחר זה
למשל ל font, background, border
ל CSS ישנם סלקטורים רבים מאד, חלקם פועל רק על CSS3, דהיינו דפדפנים חדשים, בעיקר הסלקטורים המתוחכמים.
הנה רשימת סלקטורים עם תצוגה מאיזו גירסה הם פעילים [הטור הימני]

הנה כאן דוגמה עם הערות חשובות שכתבתי בעברית בתוך ה CSS
אל תהססו לנסות לשנות, ללחוץ על RUN ולראות את התוצאות

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

תודה על המשובים
בהצלחה

 

[wmw]

כדי להתחיל משהו ב ASP [אל דאגה, במקביל נלמד גם JAVASCRIPT ועוד המון CSS - כך שזה יהיה רלוונטי גם למי שלא הולך על דוט נט]
ניתן להוריד ולהתקין את הגירסה החינמית של ASP
http://www.microsoft.com/visualstudio/eng/products/visual-studio-2010-express

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

זה כמובן מחזיק גם מיני IIS שנותן לדבג עם LOCALHOST.

 

[rachel1]

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

 

[chani2006]

לכספת המומלצים!!!