طراحی سایت

شاید سالها پیش و در سال 1990، زمانی که تیم برنرز لی در لابراتوار شخصی خود در حال پیاده سازی یک زبان نشانه گذاری برای ارتباط فیزیدکدانان با یکدیگر و اشتراک مقالات علمی بین آن ها بود، فکرش را هم نمی کرد این ابداع خلاقانه او، روزی تمام کره زمین را احاطه کند، بطوری که هیچ تجارتی بدون آن قدرت توسعه نداشته باشد! چه کسی فکرش را می کرد که شبکه جهانی وب توسط یک فیزیکدان ابداع شود؟ زبانی که پایه پیشرفت آن با مفهومی به نام ابرمتن (HyperText) بنا گذاشته شد که بر اساس آن صفحات مختلف وب با هم ارتباط پیدا می کنند و میلیاردها مدخل ارتباطی را به کاربران شبکه وب ارائه می دهد.

طراحی سایت در ابتدا با مفهوم نوشتن تگ های HTML و الحاق یک شیوه نامه آبشاری (CSS) به آن معنا پیدا می کرد و صرفاً یک تخصص ساده اما کارآمد بود. به مرور زمان، زبان های برنامه نویسی HTML را متحول کردند و معنا و مفهوم طراحی سایت رنگ مهندسی به خود گرفت.

در سال 1995 نسخه دوم HTML ارائه شد که امکانات آپلود فایل، جداول و نقشه های تصویری سمت مشتری را داشت و در سال 1997 این زبان تحت RFC 2070 بین المللی شد.

در ژانویه سال 1997 HTML 3.2 تحت کنسرسیوم W3C استاندارد شد و مرورگر NetScape برای ترجمه تگ ها پا به میدان گذاشت، از آن روز تا بحال گرچه مرورگر NetScape دیگر در میان نیست، اما همچنان جنگ میان مرورگر ها ادامه دارد!

شاید بتوان این ادعا را کرد که نسخه های مختلف HTML تا پیش از ظهور HTML5 در سال 2008 تفاوت مهمی در ساختار نداشتند و صرفاً نسخه های جدید برای بهبود عملکرد ارائه می شدند، حتی نسخه XHTML هم تغییر شگرفی ایجاد نکرد، اما  HTML5  در کنار CSS3 طراحی سایت را تا حدود زیادی متحول کرد. ارائه شیوه های جدید تگ نویسی به همراه تگ های جدید و خلاقیت های نوین در شیوه نامه آبشاری نسخه 3 دست طراحان سایت را تا حدود زیادی باز کرد و امکانات و خلاقیت های بسیاری به سیستم های طراحی سایت الحاق شد.

 

مشکل عمده طراحی سایت در این سالها

گرچه html5 پس از گذشت 7 سال از انتشار هنوز نتوانسته است به صورت تمام عیار از امکانات خود در دنیای طراحی سایت استفاده کند، اما روزهای یکه تازی این زبان دور به نظر نمی رسد. مشکل اصلی در این زمینه پردازش مرورگر ها به خصوص اینترنت اکسپلورر مایکروسافت می باشد. مرورگرهایی نظر گوگل کروم و موزیلا فایرفاکس با سرعت بسیار بیشتری خود را با تغییرات دنیای وب هماهنگ می کنند، امکانات بروزرسانی خودکار این مرورگرها طراحان سایت را آنقدر راضی نگه می دارند که با خیال آسوده از امکانات جدید HTML و CSS استفاده نمایند. تنها مشکل در این زمینه مرورگر اینترنت اکسپلورر می باشد، مرورگری که بروزرسانی خودکار ندارد و بسیار آهسته اقدام به تولید نسخه جدید می کند. ناسازگاری بسیاری با امکانات HTML دارد و یا بهتر بگوییم تفسیر خودش را از تگ های HTML و دستورات CSS دارد و پر بیراه نگفته ایم اگر بگوییم این مرورگر باعث و بانی عقب ماندگی صنعت طراحی سایت می باشد! همه این هایی که گفتیم وقتی شلیک نهایی را به جامعه طراحی سایت وارد می کند که متوجه می شویم درصد بسیاری از کاربران اینترنت از اینترنت اکسپلورر استفاده می کنند و البته نه به خاطر محبوبیت این مرورگر، تنها به دلیل اینکه این مرورگر بصورت پیشفرض در ویندوزشان نصب است و آنها بلد نیستند مرورگر دیگری نصب کنند!  از طرفی وجود نام اینترنت در نام این مرور (اینترنت اکسپلورر) در ذهن بسیاری از کاربران آماتور این فکر را تداعی می کند که تنها راه ورود به دنیای اینترنت، استفاده از اینترنت اکسپلورر است! حالا باید نشست و دید که نرم افزار جدید مایکروسافت برای کاوش اینترنت که Edge نام گرفته است، چه گلی به سر جامعه طراحی سایت می زند و آیا با ورود این مرورگر، کاربران دست از سر اینترنت اکسپلورر بر می دارند یا خیر؟! البته خبر خوش در این زمینه کاهش سال به سال کاربران این مرورگر می باشد که دلیل آن بالارفتن دانش کاربری کاربران و اطلاع رسانی های فراوان بوده است، اما هنوز تا صفر شدن این کاربران، راه زیادی مانده است!

 

