طراحي وب

تعريف پروژه
در يك پروژه وِب عادي، با ورود افرادي مواجه مي‌شويم كه كارهاي متفاوتي انجام مي‌دهند؛ شماري از افراد حقيقي و توابع متغير آنها. در طول انجام اين پروژه ، بايد خودتان را جاي تك‌تك افراد بگذاريد و كارهاي مختلفي انجام دهيد ولي در يك پروژة وِب عادي به افراد زير نياز داريد:
• يك طراح براي توليد واسط كاربري، طرح‌بندي و طراحي هنري

• يك مؤلف براي نوشتن مطالب
• يك برنامه‌نويس، در صورتي كه مطالب پويا (dynamic) وجود داشته باشد ـ كه اين روزها تقريباً هميشه وجود دارد.
• يك توليدكننده (Producer) براي گرآوري اين موارد.
البته به اين معني نيست كه فقط دست كم چهار نفر براي چهار كار لازم است. در پروژة يك شركت بزرگ، ممكن است از افرادي كه در واحدهاي فروش يا خريد يا امور دارايي هستند، نيز كمك گرفته شود.

خوشبختانه، در اين پروژه مي‌توانيد جاي هر كدام از افراد باشيد و تمام تصميم‌گيريها را خودتان انجام دهيد. ولي باز هم بايد نكاتي را مدنظر داشته باشيد.

اهداف پروژه
تا وقتي كه نمي‌دانيد، چه كاري مي‌خواهيد انجام دهيد، نمي‌توانيد سايتي با كارايي بالا بسازيد.
مثلاً در يك سايت شخصي، هدف داشتن خانه‌اي خيالي است. شايد بخواهيد اطلاعاتي در مورد چيزهايي كه دوست داريد و به آن علاقه‌مند هستيد، آنجا بگذاريد و يا يك برنامة تلويزيوني كه دوستش داريد و يا هزاران مطلب ديگري كه به آن علاقه داريد؛ مثلاً بخواهيد جايي را به عكسهاي گربه‌تان اختصاص دهيد تا آن را در دنيا پخش كنيد!

به هر حال، در دنیاي تجارت، هدف هميشه يك چيز است: به دست آوردن پول. در نهايت تاجران متوجه مي‌شوند كه به دست آوردن پول در وِب، ضرورتاً به معني فروش ميليون‌ها كتاب و كامپيوتر و چيزهاي ديگر نيست. يك شركت سايت وب مي‌تواند مستقيماً ، از تجارب الكترونيكي يا دريافت سود سهم، پول به دست آورد و يا بطور غيرمستقيم با برقراري روابط اجتماعي بهتر با مشتريان ، قطع هزينه‌هاي زنجيروار موجود، ارتباط بهتر با كارپردازان و يا كم كردن هزينه‌هاي ديگر به پول دست يابد
.
اصطلاح جديد : تجارت الكترونيكي (E-commerce) ـ در چند سال اخير به شكلهاي مختلفي معني شده است، ولي به نظر مي‌رسد بيشتر به معني خريد و فروش اجناس، از طريق وِب باشد. در گذشته هم، مربوط مي‌شد به تجارت اجناس الكترونيكي كه اكنون با e-business شناخته مي‌شود.

چندي پيش، وارد يك شركت مخابراتي بزرگ شدم كه مي‌خواست تجهيزات تلفني را وارد يك كاتالوگ Onlineكند . مديران نگران اين نبودند كه ميزان فروش از طريق سايت چگونه باشد ، چون هزينة اصلي سايت را فرستادن كاتالوگ ۴۰۰ صفحه‌اي به تمامي مصرف‌كنندگان، به وجود مي‌آورد. اكنون شركت ضميمة كوچكتري را براي مشتريان مي‌فرستاد و مشتريان را به بيرون از سايت برمي‌گرداند. در اين صورت هر بار كه مشتري خريد نكند، به جاي اينكه اطلاعاتش را از اتصال تلفني با اداره بگيرد، آن اطلاعات را از خارج سايت دريافت كند و به اين شكل، هر بار حدود ۱۲ دلار براي شركت ذخيره مي‌شود. اين نمونه‌اي از كاستن هزينه‌ها است.

