مرجع تخصصی مقالات طراحی سایت

زمانی که Tim Berners-Lee در سال 1989 اینترنت را اخلاق و رفتار کرد احتمالا فکرش را نمی کرد که دنیای اینترنت طراحی سایت از آن زمان تا این حد تغییر کند.در واقع تاریخچه طراحی وب با تاریخ اینترنت گره خورده و بعد به طور تقریب هرسال در گیر تغییرات مهمی شده است.امروزه به جایی رسیده ایم که شاید تصور دنیایی فارغ از اینترنت و بدون تارنما ها برایمان سخت باشد.

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

· کد نویسی هسته (Core) سایت که آحاد اتفاقات اصلی و پشت صحنه وب سایت در آن جا شکل می دهد.

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

هرچند زبان های اپ نویسی ساخت سایت در امسال ها تغییرات و توسعه های فوق العاده ای کرده اند و مختصات و امکانات وبسایت ها فراتر از تصور گردیده است اما مبحث این نوشته‌ی علمی در مورد تاریخچه ساخت سایت بیشتر پیرامون رخدادها و بسط های انجام شده در طراحی پوسته ظاهری وب سایت میباشد.

عصر بدون نور طراحی وب (1989) :

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

جدول ها – آغاز طراحی وب (1995) :

طراحی های جدول اساس (Table-Base) و تولد اولی مروگرهایی که قدرتمند بودند عکس و تصاویر را نمایش دهند ، اولین مرحله به سمت طراحی سایت به معنای امروزی خود محسوب می شود.بهترین گزینه برای تیم بندی اطلاعات استفاده از مضمون‌ جدول (Table) بود که امروزه نیز در تگ های HTML به همین نام وجود دارد و آیتم استعمال قرار می گیرد.به همین ترتیب قرار دادن جدول ها در داخل هم روش هوشمندانه ای برای طراحی وب سایت بود که اولین بار بوسیله David Siegel مطرح شد.هرچند این عمل به طور کامل درست به حیث نمی رسید ، زیرا مقصود اصلی طراحی جدول ها ، گروه بندی اعداد محسوب می شود ولی بهرحال این‌راه ، برای مدتی معمول ترین روش طراحی وب سایت به شمار میرفت. مشکل دیگر مراقبت و همچنین شغل کردن با چنین ساختار شکننده ای بود.در همین بعدازظهر بود که مفهوم طراحی قطعه قطعه (Slicing Design) شروع به دوستداشتنی شدن نمود.به این صورت که طراحان، طرح های گرافیکی می ساختند و برنامه نویسان این طرح ها را به قطعات کوچک تبدیل کرده و آن گاه برای سرهم کردن و نمایش یک دست آن در وب روش حلی می اندیشیدند. در طرف دیگر البته جدول ها نیز مزایای زیادی داشتند مانند نمایش داده ها به صورت عمودی و قابلیت و امکان تعریف اندازه براساس پیکسل یا درصد.

جاوا اسکریپت –راهی برای نجات (1995) :

جاوا اسکریپت (JavaScript) پاسخی به محدودیت های HTML در طراحی وب سایت بود و نقش مهمی در تاریخ ساخت سایت اجرا نمود و همچنان نیز این نقش ادامه دارد.از جمله در صورتیکه یک صفحه popup می خواستید و یا در شرایطی‌که تصمیم داشتید دسته بندی و شیوه دکورا سیون چیزی را بصورت اتوماتیک تغییر تحول دهید پاسخ فعالیت JavaScript بود.نقص‌ اینجا بود که جاوا اسکریپت بصورت لایه ای جداگانه از ساختار کلی بود وباید بصورت جداگانه لود میشد.در بسیاری از مواقع برنامه نویسان معدود شایستگی یا تنبل از جاوا اسکریپت برای انجام کارهای بسیار معمولی استفاده می کردند در‌صورتی‌که که هر مجال که از جاوا اسکریپت بصورت مدبرانه به کار گیری می شد قدرت حقیقی خود را نشانه می‌بخشید.

