לוגו אתר Fresh          
 
 
  אפשרות תפריט  ראשי     אפשרות תפריט  צ'אט     אפשרות תפריט  מבזקים     אפשרות תפריט  צור קשר     חץ שמאלה ‎print ‎"Hello World!"; if‎ ‎not rules.‎know ‎then rules.‎read(); חץ ימינה  

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



  #1  
ישן 01-12-2007, 22:07
  משתמש זכר idan1986 idan1986 אינו מחובר  
 
חבר מתאריך: 02.04.02
הודעות: 1,683
שלח הודעה דרך ICQ אל idan1986 שלח הודעה דרך MSN אל idan1986 Facebook profile
הידעתם – קידוד אתרים? (מאמר)

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

בימינו אותו מקודד אתרים שפעם היה מתכנת HTML פשוט (בואו נקרא לו מעכשיו מתכנת אתרים פשוט) היודע לבנות דף אישי עם תמונה שלו, כמה מילים על עצמו בצבע, פלוס קישור אחד או שניים לאתרים אהובים (בערך כמו הדפים ברשתות חברתיות של כל אחד מאיתנו). צריך להיות בעל מיומנויות נוספות, חוץ שליטה מלאה ב-HTML או שהוא לא נחשב למקודד אתרים אלא לעוד סתם בנאדם היודע HTML. מקודד האתרים צריך ידע בסיסי בפוטושופ בשביל לחתוך את תמונת העיצוב "המושלמת" שמעצב האתרים יצר. המעצב אפילו התחשב ומילא את העיצוב בטקסט הדרוש שחס וחלילה מקודד האתרים יעשה את העבודה הזאת בעצמו. מקודד האתרים כמובן צריך ידע בסיסי ב-HTML או ב-XHTML שזה פשוט הרחבה עם תיקונים ל-HTML (בארץ אחוז מקודדי האתרים שיודע ושולטים ב-XHTML הוא נמוך, מאוד נמוך) גם כן מקודד האתרים צריך לשלוט ב-CSS שאותה אסקור באחד הפרקים. לבסוף מקודד האתרים נדרש לבנות את אתריו לפי תקנים סטנדרטיים שהציבו החברה ב-W3C.
כמו כן קידוד האתרים מתחלק לשתי אסכולות מקודדים – אסכולת מקודדי טבלאות (TABLE) ואסכולת מקודדי תאים (DIV). לשמחתכם עליהן אני אדון כל הפרק הראשון.

אסכולות
קידוד האתרים מתחלק לשתי אסכולות מקודדים – אסכולת מקודדי טבלאות (TABLE) ואסכולת מקודדי תאים (DIV). כל אחד ממאמיני אסכולה זו או אחרת יגיד לכם שהאסכולה שלהם היא הכי טובה, יעילה, והמהירה ביותר. למען האמת זה נכון רק לגבי אסכולה אחת והיא אסכולת התאים. מכיוון שייעודן הטבעי של הטבלאות מאז פיתוח שפת ה-HTML היה ונשאר לטבלאי. משום מה זה לא נכנס למתכנתים רבים לראש והם התחילו להשתמש בטבלאות אלו לעיצוב בעזרת הסרת מסגרות הטבלה. זה בהחלט נחמד אך בעייתי, זה גורם לעיצוב להטען הרבה יותר זמן, טבלאות על גבי טבלאות מתבזבזות על מה שאפשר לעשות עם שני תאים ורשימה. זה מביא אותי לעוד נקודה חשובה אסכולת התאים חוסכת בשורות קוד שזה מוביל לקבצים קטנים יותר שזה מוביל לחיסכון עצום בצריכת רוחב פס תעבורת האתר. נכון צודקים הצועקים שבאתרים קטנים על 100 אנשים ליום זה לא משפיע עליהם, אבל תחשבו על אתרים בגודל של וואלה או נענע שעדיין בנויים בדרך של האסכולה הישנה כמה כסף הם היו יכולים לחסוך אם רק היו משדרגים את האתר ובונים אותו בדרך של אסכולת התאים. עוד על הנושא אתם יכולים לקרוא במאמר - “מדוע זה מטופש להשתמש בטבלאות לעימוד”.

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

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