در اينجا، يك مجلة فرضي با نام Primary-Outpost مي‌سازيم و اهداف پروژه به ترتيب اهميت چنين است:
• ايجاد مخاطب كافي براي منفعت بردن از آگهي‌هاي تبليغاتي.
• فروش صنايع دستي و محصولات وابستة علمي ـ تخيلي (Science-Fiction).

در اينجا، ترتيب خيلي مهم است. زيرا شما مي‌خواهيد يك پروژة بزرگ با كاركرد درست را بسازيد، اكثر مطالب و (Contents) وظايف (Functionality) پروژه، بر ايجاد حالتي متمركز است كه كاربران ، براي مدت طولاني ميخكوب شوند و مرتباً به اين سايت برگردند. در راستاي اين اهداف، شما مطالب خود را دائماً تغيير خواهيد داد و مي‌كوشيد تا مفهوم تشكيل گروه و انجمنها را در سايت خود ايجاد كنيد.

اگر بر تجارب الكترونيكي متمركز مي‌شديد، ممكن بود بيشتر بر جريان پردازش خريدكردن و جذابتر ساختن فضاي سايت متمركز شويد.

اصطلاحات جديد:
• Content ـ شامل اطلاعات ايستا و پويايي است كه در سايت وجود دارد؛ مثل اخبار و خصوصيات هر محصول.
• Functionality ـ وابسته به اين است كه كاربر چه كاري مي‌تواند در سايت انجام دهد؛ مثل مزايده در حراج اجناس يا بررسي كردن موجودي حساب بانكي.

مخاطب مورد نظر شما
مخاطب مورد نظر شما، چيزهاي زيادي را دربارة روش ساختن و توسعة سايت تعيين مي‌كند. واضح است كه يك سايت بازي براي بچه‌ها بايد قيافه و عملكرد كاملاً متفاوتي نسبت به سايت شركت صنعتي Online داشته باشد. ولي چيزي كه خيلي مشخص نيست، اين است كه مخاطب مورد نظر شما مي‌تواند، استفاده از تكنولوژي جديدتر مثلاً DHTML را براي سايت‌تان حكم كند.

 

اصطلاح جديد: (HTML Dynamic) ـ تركيبي است از طرح‌بندي و قابليتهاي اسكريپت كه به اشخاص اجازه مي‌دهد، يك صفحة وِب را طوري بسازند كه چيزهايي روي صفحه حركت كنند يا وقتي كه كاربر ماوس را روي آنها مي‌كشد، ظاهرشان تغيير كند. DHTML بيشتر براي انيميشن‌ها به كار مي‌رود و مي‌تواند ابزار قدرتمندي باشد؛ البته اگر بطور شايسته‌اي به كار رود.

به عنوان مثال، در اين پروژه هدف، سرگرميهاي داستانهاي علمي ـ تخيلي (Ficiton Science) است؛ اين سايت دربرگيرندة گروهي از افراد حرفه‌اي است كه از محل كار خود با سايت تماس مي‌گيرند (البته در وقت مخصوص خودشان!) ولي اكثر مخاطبان ، دانشجويان و مشتريان ديگري هستند كه از خانة خود تماس مي‌گيرند.
خوب اينها به چه معني هستند؟ مفاهيم جزئي راجع به كاربران را بعداً توضيح خواهيم داد اينجا فقط خلاصه‌اي از نحوة برقراري ارتباط كاربران را بيان مي‌كنيم:
• احتمالاً كاربران از طريق يك اتصال كُند با شكت ارتباط برقرار مي‌كنند، پس شما بايد تعدادگرافيك‌ها را به حداقل برسانيد.
• كاربران مجموعه‌اي از مرورگرها و سيستم عامل‌هاي مختلف را دارند، بنابراين نمي‌توانيد در سايت‌تان به آخرين تكنولوژي تكيه كنيد.
• ممكن است ، تجربة كاربران در يك سطح نباشد و به خوبي كسي كه هر روز با وِب كار مي‌كند، مهارت نداشته باشند. بنابراين لازم است كه محيطي ساده و دوستانه را فراهم كنيد.

 