امروزه در اکثر اوقات مواقع هنگام ساخت سایت کارایی می‌گردد درصورتی که قابلیت ساخت و ساز یک ویژگی در CSS یا HTML وجود دارااست از JavaScript استفاده نگردد زیرا همچنان یکی از ایرادات جاوا اسکریپت کاهش سرعت بار گذاری سایت به حساب میآید.با این هم اکنون جاوا اسکریپت امروزه نیز یکی از مهم‌ترین زبان های اپلیکیشن نویسی برای ساخت سایت به شمار می رود و بخصوص در قالب jQuery و Node.js که ویژگی های بسیار خارق العاده ای را می تواند به یک وبسایت بیفزاید.

پیکان –عصر طلایی آزادی (1996) :

به کار گیری از نشانه گر (Flash)در ساخت سایت راهی بود برای شکستن محدودیت های جانور در طراحی سایت ها ، تکنولوژی که فرصت میلاد ، وعده آزادی و چنان اختیار عملی را به برنامه نویسان داد که تا قبل از آن به هیچ عنوان تصورش را هم نمی کردند. طراح تارنما می توانست هر گونه شکل ، قالب ، جلوه های متحرک ، ویژگی های فعل و انفعالی و هرگونه فونت و اکثری امکانات دیگر را صرفا با یک ابزار یعنی فلش، طراحی و ایجاد کند.نتیجه نهایی بصورت یک فایل فشرده درآمده و برای نمایش به مرورگرها ارسال میشد. تا‌هنگامیکه کاربران آخرین آپ دیت افرونه Flash و همچنین مجال کافی برای بارگذاری شدن آن را داشتند، سایت به نمایش درآمده همچون یک جادوی خارق العاده بود. این فرصت در تاریخچه طراحی وب سایت باعث به خلق صفحه های وب رنگارنگ ، برنامه خردسالان های جالب و هرگونه ویژگی ظاهری بدردبخور- یا بدرد نخور! – دیگری در آن زمان شد.

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

CSS – (1998) :

CSS نیز در همان مجال Flash به دنیا آمد.روشی برای گروه بندی ساختار طراحی وب سایت که از نگاه فنی و تکنیکی روش بهتری محسوب می‌شد.معنا اساسی CSS - Cascading Style Sheets – در جدا سازی قسمت محتوای وب سایت از بخش نمایشی و ظاهری آن بود.به این ترتیب ظاهر و نحوه نمایش وب سایت در CSS تمجید می شد و محتوای وب سایت در HTML.اولین نسخه های CSS از انعطاف و گستردگی بسیار کمی برخوردار بودند اما ایراد اصلی در تطبیق پذیری مرورگرهای متفاوت با آن بود.یکسری سال به درازا کشید تا مرورگرها بصورت کامل خود را با این تکینیک نو در طراحی وب سایت تطبیق دادند و در برخی مورد ها همچنان ایرادهایی همگام نمایش وب سایت در آن‌ها وجود داشت. همچنین بعد از ظهر ای در تاریخچه طراحی وب وجود دارد که در آن یک مرورگر دارای آخرین آپ تو دیت بوده و اقتدار به کار گیری از آخرین ویژگی های CSS را داشت البته مرورگرهای دیگر همچنان با برخی از امکانات جدید آن خلل داشتند و این مورد تبدیل به کابوسی برای برنامه نویسان شده بود.

در حقیقت CSS یک زبان نرم افزار نویسی محسوب نمی شود بلکه بیشتر زبان اخباری می‌باشد. آیا برنامه نویسان بایستی خیال و خاطر بگیرند به چه شکل کد های CSS را بنویسند ؟ شاید. آیا مایحتاج می باشد شیوه عمل CSS را ادراک کنند ؟ به طبعً.

ظهور گوشی – شبکه بندی و چارچوب (2007) :

مرور وب سایت توسط موبایل چالشی مهم در‌این بعدازظهر از تاریخ طراحی سایت بود.طرز نمایش محتوای سایت در صفحه ها کوچک موبایل به موضوعی اساسی بدل گشت.سرعت لود سایت نیز زمینه ای دیگر بود بصورتی که در آن مجال لود شدن مجموع محتوای یک وبسایت می توانست هزینه استعمال از اینترنت موبایل را بشدت افزایش دهد. اولی قدم برای غلبه بر این مسائل ، ایده column grids بود که در واقع طراحی وب بصورت لایه های جدا از هم و با حد و مرز مشخص و معلوم هست. پس از کش مکش های فراوان نهایتا سیستم 960 grid موفق شد و تقسیم بندی 12 ستونی (12-column division) به روشی متداول در طراحی وب بدل گشت. مرحله سپس استاندارسازی عناصری که در تارنما به تناوب استفاده می‌شد بود.عناصری مانند فُرم ها ، منوها ، دکمه ها و..