طراحی سایت، یک مهندسی نرم افزار

با قدرت گرفتن HTML و همه گیر شدن این زبان، طراحی سایت رنگ و بویی تازه گرفت. علم مهندسی نرم افزار که به چرخه تولید و نگهداری محصولات نرم افزاری ورود می کند، با طراحی سایت همانند نرم افزار رفتار کرد. از نظر این علم طراحی سایت یک علم مهندسی برای تولید یک سیستم نرم افزاری با هدف ارائه خدمتی خاص می باشد. با این رویکرد شرکت های طراحی سایت توسط مهندسین نرم افزار پیش روی کردند و مجموعه ای از تحلیلگران، برنامه نویسان، طراحان، تِستر ها و عوامل دیگر توسعه نرم افزار به آن ها کمک کردند. زبان های برنامه نویسی هم در این بین خودنمایی می کردند چرا که متصور شدن رویکردی قوی برای طراحی سایت، بدون حضور زبان های برنامه نویسی، غیر ممکن به نظر می رسید!

با نگاهی به پاراگراف بالا پر واضح می باشد، زمانی که سخن از طراحی سایت به میان می آید، منظور طراحی گرافیکی سایت نیست، هدف از بکارگیری این عبارت طراحی نقشه پیاده سازی و نگهداری سایت می باشد. در واقع طراحی سایت یک علم مهندسی و مجموعه ای از عواملی می باشد که ذکر شد و طراحی گرافیکی سایت فقط بخش کوچکی از آن می باشد.

 

زبان های برنامه نویسی در طراحی سایت

به مرور زمان برنامه نویسی جزیی از طراحی سایت شد، در این میان دو نوع زبان برنامه نویسی به وجود آمد، زبان های برنامه نویسی سمت کلاینت و زبان های برنامه نویسی سمت سرور. زبان های برنامه نویسی سمت کلاینت معمولاً عملکردهای عمومی و مدیریت گرافیک و افکت ها و اهداف محاسباتی ساده را مدیریت می کنند، البته این به این معنا نیست که خود آن ها هم ساده هستند، در حقیقت وجود وبسایت ها بدون آن ها امکان پذیر نیست و آنقدر نیاز به توسعه قدرت در آن ها بوده که برای آنها چارچوب های کاری هم توسعه داده شده است. از زبان های برنامه نویسی سمت کلایت در طراحی سایت می توان به VBscript و JavaScript اشاره کرد. البته قابل ذکر می باشد که در سالهای اخیر استفاده از وی.بی اسکریپت کمرنگ تر و استفاده از جاوااسکریپت پررنگ و پررنگ تر شده است. تا جایی که چارچوب های کاری قدرتمندی همچون Jquery برای این زبان نوشته شده است.