البته اين بدين معني نيست كه اكنون نمي‌توانيد سايتي با امكانات گرافيكي قوي بسازيد. فقط به اين معني كه اگر شما اين كار را انجام دهيد، به يك نسخة سايت فقط متني، با پهناي باند (bandwidth) كمتر نياز خواهيد داشت.

اصطلاحات جديد:
• پهناي باند (with band) ـ به معني مقدار مطالعات است كه مي‌تواند از طريق اتصالات اينترنت مبادله شود. به عنوان مثال، يك موم kbps 56 سريعتر از يك مودم kbps 8/28 است. بنابراين مي‌گويند «پهناي باند بيشتري دارد.» اتصالات ISDN در kbps 128 بيشترين پهناي باند را دارد. يك كابل مودم مي‌تواند سرعت را به بالاي Mbps 27 برساند ولي در عمل، اغلب Mbps 5/1 (kbps 1500) است.

• kbps و Mbps – واحدهايي براي اتصالات شبكه‌اي هستند ، به ترتيب كيلوبيت در ثانيه و مگابيت در ثانيه.
• TI ـ اتصال ثابتي براي اينترنت است، معمولاً در سازمانها وجود دارد كه در مقايسه با مودم‌هاي آنالوگ رايج، پهناي باند بالايي دارد.
• Doubli Publishing ـ يعني ايجاد دو نسخه از يك سايت وب . معمولاً با پهناي باند بالا و پهناي باند پايين است. به اين طريق ، كاربر مي‌تواند انتخاب كند كه كدام يك براي ديدن ، بهتر است.

اهداف كاربر
از طرفي، وقتي كاربران سايت را مي‌بينند، هدفهايي را در ذهن خود دنبال مي‌كنند. براي شما هم مفيد است كه بدانيد اهداف آنان چيست. در اين صورت، متوجه مي‌شويد كه طراحي‌تان به آنها كمك مي‌كند يا مانعي براي رسيدن به اهداف آنهاست. در يك سايت پويا، كاربران به سايت شركت متصل مي‌شوند، محصولاتي را سفارش مي‌دهند، سفارشهاي موجود را بررسي مي‌كنند، اطلاعات Offline دريافت مي‌كنند و يا فعاليتهاي ديگري انجام مي‌دهند؛ اين عمليات را مي‌توان تصور كرد. فرض كنيد كه كاربران‌تان به ترتيب اهميت چنين اهدافي داشته باشند:
• به منظور گرفتن آخرين اطلاعات راجع به سريال‌هاي تلويزيوني علمي ـ تخيلي (Science-Fiction) و فيلم‌ها
• براي دور هم جمع‌شدن دوستان Online

• براي گرفتن صنايع دستي علمي ـ تخيلي
اكنون، مي‌توانيد در مورد نحوة كار، حدسهايي بزنيد. در عمل هم ، براي اينكه متوجه شويم مشتريان به چه چيزهايي نياز دارند، بايد پول زيادي خرج كنيم. ولي در اينجا، بعد از اينكه سايت پيشرفت كرد، مي‌توانيد كارهايي كه كاربران براي ديدن سايت انجام مي‌دهند را پيگيري كنيد و يا حق تقدم‌ها را تغيير دهيد.

مطالب و وظايف
اكنون كه مي‌دانيد چه كاري مي‌خواهيد انجام دهيد، مي‌توانيد مطالب و وظايفي كه سايت دارد، را تعيين كنيد. به اهداف مخاطبان توجه كنيد. حداقل به اين موارد نياز داريد:
• اخبار (news)
• مصاحبه (Interviews)