برای این منظور کتابخانه ای از موادسازنده بصری که کل کدهای موردنیاز را در خود داشته باشند بایستی بوجود می آمد. Bootstrap و Foundation دو چارچوب (Framework) برنده در این عرصه بودند. هرچند که یادگیری کد نویسی های این دو Framework بسیار نقص‌ می نماید اما می اقتدار سوای نیاز به یادگیری کد نویسی های آن ها از کتابخانه آنها به مراد طراحی وب سایت واکنشگرا (Responsive) بهره مند شد.

طراحی سایت واکنشگرا (2010) :

نابغه ای بنام Ethan Marcotte تصمیم گرفت طرق مو جود را به بحران بکشد و برای اینکار تصمیم گرفت از محتوای یکسان ولی قالب های متفاوت برای نمایش تارنما در صفحه ها نمایش متعدد استعمال کند و مضمون‌ طراحی وب سایت واکنشگرا یا Responsive را وارد تاریخچه طراحی وب سایت نمود. برای یک طراح وبسایت، Responsive بودن به معنی طراحی برنامه یک‌سری قالب (Layout) مجزا هست. از لحاظ کاربر این به معنی کارکرد صحیح وب سایت در گوشی هست است البته از لحاظ نرم افزار نویس تولید روشی می‌باشد که در آن معین می شود عکس ها چه‌طور نمایش داده شوند ، سرعت دانلود چه‌طور باشد، روش نمایش موادسازنده متفاوت سایت در دستگاه های گوناگون به چه ترتیبی باشد و .. مهمترین مزیت این شغل یکسان بود محتوا می باشد. بدین مفهوم که شما یک وبسایت و یک محتوا دارید که در دستگاه ها و صفحه های گوناگون بخوبی نشان داده می شود.

زمانی که Tim Berners-Lee در سال 1989 اینترنت را اخلاق و رفتار کرد احتمالا فکرش را نمی کرد که دنیای اینترنت طراحی سایت از آن زمان تا این حد تغییر کند.در واقع تاریخچه طراحی وب با تاریخ اینترنت گره خورده و بعد به طور تقریب هرسال در گیر تغییرات مهمی شده است.امروزه به جایی رسیده ایم که شاید تصور دنیایی فارغ از اینترنت و بدون تارنما ها برایمان سخت باشد.

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

· کد نویسی هسته (Core) سایت که آحاد اتفاقات اصلی و پشت صحنه وب سایت در آن جا شکل می دهد.

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

هرچند زبان های اپ نویسی ساخت سایت در امسال ها تغییرات و توسعه های فوق العاده ای کرده اند و مختصات و امکانات وبسایت ها فراتر از تصور گردیده است اما مبحث این نوشته‌ی علمی در مورد تاریخچه ساخت سایت بیشتر پیرامون رخدادها و بسط های انجام شده در طراحی پوسته ظاهری وب سایت میباشد.

عصر بدون نور طراحی وب (1989) :

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

جدول ها – آغاز طراحی وب (1995) :

طراحی های جدول اساس (Table-Base) و تولد اولی مروگرهایی که قدرتمند بودند عکس و تصاویر را نمایش دهند ، اولین مرحله به سمت طراحی سایت به معنای امروزی خود محسوب می شود.بهترین گزینه برای تیم بندی اطلاعات استفاده از مضمون‌ جدول (Table) بود که امروزه نیز در تگ های HTML به همین نام وجود دارد و آیتم استعمال قرار می گیرد.به همین ترتیب قرار دادن جدول ها در داخل هم روش هوشمندانه ای برای طراحی وب سایت بود که اولین بار بوسیله David Siegel مطرح شد.هرچند این عمل به طور کامل درست به حیث نمی رسید ، زیرا مقصود اصلی طراحی جدول ها ، گروه بندی اعداد محسوب می شود ولی بهرحال این‌راه ، برای مدتی معمول ترین روش طراحی وب سایت به شمار میرفت. مشکل دیگر مراقبت و همچنین شغل کردن با چنین ساختار شکننده ای بود.در همین بعدازظهر بود که مفهوم طراحی قطعه قطعه (Slicing Design) شروع به دوستداشتنی شدن نمود.به این صورت که طراحان، طرح های گرافیکی می ساختند و برنامه نویسان این طرح ها را به قطعات کوچک تبدیل کرده و آن گاه برای سرهم کردن و نمایش یک دست آن در وب روش حلی می اندیشیدند. در طرف دیگر البته جدول ها نیز مزایای زیادی داشتند مانند نمایش داده ها به صورت عمودی و قابلیت و امکان تعریف اندازه براساس پیکسل یا درصد.