اما طراحی سایت بدون زبان های برنامه نویسی سمت سرور هم قابل تصور نیست، زبان هایی که منطق تجاری و موتور تولید درآمد سایت ها می باشند. گرچه زبان های برنامه نویسی نظیر جاوا و پایتون هم قابلیت توسعه نرم افزارهای وبسایتی را دارند، اما زبان های برنامه نویسی PHP و ASP.NET به طور خاص برای طراحی سایت استفاده می شوند. قدرت این زبان ها بسیار بالا می باشد. از زبان برنامه نویسی پی.اچ.پی همین نمونه بس که طراحی سایت فیس بوک را به عهده داشته است و ناگفته پیداست که قدرت این زبان در نمایش سایت مذکور نمایان است. در مقابل زبان برنامه نویسی asp.net نیز توسط غول نرم افزاری دنیا یعنی مایروسافت حمایت می شود و همین امر بسیاری امکانات را در اختیار توسعه دهنگان قرار داده است. با این حال آمارها نشان دهنده این است که php در بین زبان های برنامه نویسی طراحی سایت، 80 درصد بازار را در اختیار دارد و این در حالی است که تنها 16 درصد از این آمار را در اختیار دارد، 4 درصد باقیمانده هم سهم جاوا و دیگر زبان ها در طراحی سایت است.

 

سبک های پیاده سازی در طراحی سایت

سایت ها از نظر تنوع موضوعی و عملکرد به چند دسته تقسیم می شوند:

- سایت های ایستا(Static Website) : این سایت ها فاقد زبان برنامه نویسی سمت سرور هستند و قابلیت تغییر پایینی دارند، هزینه تولید و طراحی سایت در این نوع پایین و محبوبیت آن کم است.

- سایت های پویا (Dynamic website): طراحی سایت پویا با پشتیبانی از زبان های برنامه نویسی سمت سرور مثل php یا asp انجام می گیرد. این سایت ها تلفیقی از دانش مهندسی نرم افزار با ابزارهای توسعه HTML، CSS، JavaScript، Ajax، PHP یا ASP و پایگاه های داده می باشند. همچنین امروزه بیشتر وبسایت ها به صورت پویا طراحی می شوند. این سایت ها قابلیت مدیریت و تغییر محتوا را ارائه می دهند و امکانات پیشرفته ای را دراختیار کاربر می گذارند.

- پورتال: پورتال ها نوعی سایت پویا هستند که عملکرد مجموعه ای دارند و تمام عملکردهای سایت های پویا در آن صدق می کند، اما عملکرد سازمانی دارند، مانند پورتال های خبری.

- متحرک: در مورد سایت های متحرک می توان هم عبارت ایستا و هم عبارت پویا را بکار برد و بسته به تکنولوژی استفاده شده دارند. Action Script نمونه ای از تکنولوژی های این نوع طراحی سایت می باشد.

- سیستم های مدیریت محتوا (CMS): سیستم های مدیریت محتوا، نوعی پیشرفته از ویسایت های پویا می باشند که ابزاری را برای مدیریت محتوا برای افراد غیر حرفه ای فراهم می کنند. منظور از افراد غیر حرفه ای افرادی هستند که دانش کامپیوتری خوبی دارند اما به برنامه نویسی و اصول طراحی سایت آشنایی ندارند. استفاده از CMS ها در سالهای اخیر زیاد شده است، Joomla و WordPress نمونه ای از صدها CMS موجودی هستند که برای پویایی محتوای سایت ها طراحی شده اند.

- نمونه هایی از پروژه های در طراحی سایت هستند که گرچه با ابزار طراحی سایت نوشته شده اند، اما نمی توان به آن ها وبسایت گفت و در واقع باید آن ها را یک وب اپلیکیشن نامید. وب اپلیکیشن ها نوعی پیشرفته از طراحی سایت هستند که دیگر تنها قصد ارائه محتوا ندارند و هدف تجاری یا غیر تجاری خاصی را دنبال می کنند. سیستم های مدیریت ارتباط با مشتری (CRM) ها از این دست می باشند. همچنین است سیستم هایی نظیر ERP ها یا سیستم هایی که برای پیاده سازی هوش تجاری (BI) آماده می شوند. با نگاهی به وب 2 می توان این استنباط را نیز کرد که تکنولوژی های استفاده شده در وب 2 نیز نگاهی به وب اپلیکیشن ها داشته است و طراحی سایت به شیوه ای که در وب 1 مرسوم می باشد، جایی در وب 2 ندارد.

 