• برنامه‌ريزها (برنامه‌ريزي برنامه‌هايي كه تلويزيون يا سينماها به زودي نشان خواهند داد)
• اطلاعات آرشيو
• گفتگو (chat) و يا همايش‌هاي مباحثه (Discussion Fouums)
• فروشگاه صنايع دستي
چون در حال حاضر، مورد زير هم بازار بسيار داغي دارد، پروژه شامل اين قسمت نيز مي‌باشد:
• مزايده‌هاي فرد به فرد

و بهتر است براي كاربراني كه به سايت برمي‌گردند ، پيشنهاد كنيم:
• يك صفحة شخصي براي شروع

وب چگونه كار مي‌كند؟
اكنون كه ما مي‌دانيم چه مي‌سازيم، لازم است نگاهي به چيزهايي كه نياز داريم تا كار انجام شود، بيندازيم. ابتدا به يك صفحة وِب سِرور واقعي نگاهي كنيم تا با طرز كار آن آشنا شويم.

هنگامي كه با مرورگر خودتان به يك صفحة وِب دسترسي پيدا مي‌كنيد، در واقع با يك كامپيوتر ديگري ارتباط برقرار مي‌كنيد كه ممكن است آن سوي دنيا باشد. عملياتي كه انجام مي‌شوند، عبارتند از:
۱- كامپيوتر شما به آدرس IP كامپيوتري كه آن را فراخواني كرده‌ايد، مراجعه مي‌كند. هر كامپيوتري كه روي اينترنت است ـ همچنين كامپيوتر شما، در صورتي كه به اينترنت متصل شويد ـ يك آدرس IP واحد و منحصر به فرد دارد كه آن را به بقية كامپيوترهاي اينترنت مي‌شناساند. مثلاً ، آدرس IP براي http://www.yahoo.com چيزي شبيه ۲۰۴٫۷۱٫۲۰۰٫۶۷ است. آدرس IP ، شبيه شماره تلفن است.
۲- كامپيوتر شما يك پيغام يا درخواست را به آن آدرس مي‌فرستد. شبيه زنگ تلفن است. اگر كسي در خانه براي جواب دادن به تلفن نبود، از زنگ‌زدن جلوگيري مي‌كند تا مرورگر قطعاً بداند كه جوابي نخواهد گرفت و قفل كند.

۳- آن كسي كه به صورت عادي جواب تلفن را مي‌دهد و بعد صحبت مي‌كند، برنامة وِب سِرور است كه به روشهاي متعددي فعال مي‌شود، روشهايي مثل يك اپراتور سوئيچ‌بْرد درخواستها را دريافت مي‌كند و عمل مناسب را برمي‌گرداند.

۴- اولين چيزي كه وِب سِرور احتياج دارد، اين است كه تعيين كند چه چيزي درخواست شده است. اغلب اوقات، تقاضا براي دريافت يك صفحة وِب ايستاست. بنابراين سِرور اطلاعات مناسب را فراهم مي‌كند و در جواب مرورگر مي‌فرستد. گاهي اوقات، اطلاعات پويا درخواست مي‌شوند؛ مثل Pages Server Active . در اين حالت، سِرور عملاً كارهايي مثل اجراي يك دستور يا اجراي يك برنامه را براي بازگرداندن اطلاعات انجام مي‌دهد. سِرور، اطلاعات را داخل يك صفحه تدوين مي‌كند كه در جواب مرورگر بفرستد.