جاوا اسکریپت –راهی برای نجات (1995) :

جاوا اسکریپت (JavaScript) پاسخی به محدودیت های HTML در طراحی وب سایت بود و نقش مهمی در تاریخ ساخت سایت اجرا نمود و همچنان نیز این نقش ادامه دارد.از جمله در صورتیکه یک صفحه popup می خواستید و یا در شرایطی‌که تصمیم داشتید دسته بندی و شیوه دکورا سیون چیزی را بصورت اتوماتیک تغییر تحول دهید پاسخ فعالیت JavaScript بود.نقص‌ اینجا بود که جاوا اسکریپت بصورت لایه ای جداگانه از ساختار کلی بود وباید بصورت جداگانه لود میشد.در بسیاری از مواقع برنامه نویسان معدود شایستگی یا تنبل از جاوا اسکریپت برای انجام کارهای بسیار معمولی استفاده می کردند در‌صورتی‌که که هر مجال که از جاوا اسکریپت بصورت مدبرانه به کار گیری می شد قدرت حقیقی خود را نشانه می‌بخشید.

امروزه در اکثر اوقات مواقع هنگام ساخت سایت کارایی می‌گردد درصورتی که قابلیت ساخت و ساز یک ویژگی در CSS یا HTML وجود دارااست از JavaScript استفاده نگردد زیرا همچنان یکی از ایرادات جاوا اسکریپت کاهش سرعت بار گذاری سایت به حساب میآید.با این هم اکنون جاوا اسکریپت امروزه نیز یکی از مهم‌ترین زبان های اپلیکیشن نویسی برای ساخت سایت به شمار می رود و بخصوص در قالب jQuery و Node.js که ویژگی های بسیار خارق العاده ای را می تواند به یک وبسایت بیفزاید.

پیکان –عصر طلایی آزادی (1996) :

به کار گیری از نشانه گر (Flash)در ساخت سایت راهی بود برای شکستن محدودیت های جانور در طراحی سایت ها ، تکنولوژی که فرصت میلاد ، وعده آزادی و چنان اختیار عملی را به برنامه نویسان داد که تا قبل از آن به هیچ عنوان تصورش را هم نمی کردند. طراح تارنما می توانست هر گونه شکل ، قالب ، جلوه های متحرک ، ویژگی های فعل و انفعالی و هرگونه فونت و اکثری امکانات دیگر را صرفا با یک ابزار یعنی فلش، طراحی و ایجاد کند.نتیجه نهایی بصورت یک فایل فشرده درآمده و برای نمایش به مرورگرها ارسال میشد. تا‌هنگامیکه کاربران آخرین آپ دیت افرونه Flash و همچنین مجال کافی برای بارگذاری شدن آن را داشتند، سایت به نمایش درآمده همچون یک جادوی خارق العاده بود. این فرصت در تاریخچه طراحی وب سایت باعث به خلق صفحه های وب رنگارنگ ، برنامه خردسالان های جالب و هرگونه ویژگی ظاهری بدردبخور- یا بدرد نخور! – دیگری در آن زمان شد.

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

CSS – (1998) :