طراحی گرافیک سایت

طراحی سایت گاهی جایگزینی برای عبارت طراحی گرافیک سایت می باشد، همانطور که گفتیم این جابجایی اشتباه می باشد. زیرا طراحی گرافیک سایت تنها بخشی از پروسه ای پیچیده و مهندسی می باشد که طراحی سایت نام گرفته است. اما از آنجا که طراحی گرافیکی سایت نیز بخشی مهم در فرآیند می باشد، بدنیست نگاهی کوتاه به آن بیاندازیم:

طراحی گرافیک سایت به سبک عهد بوق!

اگر گشت و گذاری در اینترنت بزنید و سایت هایی را پیدا کنید که ده، پانزده سال پیش آپدیت نشده اند، شاید کمی خنده تان بگیرید. بیشتر شبیه کاغذ پاره بودند تا وبسایت! طراحی سایت در آن سالها توسط نرم افزارهایی نظیر frontpage و یا cofeecup انجام می گرفت. بیشتر سایت ها از افکت های تصویری بی بهره بودند و اگر یک طراح html هم قصد داشت ذوق و سلیقه ای برای اجرای افکت در طراحی سایت پیاده سازی کند، آنقدر زود دلتان را می زد که شاید اصلاً به سایت باز نمی گشتید. معروف ترین انیمیشن های این دوره حرکت کلمات معروف به marquee بود. به هر حال دوران طراحی سایت به سبک آن روزهای سرد، دیگر سپری شده است!

 

طراحی سایت با Flash هایی که دیده نمی شد!

برنامه نویسی Action Script در کنار انیمیش های فلش تا سالیان سال از مهارت های اصلی طراحی سایت محسوب می شد، امروزه با توجه به اینکه محتوای سایت در سئو و تبلیغات نقش اصلی را بازی می کند و با توجه به اینکه سایت های طراحی شده با فلش در مرورگرها بدلیل نبود extension و یا آپدیت نبودن آنها اجرا نمی شدند، اینگونه طراحی سایت نقش پررنگی ندارند و جای آن ها را طراحی سایت با تکنیک های CSS3 و JQuery گرفته اند.

 

طراحی گرافیک سایت با تکنیک FLAT

طراحی فلت نوعی تکنیک است که در آن از بکار بردن حاشیه های گرد، اجزای کثیف ماننده سایه های چند سطحی و همچنین اشیاء سه بعدی در صفحه خودداری می گردد. علاوه بر تأثیر ماندگاری که طراحی سایت به شیوه فلت در نگه داشتن مخاطب در سایت دارد، رنگ بندی شادی که معمولاً در این نوع طراحی به کار می رود، این تأثیر را دو چندان می کند. طراحی سایت به شیوه فلت گرچه ساده به نظر می رسد، اما هنر گرافیست در ایجاد جذابیت در آن است، طرحی که در عین زیبایی و سادگی، هیجان انگیز باشد، کاربر را به سوی خود جلب می کند. در طراحی سایت به شیوه فلت کمتر از بعضی قابلیت های CSS3 مانند، border-radius یا Box-Shadow استفاده می شود و بیشتر سعی می کنند با رنگ بازی کنند، همچنین گرادیانت نیز در این شیوه طراحی سایت جایی ندارد.

 

طراحی سایت responsive