۵- مرورگر، اطلاعات را دريافت مي‌كند و در واقع، اصلاً اطلاعي ندارد يا دانستن اطلاعاتي راجع به آن برايش مهم نيست، چه صفحه از چهارده بانك اطلاعاتي مجزا در نقاط مختلف دنيا ايجاد شده باشد و چه از يك فايل متني سادة قديمي تمام چيزي كه مرورگر مي‌فهمد اين است كه در حال دريافت يك سري از اطلاعات است. بر اساس سرآيندها يعني همان اطلاعاتي كه درست قبل از بخش اصلي صفحه رسيده‌اند و در مورد صفحه و محتوايش توضيح مي‌دهند، مرورگر تصميم مي‌گيرد كه با جريان اطلاعات چه كار كند. مثلاً يك صفحه HT/ML با سرآيند “text/html ” براي مرورگر مشخص مي‌كند بايد دنبال برچسبها بگردند و متني را نمايش دهند. يك فايل تصويري ممكن است با سرآيند “image/gif” بيايد كه در حقيقت به مرورگر مي‌گويد كه به وسيلة بازسازي اطلاعات دريافتني، يك تصوير را نمايش دهد.

اصطلاحات جديد : آدرس IP ـ براي هر كامپيوتر، آدرس Protocol Internet است ، يك عدد چهار قسمتي است كه بطور منحصر به فردي ، كامپيوتر را در اينترنت مي‌شناساند. شبيه شمارة تلفن كامپيوتر است.
براي اينكه هر مطلب پويايي بر روي ماشين شخصي شما بتواند اجرا شود، به يك وِب سِرور قابل دسترس احتياج داريد. نحوة انجام عمليات به سيستم عامل شما بستگي دارد. ولي در هر حال براي ASP و HTML به يك صورت خواهد بود. مسألة مهم ، قراردادن ابزارها و نصب آنها مي‌باشد. بعد هم مي‌توانيد روي آن كارهايي انجام دهيد.

ويندوز ۲۰۰۰
ويندوز ۲۰۰۰ داراي Service Information Internet نگارش ۵ (IIS5.0) مي‌باشد كه براي سرويس‌دهي ASP لازم است. IIS نگارش ۵ به صورت خودكار نصب مي‌شود. مگر اينكه سيستمي را ارتقا دهيد كه Server Web Personal نصب كرده باشد، ولي افزودن آن كار مشكلي نيست. براي نصب و شروع كار با IIS نگارش ۵ اين مراحل را انجام دهيد:
۱- از منوي Start ابتدا Setting و سپس Panels Control را انتخاب كنيد. روي قسمت Items Remove/ADD دوبار كليك كنيد.
۲- ADD/Remove Windows Components را انتخاب كنيد.
۳- بلافاصله ، مطمئين شويد كه كادرهاي انتخاب مربوط به IIS و Debugger Script انتخاب شده‌اند. Next را كليك كنيد. ممكن است لازم باشد سي‌دي نصب را وارد كنيد.
۴- نرم‌افزار، خودش نصب مي‌شود. وقتي پايان يافت ، Finish را كليك كنيد.
از اينجا به بعد به نگارش ويندوز ۲۰۰۰ شما بستگي دارد. اگر ويندوز ۲۰۰۰ سِرور را اجرا كنيد، يك ورودي، زير Programs براي Manager Services Tools/Internet Administration خواهيد ديد.
اگر نگارش Professional ويندوز ۲۰۰۰ را اجرا مي‌كنيد، در واقع دو راه براي انتخاب داريد. به پانل كنترل برگرديد، مثل مرحلة اول . ولي اين بار Tools Administrative را دوبار كليك كنيد. از آنجا مي‌توان ، Manager Services Internet يا Manager Web Personal را اننتخاب كرد. هر دو ابزار ، IIS نگارش ۵ را اداره مي‌كنند و هيچكدام از آنها خيلي جديد نيستند.

Manager Services Internet خيلي شبيه واسط كاربردي IIS نگارش ۴ است. به شما اين امكانات را مي‌دهد كه شروع به كاركنيد، متوقف شويد. سايت‌هاي وِب متعددي را مديريت مي‌كند و سرويس‌هاي مختلفي مثل FTP و email را ارائه مي‌دهد. ظاهر آن شباهت زيادي به ويندوز اِكسپلُرر دارد.
Manager Web Personal همان واسط كاربري براي Server Web Personal نگارش ۴ است كه براي اجرا روي ماشينهاي ويندوز ۹x طراحي شده است. Manager Web Personal نمايي از IIS نگارش ۵ مي‌باشد. ولي بسيار ساده‌تر از Manager Services Internet است.

