מציאת משרה בתחום האינטרנט..

מה זה פיתוח אתרים? | אילו שפות צריך לדעת? | אילו שפות כדאי ללמוד? | אני רוצה להתחיל ללמוד רציני, איך מתחילים? | מהי הדרך הפשוטה ביותר לבניית אתר? | איזו שפת צד-שרת כדאי ללמוד ולמה? | (עדיפות שפות צד-שרת - אשכול נוסף)

כל אלו שאלות נפוצות בקרב מתחילים. (לחצו על הקישורים הנ"ל לקבלת תשובות)

באילו שפות בדר"כ משתמשים בפיתוח אתרים?

ישנם שני סוגי שפות: שפות צד לקוח ושפות צד שרת.
קוד שפות צד הלקוח ניתנות לצפייה ע"י משתמש הקצה ("המשתמש שגולש באתר") והן מפוענחות ע"י תוכנה שנקראת דפדפן (כמו Internet Explorer, Firefox וכו').
קוד שפות צד השרת אינן ניתנות לצפייה ע"י משתמש הקצה, הן נסתרות ממנו, והן מפוענחות ע"י השרת שעליו הקוד "רץ". זהו אותו השרת שאליו נשלחה הבקשה ע"י משתמש הקצה (או יותר נכון הדפדפן) לקבלת קוד שפות צד הלקוח.
Silver Strike הגדיר בעבר את ההבדל בין שפות צד לקוח לשפות צד שרת בצורה יפה באספקט נוסף:

ציטוט:

במקור נכתב על ידי Silver Strike

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

שפות וטכנולוגיות צד לקוח נפוצות:
HTML או XHTML
CSS
Javascript
DOM
DHTML
AJAX
XML

שפות צד שרת נפוצות:
PHP
טכנולוגית ASP.NET
SQL

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

קישורי חומר לימודי:

שפות צד לקוח:

HTML:
שיעור HTML \ מאת W3Schools
עמודים מומלצים:
טבלת סיכום על כל תגי ה-HTML
טבלת ייצוג תוי ASCII באמצעות HTML
שיעור XHTML \ מאת W3Schools
הסבר על XHTML \ מאת W3C

CSS:
שיעור CSS \ מאת W3Schools
עמוד מומלץ:
סיכום תכונות CSS2
CSS3.com

javascript:
שיעור Javascript \ מאת W3Schools
שיעור על טכנולוגית DOM \ מאת W3Schools
שיעור על טכניקת DHTML \ מאת W3Schools
טכנולוגית AJAX:
שיעור על טכנולוגית AJAX \ מאת W3Schools
שיעור AJAX עם הסברים \ מאת xul.fr
המדריך הבסיסי ל-AJAX \ מאת ARTI-CALE

XML
שיעור XML \ מאת W3Schools
שיעור על תת-המבנה RSS \ מאת W3Schools

שפות צד שרת:

PHP:
האתר הרישמי של PHP
לימוד PHP בעברית \ האתר של איתן
WACT: מידע מקיף על קידוד utf8 והתעסקות איתו ב-PHP
חמשת המקומות הטובים ביותר ללמוד מהם PHP / hackyourday.com
האתרים הם: w3schools.com, tizag.com, devzone.zend.com, php.net, או לפי ניסיון עם מערכות קוד פתוח.
עמודים מומלצים:
פירוט על המשתנים הגלובאליים של PHP
PCRE: פירוט על הדגלים ותחביר
אבטחת קוד PHP \ מאת php.net

ASP.NET
שיעור ASP.NET \ מאת W3Schools
מרכז המפתחים של מיקרוסופט בסביבת ASP.NET

SQL
שיעור SQL \ מאת W3Schools
מסד הנתונים MySQL:
המדריך למשתמש של מסד הנתונים MySQL
טיפוסי נתונים
קידודים (Character Sets & Collations)

ברוב\כל השפות:
MaxDesign: מתמקד בעיצוב ופיתוח Web עם אופי אסתטי וסמנטי
Devign
ארכיון פורום "בניית אתרים" בפורום פרש
Webmaster: כולל שיעורים לשפות רבות, ביניהם: HTML,CSS,PHP,JS,SQL
underwar: מדריכים להורדה למחשב במגוון שפות: HTML,JS,DHTML,ASP,ASP.NET,PHP
devGuru: שיעורים על שפות רבות.

קישורי מידע מתקדם (בלוגים, מאמרים, מידע תיעודי וכו'):

שפות צד לקוח:

HTML:
תאימות מאפייני תגי HTML ב-DTD שונים, בתקן XHTML 1.0
טבלאות - מהו השימוש הנכון בהן? (עברית | אנגלית)

CSS:
53 טכניקות CSS
טכניקות CSS מתקדמות. נכתבו ע"י מומחה
תמיכה של CSS ב-eMail
פירוט על ה-Selectors ב-CSS2.1 \ מאת W3C
האקים (CSS Hacks) בדפדפנים שונים
עשרה דרכים לעיצוב טבלאות ב-CSS

javascript:
טכנולוגית AJAX:
שיעור AJAX \ מאת הבלוג ajaxtutorial.net

תאימות קוד בין דפדפנים:
quirksmode
howtocreate
טיפים ליצירת עיצוב אתר תקין ונגיש \ אשכול בפורום פרש

שפות צד שרת:

PHP:
רשימת הבלוגים השווים ביותר בנושא PHP (בצד ימין)
הבלוג של Chris Shiflett: בנושא PHP ואבטחת יישומי Web
אבטחה:
שבעת שגיאות האבטחה הנפוצות

ברוב\כל השפות:
הבלוג AddedBytes: עיצוב, פיתוח ושיווק אתרים
האתר smashingmagazine.com: מידע עצום ומגוון ל-Web developer המתקדם.
הבלוג perfectionlabstips.wordpress.com
האתר 456bereastreet.com
האתר zytrax.com

שונות:
התג <meta>:
התג meta \ מאת W3Schools
תגי meta מהיבט SEO:
פירוט על כל סוג meta ודוגמא מעשית בקוד HTML
פירוט על כל סוג meta, דוגמא מעשית בקוד HTML והמלצה האם כדאי לשימוש.
מיתוסים הנוגעים לתג ה-meta
כתבה על תגי meta \ מאת idan1986, אשכול בפורום פרש

תסריטים (סקריפטים), ספריות, Frameworks וכד':

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

שפות צד לקוח:

CSS:
CSSplay: עיצוב תפריטים, פתרון בעיות CSS בדפדפנים ועוד.
עיצובי תפריטים אופקיים ואנכיים \ מאת MaxDesign
הצעות רבות לעיצוב טבלאות עם CSS

javascript:
סקריפטים:
dynamicdrive: סקריפטים של Javascript ו-DHTML (תפריטים וברי ניווט, לוחות-שנה, זמן ותאריך, אפקטים ועוד)
javascriptkit
RegExLib: ספריית ביטויים רגולריים (לדוגמא, כתובת eMail, כתובת URi, תאריך וזמן ועוד)
Frameworks:
jQuery
dojo
prototype
mootools
Top 10 javascript frameworks

שפות צד שרת:

PHP:
Frameworks

ברוב\כל השפות:
hotscripts.com: סקריפטים בשפות רבות, ביניהם PHP, Javascript, ASP.NET.

שונות:
עיצובי אתר רבים מוכנים לשימוש

הערה: כתבתי רק את ה-Frameworks הפופולרים שאני מכיר. לחץ כאן לרשימה המלאה.

הבהרות:

קידוד

בבניית אתרים, ל"קידוד" יש משמעות אחרת מאשר חיתוך תמונה גרפית באופן כזה שתותאם היטב לאפשרויות העיצוב של CSS ולמבנה ה-HTML.
בקידוד הכוונה היא לייצוג תוים ע"פ טבלת אמת מסוימת.
לדוגמא, קיים קידוד ASCII או קידוד UTF-8 וכו'. לחץ כאן למידע נוסף. , וגם כאן בתגובה של "ישראל K"
קראו על מהו קידוד וכיצד להגדיר אותו?

הקידוד המומלץ ביותר לאתרך - קידוד UTF-8

תקן Unicode פותח בשיתוף ארגון התקינה ISO, והוא נותן ייצוג של כל התוים השימושיים היום ברחבי העולם ברוב השפות. לכל תו בכמעט כל שפה אפשרית יש ייצוג מספרי בתקן זה.
UTF-8 (ראשי תיבות Unicode Transformation Format) הוא אחד מהקידודים שפותחו כדי להציג את כל התוים שבתקן Unicode ע"פ מספרם הייצוגי.
לפני פיתוח תקן Unicode וקידודיו השונים, בדר"כ היו משתמשים בקידודי ISO מסוימים או windows כמו ISO-8859-8-I או windows-1255.
קידודים אלו מאפשרים להציג מעט מאוד תוים במעט שפות (בדר"כ 2-3 שפות לכל קידוד), ולכן פיתחו קידודים כמו קידוד UTF-8 כדי שיהיה ניתן להציג מספר רב יותר של תוים ע"י קידוד אחד.
עד כה ניתן לראות יתרון ברור של קידוד UTF-8 על פני קידודים אחרים - ייצוג מספר רב יותר של תוים וסימנים בכמעט כל השפות הקיימות בעולם. יתרון נוסף הוא שיטת הקידוד המיוחדת של UTF-8, שבעזרתה אורך הבתים המייצג כל תו הוא משתנה (בין 1 ל-4), ומאפשר לנו חיסכון במקום (אם כי לפעמים הוא לוקח יותר מקום מאשר שימוש בקידודים אחרים).
כשתפתחו מערכת, סביר להניח שתרצו שהיא תתאים לרוב האנשים המדברים בשפות שונים, ולכן כדאי מאוד להשתמש בקידוד UTF-8. רוב האפליקציות כבר "מדברות" בתקן זה, זה רק עניין של זמן עד שכולם ישתמשו בו. מסיבה זו גם כדאי להשתמש בקידוד UTF-8, כדי להיות מתואמים עם מערכות אחרות.

למידע נוסף על קידוד UTF-8, קידודים אחרים, ותקן Unicode:
הסבר על UTF-8 וצורת קידוד התוים \ מאת ויקיפדיה
הסבר על Unicode וקידודים - מאמר חשוב להבנה!
הסבר על UTF-8, תקן Unicode, מהו קידוד וכיצד מקודדים \ מאת WACT
הסבר על תוים לעומת בתים, מה ההבדל ביניהם, וכיצד זה מיושם ב-UTF-8 ו-UTF-16
utf-8.com
מידע על BOM \ מאת המרכז למפתחים של מיקרוסופט
מידע על הייצוג המספרי של תוים בקידודים רבים
עמוד עם כל התוים בתקן Unicode והייצוג המספרי של כל תו + תיאור התו \ מאת unicode.org

ההבדל בין שפה, טכנולוגיה וטכניקה

קצה קשה לי למצוא בעצמי הגדרה קצרה וקולעת למושג "שפה", לכן אתן לויקיפדיה להסביר (לחץ כאן להסבר).
תחת הקטגוריה של שפה, יש שפות תיכנות (כמו C או ++C או Java וכו'), שפות תסריט (כמו Javascript או PHP וכו'), שפות סימון (כמו XML או XHTML או HTML וכו'), שפות גיליון עיצוב (כמו CSS או XSL וכו') ועוד.
בפיתוח Web, מתעסקים בעיקר בשפות תסריט, שפות סימון ושפות גיליון עיצוב.
לפעמים לשפה מסוימת יש טכנולוגיה הקשורה אליה. טכנולוגיה זו היא extension לשפה, סוג של הרחבה (כמו הרחבות של משחקי מחשב). לדוגמא, ל-Javascript יש טכנולוגיית DOM ו-AJAX (הידוע גם כ- xmlHttpRequest).

טכניקה זה שילוב של מספר שפות על מנת לקבל תוצר טוב יותר.
לדוגמא, ל-Javascript יש טכניקה הנקראת DHTML, שבעזרתה יוצרים אתרים דינאמיים ומוסיפים חווית גלישה טובה יותר.
טכניקת DHTML כוללת בתוכה שפת סימון (HTML או XHTML), שפת העיצוב CSS, שפת התסריט Javascript (להלן JS) וטכנולוגיית DOM.
ייחסתי את טכניקת ה-DHTML ל-JS כיוון שללא JS, טכניקה זו לא הייתה מתאפשרת. JS למעשה זה עיקר הטכניקה (לפחות לפי דעתי) ודרכו היא מתאפשרת.

הסברים:

HTML:

זו שפה לסימון התוכן, ובכך נותנת לו משמעות והיררכיה.
לדוגמא, אם אכתוב:
קוד:
<p>This is some code:
<code>
if (i==5)
 print 'Hello World!';
</code></p>
צד הלקוח יידע שהתוכן שבתוך תג ה-code הוא קוד מסוים בשפת תכנות (או שפה אחרת, כל עוד משמעות התוכן יהיה קוד), ושהקוד הזה נמצא בתוך פיסקה (תג p) עם תוכן אחר ("This is some code").
לעיתים מתייחסים אל תגים בתור אלמנטים.

CSS:

זו שפה לעיצוב התוכן באמצעות תגי ה-HTML. לדוגמא באמצעות CSS, נוכל לתת צבע רקע אדום לכל התוכן שנמצא בתוך התג code, בצורה הבאה:
קוד:
<p>This is some code:
<code style="background-color:red;">
if (i==5)
 print 'Hello World!';
</code></p>
כל הדפדפנים נותנים לתגים הגדרות עיצוב ראשוניות, לכן במידה והגדרה זו לא מתאימה לפי הצורך, יש לדאוג לשנות אותה בקוד ה-CSS.
CSS מספקת לנו אפשרויות עיצוב נרחבות, ביניהן צבע כתב, צבע רקע של אלמנטים\תגים, ריפוד תגים ועוד.

XHTML:

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

עם שימוש נכון ב-CSS, כמות התעבורה תיקטן משמעותית. תארו לכם אתר אינטרנט שקוד ה-HTML שלו נראה כך:
קוד:
<p>	
	<span><font color="red" face="arial">Hello World!</font></span>
</p>
לעומת קוד XHTML שמשלב CSS בצורה הבאה:
קוד:
/*** The CSS file ***/
p.fancy
{
	color:red;
	font-family:arial;
}

/*** The XHTML code ***/
<p class='fancy'>Hello World!</p>
קוד ה-HTML שמוצג לעיל הוא רק דוגמא קטנה. תארו לכם שתראו את זה חוזר על עצמו מספר רב של פעמים...
לעומת זאת באמצעות קוד ה-XHTML, קובץ ה-CSS נטען מהשרת פעם אחת בלבד (ואח"כ נטען ע"י הדפדפן מה- Cache, במידה וזה אותו קובץ ה-CSS), ואז קטנה התעבורה עד לרמה של קוד ה-XHTML, שכפי שאתם רואים הוא מעט יותר מאשר קוד ה-HTML.

להלן קובץ XHTML Strict 1.0 בסיסי ביותר, על שימושיו השונים והנפוצים: XHTML Strict 1.0 (צפו בקוד מקור ; View Source)
לחצו כאן כדי לבדוק את תקינות הקוד הכתוב בקובץ ע"פ תקן W3C.

DTD או DOCTYPE

DTD, ר"ת של Document Type Definition, זו הצהרה שמספקת מידע על חוקיות מסמך ה-XML והאלמנטים\תגים שבתוכו.
כיוון ש-HTML ו-XHTML הן נגזרות של XML, משתמשים ב-DTD על מנת להגדיר את חוקיות המסמך גם בשפות אלה, ע"פ התקנים השונים שנקבעו ע"י ארגון התקינה W3C (ראה הסבר למטה).
ישנן בעיקר שתי הצהרות DOCTYPE נפוצות, והן XHTML 1.0 Strict ו- XHTML 1.0 Transitional (האחרון נפוץ יותר). ראו כאן למידע נוסף.

שימו לב שאפילו אם הצהרתם על DTD מסוים והקוד אינו תקין לפיו, הדפדפן "יתנהג" עדיין לפי ה-DTD שהצהרתם.
"התנהגות" הדפדפן מוגדרת כמצב בו הדפדפן מפרש את קוד ה-CSS בצורה מסוימת (וכמו כן את הגדרות ה-CSS הראשוניות שאותחלו ע"י הדפדפן עצמו). CSS קובע את המראה של האתר, ולכן חשוב להבין מתי מופעל כל מצב, ומהו אופיו.
ישנם לפחות שני מצבים בולטים: Quirks mode ו- Strict mode. כל DTD מפעיל מצב אחר.
להבנה מלאה של המצבים השונים, קראו את הכתבה Quirks mode and strict mode \ מאת quirksmode.org.

DHTML

DHTML זו טכניקה, היא אינה טכנולוגיה ואינה שפה. DHTML עוזרת לנו ליצור אתרים דינאמיים, כאשר יש תלות באירועים החלים במסמך ה-HTML (או מסמך ה-XHTML...).
לדוגמא, אם משתמש מסויים לחץ על אלמנט (שזה אירוע onclick), אז תתבצע פונקציה מסוימת, כמו העלמת אלמנט אחר (הפיכתו לבלתי נראה).

SQL ומסדי נתונים:

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

הגדרות קידוד נכונות בפיתוח מערכת:

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

אז כיצד עושים זאת?

ובכן, בכל יישום הגדרת הקידוד מתבצעת באופן שונה. אקיף את הגדרות הקידוד עבור כל היישומים המוכרים לי ושאני משתמש בהם, תחת הקידוד UTF-8 (אקח אותו בתור דוגמא בלבד, כמובן שאפשר להגדיר גם קידודים אחרים):
HTML:
מתבצעת ע"י תג meta המוצב בין תגי ה-head:
קוד:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
כמו כן יש לשלוח כותר (header) המגדיר קידוד וסוג\פורמט המידע באמצעות שפת צד השרת (במידה וקובץ ה-HTML מוצג באמצעות קוד צד השרת). דוגמא ב-PHP:

קוד PHP:

// Setting the Content-Type header with charset header('Content-Type: text/html; charset=utf-8');

כמו כן מומלץ (אך לא חובה) להגדיר קידוד במאפיין accept-charset של התג form:
קוד:
<form accept-charset="utf-8">
XML:
קוד:
<?xml version="1.0" encoding="utf-8"?>
כמו כן יש לשלוח כותר (header) המגדיר קידוד וסוג\פורמט המידע באמצעות שפת צד השרת (במידה וקובץ ה-XML מוצג באמצעות קוד צד השרת). דוגמא ב-PHP:

קוד PHP:

header('Content-Type: text/xml, charset=utf-8');
SQL:
יש להגדיר קידוד ביצירת הטבלאות (בשאילתת CREATE TABLE) וגם לאחר החיבור למסד הנתונים.
מלבד הקידוד, ב-SQL יש מושג הנקרא באנגלית collation - משמעותו היא כיצד מסד הנתונים "יתנהג" כאשר יעבוד מול\על מחרוזות (כיצד יתייחס לאותיות גדולות\קטנות בשפה האנגלית וכו'). כל מסד נתונים מפרט במדריך למשתמש (בדוקומנטציה) את הגדרות ה-collation בעבור כל קידוד. שים לב(!), לכל קידוד יש collation שונה, חשוב לודא שהגדרת ה-collation היא נכונה ומתאימה לקידוד שהגדרת!

דוגמא להגדרת קידוד ו-collation בשאילתת יצירת טבלה:
קוד:
CREATE TABLE table_Name (
/* Here you define columns with their appropriate column types etc. */
) CHARACTER SET utf8 COLLATE utf8_general_ci
דוגמא לשאילתת הגדרת קידוד לאחר החיבור למסד הנתונים תחת מסד הנתונים MySQL (אולי במסדי נתונים אחרים השאילתא היא שונה):
קוד:
SET NAMES utf8 COLLATE utf8_general_ci
קבצים: כן, גם לקבצים שבתוכם נמצא הקוד חשוב להגדיר את הקידוד. יש לשמור כל קובץ ע"פ הקידוד שהגדרתם למערכת.
עניין זה קריטי במיוחד כאשר בתוך הקבצים יש תוים שאינם בתחום הקידוד ASCII (כדוגמת אותיות בעברית).
שימו לב גם לאשכול מהו קידוד וכיצד להגדיר אותו? שמכיל מידע מפורט יותר.

ארגון התקינה W3C:

אני מניח ששמעתם בעבר את השם "W3C" או "W3".
W3C אלו ר"ת (ראשי תיבות) של World Wide Web Consortium, זהו ארגון תקינה שקובע תקנים לגבי פרוטוקולים ושפות שונים המיושמים בסביבת האינטרנט.
לפני הקמת הארגון - כל חברה שפיתחה תוכנת דפדפן, יצרה קוד צד לקוח ופיענחה אותו בהתאם לדעותיה והחלטותיה. לדוגמא, דפדפן IE5 או IE6 מפענח קוד HTML בצורה אחרת מאשר דפדפן Firefox או Netscape.
כבר ניתן להבין שאם כל תוכנת דפדפן תפענח קוד HTML או קוד צד לקוח אחר בצורה שונה, יהיה למפתח האתרים חיים קשים מאוד.
לכן, הוקם ארגון W3C שקובע כיצד יפוענח כל קוד בשפת צד לקוח, וכיצד יש לפעול ע"פ פרוטוקולים שונים, על מנת שכל תוכנות הדפדפן המפותחות ע"י כל החברות השונות יתנהגו בצורה שווה עד כמה שאפשר בעבור אותו הקוד בדיוק.
לאחר הקמת הארגון, כמעט כל תוכנת דפדפן משתדלת להתאים את עצמה לתקני W3C וכך מפתח האתרים יוכל פחות לסבול עקב אי-התאמה בהתנהגויות הדפדפנים.
יש לציין שלמרות שכל תוכנות הדפדפן מתאימות את עצמן לתקני W3C, הן בנוסף יוצרות קוד אישי של הדפדפן אותו המפתח יוכל לנצל במקרה וירצה (בדומה לנושא מסדי הנתונים, שכל מסד מפרש את השאילתות ופונקציות ה-SQL בצורה שונה). זהו feature אקסטרא למפתח.

קישורים מומלצים:
אתר אירגון התקינה W3C
אימות קוד ע"פ תקן של שפות סימון שונות (HTML, XHTML, XML etc)
אימות קוד CSS ע"פ תקן ה-CSS של W3C
כלים נוספים לאימות

SEO:

המושג SEO (ר"ת Search Engine Optimization) התפתח בשנים האחרונות בעקבות הניסיון של מפתחי אתרים לגרום לאתר מסוים להיות מדורג במקום הכי גבוה שאפשר בתוצאות מנוע חיפוש (כדוגמת Google, או !Yahoo).
SEO הוא נושא רחב, אי אפשר להסבירו על רגל אחת. בעיקרון אכתוב שכל מנוע החיפוש יעדיף לדרג גבוה את העמודים עם כמות טקסט מסוימת ורלונטית ועם קישורים אל\מ- אתרים שמדורגים במקום גבוה יותר ורלונטים.
ב-SEO, מילת המפתח היא רלונטיות בעיקר לכל עמוד (ולא רק האתר). יש לדאוג שנושא האתר לא יחרוג יותר מידי, וזה כולל קישורים אל\מ- אתרים אחרים (יש לקשר לאתרים בעלי נושא דומה כמה שאפשר).
יש להתחשב בעובדה שמנועי החיפוש לא מתרגמים תסריטים (קוד שפות תכנות\תסריט, כמו Javascript או Flash וכד') או שפות עיצוב (כמו CSS, או XSL שזו שפת עיצוב של מסמכי XML), אלא רק שפות סימון (כמו HTML או XHTML או XML) והטקסט שבין התגים, כי זה רק מה שמעניין את מנועי החיפוש.
לכן חשוב לכתוב קוד HTML\XHTML סמנטי (עם תגים בעלי משמעות המתאימה לתוכן) עם שימוש נכון ב-CSS.

מדוע חשוב להתאים את האתר\מערכת לדפדפנים רבים?

התשובה די פשוטה: כדי שכמה שיותר משתמשים יוכלו "לגלוש" כראוי באתר.
כפי שהבנו, הדפדפנים השונים מנסים לפענח את קוד צד הלקוח בצורה שווה עד כמה שאפשר, אך במציאות התוצאה לא תמיד תהיה שווה\דומה, מה שיגרום לאתר האינטרנט שפיתחתם להיראות שונה בדפדפנים שונים.
כל מפתח Web מקצועי ישתדל להתאים את האתר\מערכת שבנה לדפדפנים הגדולים ביותר. זאת נעשה ע"י בדיקה של הקוד בדפדפנים אליהם המפתח מנסה להתאים את הקוד, כלומר צפייה בתוצר הסופי בכל דפדפן.
הדפדפנים "הגדולים" (בעלי כמות משתמשים הגדולה ביותר, מבחינה סטטיסטית) שאליהם כדאי להתאים את הקוד, לפי הסדר משמאל לימין: Internet Explorer 6+, Firefox, Opera, Safari.
הורידו כל תוכנת דפדפן מהאתר המתאים לה. בנוגע להתקנת מספר רב של גירסאות, יש צורך בהתקנה מיוחדת.

לחץ כאן להורדת התקנת גירסאות רבות של IE. או כאן, להורדת IETester. (תודה ל-dardevil)
לחץ כאן להורדת גירסאות שונות של Firefox.

בדר"כ תצטרכו לחפש גירסת Standalone או Portable של דפדפן כדי להתקינו במקביל לגירסה אחרת שלו.

כתיבת קוד מסודר וקריא

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

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

דוגמא לשימוש בהזחות:
קוד:
/* pseudo code */
if (something)
{
	/* execute code */
}
אומנם הקוד המוצג למעלה מזוהה כקוד השייך לשפת תכנות מסויימת, אך מתאים לכל שפה אחרת, שאינה בהכרח שפת תיכנות.
השימוש בהזחות חייב להיות מייושם בכל שפה עבור כל קוד המקונן בתוך קוד אחר.
דוגמא נוספת מ-HTML:
קוד:
<div>
	<h3>Hello World!</h3>
	<table>
		<tr>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
	</table>
</div>
שימו לב שהתגים td מקוננים בתוך תג tr שמקונן בתוך תג table שמקונן בתוך תג div. תגי ה-td מוזחים בהתאם לרמת הקינון שלהם.

שמות סמנטיים לאלמנטים של השפה:
פשוט מאוד, כאשר אתם כותבים קוד, השתמשו בשמות משמעותיים המתאימים לדבר שאתם מבצעים, ולא בשמות סתמיים כמו "foo" (אלא אם הם מתאימים למקרה).
לדוגמא, כאשר אתם יוצרים בשפת תיכנות מסויימת משתנה מסוג מחרוזת של תאריך, קראו לו בשם כמו: current_date
כמו כן, כאשר אתם יוצרים ב-CSS איזשהו בורר מחלקה (class selector), תנו לו שם משמעותי. לדוגמא, אם הוא שייך לתג div שהתפקיד שלו זה להוות מעטפת למסמך ה-xHTML שלכם, תנו לו את השם Wrapper.
שימו לב לא לתת שמות ארוכים או מסובכים מידי. זיכרו שתמיד אפשר להשתמש בתו "_" (קו תחתון) כחלק משמו של האלמנט, על מנת שהוא יהיה קריא יותר.

הערות:
בדר"כ ברוב השפות, אם לא בכולן, ניתן לכתוב הערה בצורה הבאה:
קוד:
/* your note here */
השתדלו לתת הערות איפה שצריך, לא פחות מידי ולא יותר מידי, כאשר בחלק העליון של ההערה יש תיאור קצרצר של הקוד, ולאחר מכן התיאור המפורט (במידה ונדרש).

כדי שתוכלו להנות בכתיבת הקוד, יש תוכנות עריכת קוד\טקסט שיעזרו לכם מאוד.
שכחו מ-Notepad של Windows ותעברו לכלים טובים ונוחים הרבה יותר.

רשימת עורכי טקסט (IDE)
Notepad++
Eclipse
עוד רבים תוכלו למצוא כאן
השוואה בין תוכנות עריכת טקסט

אני אישית ממליץ על ++Notepad.

EOF

אחרון חביב - לחצו כאן לקבלת ה-Favorites שלי בפורמט HTML. בוצע בדפדפן Opera ע"י Save as כדי שתוכלו לייבא אותם אל הדפדפן שלכם.
(סליחה על הבלגן במועדפים אשמח אם כל אחד יוסיף את שלו...).

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

בהצלחה!

כלי אשכול	חפש באשכול זה
הצג גירסת הדפסה שלח דף זה ב E-Mail	חפש באשכול זה: חיפוש מתקדם
מצבי תצוגה	דרג אשכול זה
עבור למצב לינארי מצב כלאיים עבור למצב משורשר	דרג אשכול זה:

הדף נוצר ב 0.08 שניות עם 12 שאילתות
צור קשר - Fresh - למעלה