با گسترش علم و فناوری و همه گیر شدن دستگاه های موبایل هوشمند، مشاهده وب سایت ها در گوشی های تلفن همراه نیز، امری همه گیر شد. مشکلی که در این میان بود، مسئله طراحی سایت های غیر واکنش گرا بود. به این معنا که کاربران در مرورگرها باید صفحه کوچک موبایل خود را بر روی یک گزینه zoom می کردند تا شیء مورد نظر خود را به وضوح ببینند. اینجا بود که طراحی سایت responsive بازار داغی برای خود دست و پا کرد. تا آنجا که اوایل سال 2015 شرکت گوگل اعلام کرد که طراحی سایت هایی که برای موبایل بهینه شده اند، یک امتیاز محسوب می شود و حتی هنگام جستجوی گوگلی در دستگاه همراه، این مسئله را به همراه وبسایت های یافت شده، نشان می دهد.

طراحی سایت به این سبک و سیاق خیال بازدید کننده را از ابعاد نمایشگر آسوده می کند و این اطمینان را می دهد که تمام object های یک صفحه وب به خوبی قابل نمایش هستند. در این میان فریم ورک هایی نظیر بوت استرپ نیز ابزارهایی را برای کمک به توسعه دهنگان گرافیک سایت در امر طراحی سایت، در اختیار گذاشته اند.

 

سئو

همانطور که گفتیم، امروز دیگر طراحی سایت یک تخصص ساده نیست و طراحان سایت باید انبوهی از اطلاعات و دانش کاربردی را برای توسعه یک وبسایت کارامد، به کار گیرند. طراحی سایت در دنیای امروز، بیش از هر چیز نیاز به مکانیزمی برای مطرح شدن وبسایت طراحی شده دارد. امروز و علیرغم نقش بسیار زیاد شبکه های اجتماعی در تبلیغات، همچنان بیشترین سهم را در بین شناساندن وبسایت ها به جامعه تجاری، موتورهای جستجو دارند. به همین منظور دانشی به نام سئو (SEO) به مجموعه دانش های مورد نیاز وبسایت ها افزوده شده است.

سئو علم بهینه سازی وبسایت ها برای موتورهای جستجو می باشد، در واقع باید بگوییم سئو یک جنگ است و بر اساس آن طراحی سایت به گونه ای صورت می گیرد که بهترین عملکرد را برای موتورهای جستجو داشته باشد. البته این به آن معنی نیست که طراحی سایت همه چیز است! در واقع طراحی سایت بهینه برای اهداف سئو، تنها نقش یک پی ریزی سالم را دارد و نقش عمده را در ادامه مطالب و محتوای وبسایت ایفا می کند. و این محتوا باز هم زمانی که درست عمل می کند که ابزارهای کمی سئو نظیر گوگل وبمستر یا بینگ وبمستر برای شناساندن هر چه بهتر محتوا استفاده کنیم.

 

طراحی سایت، دانش رو به توسعه

با وجود تمام پیشرفت هایی که در علم طراحی سایت بوقوع پیوسته است، این علم هنوز در حال تکمیل و توسعه است، گاهی تکنولوژی های های جدید نظیر Ajax این علم را به سمت تحول سوق می دهند و گاهی هم برخی ابزارهای و تکنولوژی ها نظیر FLASH به باد فراموشی سپرده می شوند. باید صبر کرد و دید که سالیان آینده چه سرنوشتی را برای طراحان وبسایت ها رقم خواهد زد!

 

گراند سایت، یک تیم مطمئن طراحی سایت

خوشحالیم که در میان انبوهی از همکاران خوش ذوق و متخصص در زمینه طراحی سایت، ما هم توانسته ایم به قدر توان خود را به اثبات برسانیم و لبخند رضایتی را به لبهای شما عزیزان بنشانیم. امید است که در این راه از کوشش و توسعه دست بر نداریم و هرروزی که کار جدیدی را آغاز می کنیم، محصولی به مراتب پسندیده تر و کاربر پسند تر به شما ارائه دهیم. قصد داریم بیش از این از خود تعریف نکنیم و ارزیابی خود را به عهده مشتریان بگذاریم. پس شرح حال ما را از مشتریان ما بپرسید. اطلاعات تماس برخی از آنها را بخش پروژه های به اتمام رسیده، خواهید یاقت.

facebook