در حالي كه Manager Services Internet اجازة انجام هر كاري ، در هر سايت وِبي و بر هر ماشيني را كه لازم باشد مي‌دهد، PWM اينطور نيست و اختيارات كمتري، تنها در حد Site Web Default ارائه مي‌نمايد. وظايف اصلي اينها هستند: شروع كردن توقف، ساختن يك شاخة جديد (directory) ، پاك كردن شاخه‌ها و تصميم‌گيري اينكه آيا اسكريپت‌ها در شاخة اصلي اجرا بشوند يا خير.

 

دسترسي به بانك اطلاعاتي با استفاده ازASP
آنچه در اين قسمت مي‌خوانيد :

• ايجاد بانك اطلاعاتي و ODBC DSN
• درج ركوردها در بانك اطلاعاتي
• ايجاد يك اتصال به بانك اطلاعاتي
• مفاهيم مقدماتي SQL : درج كردن (Insert)
• افزودن خصوصيات محاوره‌اي (Interactive) به فُرم‌ها
• مدل‌سازي داده‌ها (Data Modeling)

• رسيدگي به خطاها
• تكميل فرم
• مرتب كردن صفحه با استفاده از جدول HTML
اكنون كه مي‌توانيد ASPها را كنار هم بگذاريد و كارهاي نيمه‌پويا با آنها انجام دهيد، زمان ‌آن رسيده كه به سمت تجارت پيش برويم. محاورات درست از اطلاعات به دست مي‌آيند و اطلاعات در هر جا كه باشند بايد به صورت بانك اطلاعاتي در‌آيند.
وقتي اين قسمت در مراحل برنامه‌ريزي بود (حتي بعد از آن) هر كسي كه آن را مرور مي‌كرد، يك سؤال از من مي‌پرسيد: از كدام بانك اطلاعاتي استفاده مي‌كني؟
جواب من به همة آنها يكي بود : «واقعاً مهم نيست».

زنگ تفريح : انتخاب بانك اطلاعاتي و ODBC
تمام بانك‌هاي اطلاعاتي يك API هستند كه برنامه‌نويسان براي گفتگو با آنها معمولاً از C يا C++ استفاده مي‌كنند. هر كدام با بقيه فرق دارد، در اين صورت، يك برنامة كاربردي كه مستقيماً با يك بانك اطلاعاتي گفتگو مي‌كند، نمي‌تواند با بانك اطلاعاتي ديگري گفتگو كند. ODBC مثل يك مترجم عمل مي‌كند. برنامه‌نويس مي‌تواند با API ODBC بنويسد و سپس ODBC آن فرامين را به بانك اطلاعاتي مخصوصي ترجمه كند؛ با استفاده از يك درايور كه مخصوص آن بانك اطلاعاتي است. به اين طريق برنامه كاربردي از وقتي كه درايور مناسب نصب شود، كار مي‌‌كند.

تا زماني كه اين تئوري در مرحلة يادگيري باقي بماند، هر وقت تصميم بر تعيين معماري سيستم توليدي خود مي‌گيريد، اينكه كدام را انتخاب كنيد اهميت پيدا مي‌كند. تمام بانك‌هاي اطلاعات (يا درايورهاي ODBC) از همة ويژگيها پشتيباني نمي‌كنند و هيچكدام كاملاً با استاندارد SQL مطابقت ندارند. قبل از انتخاب يك سيستم براي برنامة كاربردي خود، از درستي انتخاب خود اطمينان حاصل كنيد؛ طوري كه ويژگيها و ظرفيتي را كه شما لازم داريد، داشته باشد.