מיפוי תמונה
שיטה זו כבר קצת יותר קשה לקידוד בה אתרים בכך שלא צריך לחתוך שום תמונה בפוטושופ אלא להשאיר אותה שלמה + לתכנת את כל הקוד לבד בלי עזרת פלט קוד פוטושופית. טוב לא לגמרה לבד אפשר להיעזר בתוכנות עזר כמו Map Designer Pro קצת-מאוד-ישנה ולא תואמת את זמנינו אך לוקחת קורדינטות מצויין. בכל מקרה, בשיטה זו לוקח מקודד האתרים את תמונת העיצוב של המעצב ועליה "מלביש" את התכנות. לדוגמא: במקום לחתוך ריבוע "קישור תמונה" בפוטושופ, מקודד האתר ישתמש במיפוי אזור הקישור בתמונת העיצוב ע"י קורדינטות X & Y, רוחב והאורך כדי ל"גדר" את אזור הקישור, וכך הלאה. החיסרון בשיטה זו – היא מתאימה בעיקר לעמודי פתיחה של אתרים בהם אין הרבה תוכן כתוב. היתרון של שיטה זו בכך שתמונה אחת נטענת הרבה יותר מהר וחלק מאשר עיצוב פוטושופ המחולק לטבלאות ונטען בעילגות יתרה כאשר תמונה אחת מפה ותמונה משם כבר נטענו כשרוב תמונות העיצוב נתקעו איפשהו באמצע הטעינה.

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

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

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

XHTML/HTML Transitional - התקן "הרגיל" לתכנות אתרים.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML/HTML Strict - תקן נוקשה יותר בו נעשה כל עיצוב העמודים דרך CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML/HTML Frameset - תקן הקשור אך ורק לתכנות אתרים בעזרת פריימים.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

*הדוגמאות נתנו לקודי תקינות XHTML בלבד.

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

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

פלאש, וג'אווה סקריפט
אלו שני אויביו הגדולים של מקודד האתרים התקני, ואחר כך גם של מקדם האתרים. מהסיבה הפשוטה שפלאש וג'אווה סקריפט לא נסרק ע"י מנועי החיפוש. אם כבר אתם משתמשים בג'אווה סקריפט נסו שג'אווה סקריפט יהיה כמה שפחות מעורב בתוך תגית ה-BODY ובכלל בבקשה תשתמשו ב-CSS ליצירת תפריטים. לפלאש אני מציע להשתמש ב-SWFObject סקריפט כתחליף מעולה, נקי ופשוט של כל מערך תגיות הפלאש מבית אדובי. כמו כן כדי מאוד להתרחק מתפריטי ג'אווה סקריפט או פלאש מאותה סיבה ברורה שהם לא יסורקו ע"י מנועי החיפוש ולא ימשיכו לסרוק את האתר כולו אלא רק את העמוד הראשי. פתרון לכך יכול להיות בניית עמוד SITEMAP שאותו תגדירו בקובץ - ROBOTS.TXT שלכם.

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

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

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

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #3  
ישן 01-12-2007, 23:39
  משתמש זכר idan1986 idan1986 אינו מחובר  
 
חבר מתאריך: 02.04.02
הודעות: 1,683
שלח הודעה דרך ICQ אל idan1986 שלח הודעה דרך MSN אל idan1986 Facebook profile
בתגובה להודעה מספר 2 שנכתבה על ידי emanuel שמתחילה ב "אבל מה עם השאלה הפשוטה..."

ציטוט:
במקור נכתב על ידי emanuel
שלא הכי מצאתי עליה פתרון...
איך לגרום לDIV להראות כמו טבלה...?
איך לעבור מקידוד טבלאות לקידוד DIV...?
כי למשל לכתוב לפי תקן XHTML זה לא ממש בעיה ולא ממש הקטע...!
IFRAME + FRAMES
אפשר להשתמש בINCLUDES במקום זה...
בקצרה הכתבה ממש לעניין~!...
על הבעיות וכו'...אבל לגבי הפתרונות צממצמתה....
למשל בIFRAME וFRAMES לא הזכרת לגבי INCLUDE...
ואיפה יש מדריך על לקודד באמצעות DIV?או על הנושא הנ"ל?