CSS نیز در همان مجال Flash به دنیا آمد.روشی برای گروه بندی ساختار طراحی وب سایت که از نگاه فنی و تکنیکی روش بهتری محسوب می‌شد.معنا اساسی CSS - Cascading Style Sheets – در جدا سازی قسمت محتوای وب سایت از بخش نمایشی و ظاهری آن بود.به این ترتیب ظاهر و نحوه نمایش وب سایت در CSS تمجید می شد و محتوای وب سایت در HTML.اولین نسخه های CSS از انعطاف و گستردگی بسیار کمی برخوردار بودند اما ایراد اصلی در تطبیق پذیری مرورگرهای متفاوت با آن بود.یکسری سال به درازا کشید تا مرورگرها بصورت کامل خود را با این تکینیک نو در طراحی وب سایت تطبیق دادند و در برخی مورد ها همچنان ایرادهایی همگام نمایش وب سایت در آن‌ها وجود داشت. همچنین بعد از ظهر ای در تاریخچه طراحی وب وجود دارد که در آن یک مرورگر دارای آخرین آپ تو دیت بوده و اقتدار به کار گیری از آخرین ویژگی های CSS را داشت البته مرورگرهای دیگر همچنان با برخی از امکانات جدید آن خلل داشتند و این مورد تبدیل به کابوسی برای برنامه نویسان شده بود.

در حقیقت CSS یک زبان نرم افزار نویسی محسوب نمی شود بلکه بیشتر زبان اخباری می‌باشد. آیا برنامه نویسان بایستی خیال و خاطر بگیرند به چه شکل کد های CSS را بنویسند ؟ شاید. آیا مایحتاج می باشد شیوه عمل CSS را ادراک کنند ؟ به طبعً.

ظهور گوشی – شبکه بندی و چارچوب (2007) :

مرور وب سایت توسط موبایل چالشی مهم در‌این بعدازظهر از تاریخ طراحی سایت بود.طرز نمایش محتوای سایت در صفحه ها کوچک موبایل به موضوعی اساسی بدل گشت.سرعت لود سایت نیز زمینه ای دیگر بود بصورتی که در آن مجال لود شدن مجموع محتوای یک وبسایت می توانست هزینه استعمال از اینترنت موبایل را بشدت افزایش دهد. اولی قدم برای غلبه بر این مسائل ، ایده column grids بود که در واقع طراحی وب بصورت لایه های جدا از هم و با حد و مرز مشخص و معلوم هست. پس از کش مکش های فراوان نهایتا سیستم 960 grid موفق شد و تقسیم بندی 12 ستونی (12-column division) به روشی متداول در طراحی وب بدل گشت. مرحله سپس استاندارسازی عناصری که در تارنما به تناوب استفاده می‌شد بود.عناصری مانند فُرم ها ، منوها ، دکمه ها و..

برای این منظور کتابخانه ای از موادسازنده بصری که کل کدهای موردنیاز را در خود داشته باشند بایستی بوجود می آمد. Bootstrap و Foundation دو چارچوب (Framework) برنده در این عرصه بودند. هرچند که یادگیری کد نویسی های این دو Framework بسیار نقص‌ می نماید اما می اقتدار سوای نیاز به یادگیری کد نویسی های آن ها از کتابخانه آنها به مراد طراحی وب سایت واکنشگرا (Responsive) بهره مند شد.

طراحی سایت واکنشگرا (2010) :

نابغه ای بنام Ethan Marcotte تصمیم گرفت طرق مو جود را به بحران بکشد و برای اینکار تصمیم گرفت از محتوای یکسان ولی قالب های متفاوت برای نمایش تارنما در صفحه ها نمایش متعدد استعمال کند و مضمون‌ طراحی وب سایت واکنشگرا یا Responsive را وارد تاریخچه طراحی وب سایت نمود. برای یک طراح وبسایت، Responsive بودن به معنی طراحی برنامه یک‌سری قالب (Layout) مجزا هست. از لحاظ کاربر این به معنی کارکرد صحیح وب سایت در گوشی هست است البته از لحاظ نرم افزار نویس تولید روشی می‌باشد که در آن معین می شود عکس ها چه‌طور نمایش داده شوند ، سرعت دانلود چه‌طور باشد، روش نمایش موادسازنده متفاوت سایت در دستگاه های گوناگون به چه ترتیبی باشد و .. مهمترین مزیت این شغل یکسان بود محتوا می باشد. بدین مفهوم که شما یک وبسایت و یک محتوا دارید که در دستگاه ها و صفحه های گوناگون بخوبی نشان داده می شود.