יש קישור במאמר למאמר על מעבר מטבלאות - http://themissingsource.com/presentations/stupidTables

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


תודה. =]

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #4  
ישן 02-12-2007, 00:18
  emanuel emanuel אינו מחובר  
 
חבר מתאריך: 11.02.05
הודעות: 569
שלח הודעה דרך ICQ אל emanuel
עברתי על המאמר...
בתגובה להודעה מספר 3 שנכתבה על ידי idan1986 שמתחילה ב "[QUOTE=emanuel]שלא הכי מצאתי..."

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

ואני לא מעוניין לקנות את הספרים הנ"ל...

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

וללמוד פשוט את התכונות של CSS מW3SCHOOLSזה יעיל...
אבל זה לא הכי עוזר...כי למשל יש לי שאלה בקשר לקידוד...
איך להתאים תאתר לIE + FF אם שניהם קוראים את הCSS בצורה שונה...
(האתר מוצג שונה בשני האתרים)...ויש אלמנטי CSS...
שפועלים בצורה שונה בIE ו FF...אני למשל שמתי לב לאחד כזה"MIN-HEIGHT"...

על הICCLUDE אמרתי שזה פיתרון לבעיית הFRAME \ IFRAME...
ואתה בפסקא הנ"ל...לא כתבת על פיתרונות אפשריים בכלל...

זה נושא מאוד גדול , ויש עליו המון מידע שאמור להיות מרוכז במקום אחד...
(לא כל המידע...אבל בקצרה + קישורים!)
אני הייתי ממליץ על לפתוח נעוץ בנושא כמו "מידע לבונה \ מתכנת האתרים המתחיל [ואולי גם לותיקים ]"...

נערך לאחרונה ע"י emanuel בתאריך 02-12-2007 בשעה 00:32.
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #5  
ישן 02-12-2007, 00:31
  משתמש זכר idan1986 idan1986 אינו מחובר  
 
חבר מתאריך: 02.04.02
הודעות: 1,683
שלח הודעה דרך ICQ אל idan1986 שלח הודעה דרך MSN אל idan1986 Facebook profile
בתגובה להודעה מספר 4 שנכתבה על ידי emanuel שמתחילה ב "עברתי על המאמר..."

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

נכון צודק לגבי הפריימים לא נתתי פתרון שאחד מהם הוא דווקא DIV עם overflow: auto; שעושה עבודה הרבה יותר טובה מאי-פריים. =]
(תודה אני אערוך את המאמר באתר שלי השבוע ואוסיף את הנקודה הזאת)

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

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #8  
ישן 02-12-2007, 03:06
  ישראל K ישראל K אינו מחובר  
 
חבר מתאריך: 25.08.03
הודעות: 9,114
בתגובה להודעה מספר 1 שנכתבה על ידי idan1986 שמתחילה ב "הידעתם – קידוד אתרים? (מאמר)"

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

1. את ההגדרה הנכונה ל"קידוד" תוכל למצוא אם תחפש בפורום זה.
2. הפעולה שאתה מדבר עליה, נקרא: בניית אתר, כתיבת קוד html וכדומה.
3. ההגדרה הנכונה ל"קידוד אתרים" שאתה מתכוון, היא: קידוד אתרים הוא מה שאצל ילדים רבים שטועים בהגדרה זו ומתכוונים לחיצוך תמונות ושילובם באתר באמצעות קוד html.

חבל שהשקעת כ"כ הרבה מלל וזמן בהטעיה.

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

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

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

כלי אשכול חפש באשכול זה
חפש באשכול זה:

חיפוש מתקדם
מצבי תצוגה דרג אשכול זה
דרג אשכול זה:

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

קוד vB פעיל
קוד [IMG] פעיל
קוד HTML כבוי
מעבר לפורום



כל הזמנים המוצגים בדף זה הם לפי איזור זמן GMT +2. השעה כעת היא 17:21

הדף נוצר ב 0.07 שניות עם 10 שאילתות

הפורום מבוסס על vBulletin, גירסא 3.0.6
כל הזכויות לתוכנת הפורומים שמורות © 2024 - 2000 לחברת Jelsoft Enterprises.
כל הזכויות שמורות ל Fresh.co.il ©

צור קשר | תקנון האתר