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

برای شروع هر کاری به یک سری ابزارهای خاص احتیاج داریم تا بتوانیم آن کار را به اتمام برسانیم. در این مقاله ما قصد داریم بهتربن و کارا ترین ابزار طراحی سایت را که اغلب طراحان حرفه ایی سایت از آن ها استفاده می کنند را به شما معرفی کنیم.

Dreamweaver

Adobe Dreamweaver  یکی از ابزار های طراحی وب سایت است که توسط کمپانی Adobe ارائه شده است وبر روی سیستم عامل مک و ویندوز کار می کند. ابزارهای که در این  نرم افزار وجود دارد عبارت اند از:
 نمایش کدی و عادی، ابزار مدیریت و ftp، مدیریت پروژه و کار گروهی، نمایش زنده و...
Dreamweaver  قابلیت سازگاری با دیگر نرم افزار های Adobe  از جمله فوتوشاپ دارد.

Firebug

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

Adobe Photoshop

یک نرم افزار قدرتمند گرافیکی است که با استفاده از ابزار آن می توانید به ساخت و یا ویرایش تصویری بپردازید. اغلب طراحان سایت از این نرم افزار برای طراحی گرافیکی سایت خود از Adobe Photoshop استفاده می کنند.

Adobe Fireworks

نسخه بهینه شده ی Photoshop است که به وسیله ی آن می توانید تصاویری با حجم بسیار کم ایجاد کنید.

W3C Validator

یک ابزار رایگان برای سنجش میزان استاندار کد HTML  و XHTML می باشد که W3C ارائه دهنده آن است. این ابزار سایت را در دیگر فرمت ها مانند SGML ویا  XML DTDمی سنجد. ابزار دیگر این سایت به نام HTML tidy کد ها را به طور اتومات استاندارد می کند. Validome اعتبار صفحه را از لحاظ XHTML، HTML وWML بررسی می کند.

Adobe Brackets

برای مدیریت کد های  CSS، JavaScript،HTML طراحی شده است. تمرکز این ابزار بر روی کد زنی است و این اجاره را به شما می دهد که در داخل کد، کد نویسی انجام دهید.

Code Anywhere

همانطور که از نام این ابزار مشخص است  میتوانید از هر جایی بدون آنکه موردی را آماده کنید به کد نویسی بپردازید. تنها لازم است برنامه را اجرا کنید تا بتوانید به تغییرات سایت خود مشغول شوید.

HTML 5 Drawing

این ابزار یک فریم ورک و المان های مختلف برای ایجاد سایت در اختیارتان قرار می دهد. به علاوه این نرم افزار  ابزاری برای بهینه سازی سایت برای گوشی های هوشمند دارد. همچنین ابزار هایی برای بهینه سازی سایت و سرعت بخشیدن به بارگذاری سایت مانند htacess  برای gzip دارا می باشد.

Google Drawing

با یک اکانت گوگل می توانید به صورت آنلاین به طراحی سایت بپردازید.

jQuery UI

یک کتابخانه قدرتمند که ضعف های HTMl و CSS را می پوشاند و آنچه که در HTML,CSS نمی توانید ایجاد کنید را می توانید تولید کنید. تنها مشکل این نرم افزار استفده سخت است که نیاز به تجربه دارد. با استفاده از آن دیگر نیازی نیست کد نویسی jquery را بلد باشید.  

در این بخش از آموزش طراحی سایت قصد داریم 5 نمونه از جدید ترین ابزار را که در طراحی سایت می توان از آنها بهره برد را به طور مختصر برای شما کاربران عزیز شرح دهیم.

1. مرورگر Brave

این مرورگر جدید این امکان را به شما می دهد تا تصمیم بگیرید که دستگاه شما چه چیزهایی را از وب دانلود کند، بنابراین شما می توانید از آگهی های بزرگ و تکنولوژی های ردیابی اجتناب نمایید.

2. ابزار MERN

برنامه های متناظر جاوااسکریپت می توانند به صورت هر دو client-side و server-side اجرا شوند و هر دو کدهای مشابه را به اشتراک می گذارند. MERN یک ابزار سکوب بندی است. تنظیمات این ابزار که در طراحی سایت کاربرد دارد، پیچیده نیست.

3. الگوهای رابط کاربر ( UI Pattern)

با استفاده از این گالری تعاملی، گزینه های خود را برای اداره موقعیت های رابط کاربر (UI) مشترک، بررسی کنید.

4. ابزار okayNav

این طراحی منو هوشمند به تدریج آیتم های منو را به یک ناوبری خارج از صفحه نمایش اضمحلال می کند، به طوری که شما همیشه به حداکثر تعداد آیتم ها بر روی صفحه نمایش دسترسی خواهید داشت.

5. ابزار JsTips

با این ابزار می توانید مهارت های جاوا اسکریپت خود را بهبود ببخشید. زیرا این ابزار کمکی طراحی سایت هر روز مطالب جدیدی را در مورد جاوا اسکریپت ارائه می دهد.

برای طراحی سایت از نرم افزارهای بسیار زیاد و متعددی استفاده می شود. یکی از نمونه های نرم افزار کاربردی در طراحی سایت ، نرم افزار EditRocket است. این برنامه یک نرم افزار بسیار قدرتمند است که کار با آن بسیار ساده می باشد. از این برنامه در طراحی سایت برای ویرایش کدهای برنامه نویسی استفاده می شود. این نرم افزار قابل استفاده برای ویرایش 20 نوع زبان برنامه نویسی مختلف است که به عنوان برخی از آنها می توان به مواردی همچون PHP، CSS، جاوااسکریپت،HTML، SQL وغیره اشاره کرد.

این نمونه نرم افزار طراحی سایت در بردارنده یک لیست قالب جستجو است که از آن برای بررسی همخوانی کدهای برنامه نویسی در دو فیلد مختلف و همچنین برای اعتبار سنجی کدهای HTML، CSS و XML توسط وب مسترها استفاده می شود. این ویژگی برای سئو بسیار مهم است. از ویژگی های بارز این نرم افزار که آن را برای طراحی سایت کاربردی می کند، می توان به مواردی همچون امکان ایجاد استایل های مختلف وب، قابلیت افزودن تگ HTML به صورت اتومات و خودکار، امکان به کاربردن آن به صورت مرورگر و غیره اشاره کرد. همین امکانات و قابلیت های بسیار این نرم افزار است که موجب تمایز آن از سایر نرم افزار و برنامه های کاربردی در طراحی سایت شده است.

قابلیت های نرم افزار طراحی سایت EditRocket :

• مشخص کردن کدهای مورد نظر برای زبان های برنامه نویسی مختلف
• قابلیت ویرایش حرفه ای کدهای برنامه نویسی
• امکان ایجاد کد و تگ به صورت خودکار
• قابلیت ایجاد تگ های html وcss  با ادیتورهای قدرتمند
• امکان وارد کردن ساختار ها به صورت اتوماتیک
• اعتبار سنجی کدها ، که دارای اهمیت بالایی در سئو و بهینه سازی سایت است.
• به منظور دسترسی سریع به بخش های مورد نظر، این نرم افزار کاربردی برای طراحی سایت ، دارای امکان bookmark است.
• دارای پنل مدیریتی به منظور حذف ، اضافه کردن و همچنین برای جستجوی فایل ها
• و غیره

دلایل ریدایرکت در طراحی سایت

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

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

معمولا یک صفحه از طراحی سایت را به دلایل زیر تغییر مسیر می دهند:

• آدرس اینترنتی (url) خراب است و یا کار نمی کند.

• صفحه وب / وب سایت دیگر فعال نیست.

• یک طراحی سایت جدید دارید که می خواهید کاربران به جای وب سایت قدیمی شما، از آن بازدید نمایند.

• قصد آزمایش A / B یک وب سایت از نظر طراحی سایت و ساختار آن را دارید.

• در حال به روز رسانی و ایجاد تغیراتی در طراحی سایت خود هستید، به همین منظور یک مسیر انحرافی برای کاربران خود به منظور تجربه وب سایت مستمر و لاینقطع ایجاد می نمایید.

ابزار AMP چیست؟

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

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

طراحی سایت با استفاده از این فریم ورک در موتورهای جستجو با لینکآبی نمایش داده می شوند. البته این نسخه،در حال حاضر یک نسخه دمو و نمایشی است و نسخه اصلی آن در سال 2016 طراحی و تکمیل خواهد شد. این ابزار به ویژه برای طراحی سایت خبری بسیار مناسب و ایده آل است و در حال حاضر وب سایت های خبری بزرگ نظیر  BBC و CNN  به این ابزار مجهز هستند.

 در طراحی این فریم ورک شرکت های مختلفی که در زمینه وب فعال هستند به مانند لینکدین، یوتیوب، اپل، پینترست، وردپرس و غیره با گوگل همکاری کردند. به منظور بهینه سازی سایت بر مبنای AMP می توانید به وب سایت رسمی آن و یا به صفحه رسمی AMP در Github مراجعه نمایید.

شرکت گوگل با طراحی این فریم ورک نشان داده است که از طراحی ساده و غیر پیچیده آن هدف والایی دارد. حتی ممکن است در آینده ای نه چندان دور این تکنولوژی جایگزین ترفندهایی نظیر طراحی سایت رسپانسیو و واکنش گرا باشد. البته این تنها یک پیش بینی است...

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

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

1. طراحی تعاملی

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

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

2. ساخت داستان برای وب سایت

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

3. استفاده از الگو

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

4. دادن پاداش به کاربران

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

5. صبر و زمان گذاشتن

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

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

معرفی سرویس OptinMonster (کاربران را در سایت خود نگاه دارید)

من زمانی که تعداد تجارت هایی را بدون اینکه لیست ایمیلی داشته باشند دیدم شگفت زده شدم.

اکثر این سایت ها و تجارت های کوچک و بزرگ، تمرکز اصلی خود را برای دریافت ترافیک سایتشان از شبکه های اجتماعی می گیرند. این خیلی عالیه، اما بعد چه خواهد شد؟ کاربران به وبسایت شما خواهند آمد، مطلبتان را می خوانند و سایت را ترک می کنند.

تحقیقات نشان می دهد که بیش از 70 درصد بازدیدکنندگانی که پس از مطالعه، سایت را ترک می کنند هرگز باز نمی گردند. این بدین معنی است که بیشترین تلاش ها و وقت گذاری های شما برای سایتتان به هدر می رود. آیا شما راضی به این هستید؟

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

با استفاده از همین روش ساده، اعضای سایت ما 600 درصد افزایش داشته اند.

ما از گرفتن 70 عضو ایمیلی جدید در روز به 445 عضو جدید در هر روز با میزان ترافیک در قیاس با گذشته رسیدیم.

اینها همه با استفاده از یک سرویس دهندۀ ارائه کنندۀ خدمات قانونی ایمیل مثل یکی از پلاگین های وردپرس به نام OptinMonster شدنی هستند.

حال این به اصطلاح نگهدارندۀ کاربر در وبسایت چه می کند؟

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

این مفهوم هر روز در تعارفات ما اتفاق می افتد. فکر کنید، زمانی که یک مهمان در حال ترک خانۀ شماست، شما او را به برگشتن و ماندن دعوت می کنید. چرا همین کار را به صورت مشابه برای بازدیدکنندگان و مهمانان سایتمان نکنیم؟ من انجام دادم و کار هم کرد!

اگر شما یک وبسایت یا وبلاگی دارید که برایتان مهم است، پس باید کار با OptinMonster را آغاز کرده و ایمیل لیست خود را بسازید.

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

در حال حاضر شما با وارد نمودن کد WPB10 می توانید از 10 درصد تخفیف در خرید پکیج های سایت بهره مند شوید.

تکنیک آپلود کردن تصاویر به صورت فونت در طراحی سایت

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

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

سایت فونتستیک امکان ایجاد تصاویر vector به شما  می دهد و شما می توانید از این طریق تصاویر راه فونت تبدیل کرده و حجم صفحات خود را بسیار کاهش دهید و از تصاویر vector در اندازه های بزرگ استفاده کنید. برای دسترسی به این سایت کافیست به آدرس زیر مراجعه کنید.

fontastic.me

مقایسه سرعت اجرایی php با asp.net

یکی از موضوعاتی که اکثر طراحان سایت در طراحی سایت سر آن با هم به بحث  گفتگو می پردازند مقایسه سرعت اجرایی php و asp.net است. در سرور های PHP مرحله compile در هنگام مشاهده صفحه انجام می شود که باعث کند شدن سرعت اجرای برنامه نوشته شده می شود اما در asp.net کد های خروجی به صورت بایت کد است و در هنگام اجرای یک صفحه مرحله compile از بین می رود و باعث می شود سرعت اجرای برنامه به صورت چشمگیری افزایش یابد. طی تحقیقات و آزمایش های انجام شده توسط مراکز معتبر بین المللی در شرایط یکسان، می توان گفت سرعت اجرایی asp.net نسبت به PHP در بارگذاری داده هایی با حجم زیاد تا 10 برابر سریعتر است.

در سایت php-compiler.net که در حال انجام یک پروژه open source به نام phalanger است کد های php به بایت کد asp.net  تبدیل می کند که توسط  IISآن ها را می توان اجرا کرد.

 این پروژه با هدف  افزایش سرعت اجرایی کد های php ایجاد شده است. این شرکت به ویمستران پیشنهاد می دهد که اگر دارای سرور لینوکس هستید با استفاده از framework mono (قابلیت اجرای کد های .net بر روی لینوکس می دهد) کد های PHP  خود را به .net تبدیل کنند و از سرعت اجایی کد های خود لذت ببرند.

بر اساس نتایج آزمایش ها می توان گفت سرعت اجرای کد های PHP پس از تبدیل شدن به بایت کد.net  بسیار بالاتر از سرور های معمول php هستند تقریبا 4 برابر بیشتر است!

سایت بزرگ و جهانی Yahoo قسمت هایی از سایت خود را که PHP  بوده به node.js  تبدیل کرده است. سایت ورد پرس تنها سایت بزرگی است که که در سیستم ابری خود از این زبان بهره میبرد و شرکت گوگل از زبان C++  برای تکنولوژی سرور خود استفاده می کند.

طراحی سایت با RUP

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

از مشهورترین متدولوژی های  تولید نرم افزار می توان از متدولوژی XP، متدولوژی  RUP، متدولوژی Agile، متدولوژی Hybrid نام برد.

هر کدام از این متدولوژی های مزایای منحصر به فردی دارند. نقش و وظایف هرکدام از افراد گروه بر اساس متدولوژی انتخاب شده تعیین می شود. معیار انتخاب این متدولوژی های  بستگی به حجم پروژه و مشخصات و قدرت تیم تولید کنند دارد. در کشورمان اکثرا نوع پنچم یعنی هیچ کدام را انتخاب می کنند. زیرا در ایران 90% پروژه ها شکست می خورند یعنی 20% بیشتر از رتبه جهانی!

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

استفاده از این روش باعث می شود روند کار چندین برابر باشد افزایش یابد در حالی که هزینه زیادی برای آن متقبل شده اید. پس به جای دو سر سود دو سر ضرر نسیبمان میشود.

اگر تمایل دارید یکی از روش های فوق را استفاده کنید به شما روش Agile را پیشنهاد می کنم.

بهینه سازی حجم صفحات وب و تاثیر آن بر طراحی سایت

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

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

همچنین استفاده از تعداد فایل های زیاد CSS و جاوا علاوه بر کند کردن سرعت سایت در بعضی موارد حتی باعث فشار آوردن به سرور می شود بنابراین سعی کنید به طور معقولانه از CSS و فایل های JV استفاده کنید.

فایرباگ چیست و کارکردن با آن چگونه می باشد؟

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

به خاطر همین کاربرد فایرباگ بیشتر افرادی که در زمینه ی طراحی سایت و سی اس اس کار می کنند از این برنامه برای رفع عیوب وب سایت خود و همچنین بررسی استراکچر سایت های دیگر استفاده می کنند . همانطور که از اسم این برنامه پیداست این برنامه یدک کش اسم مرورگر خود یعنی فایرفاکس می باشد .شما می توانید پس از دانلود این برنامه و مرورگر فایر فاکس به تشریح وب سایت ها بپردازید .برای استفاده از این برنامه از دکمه ی F12 استفاده می کنند .

برای استفاده از فایرباگ از طریق context menu مرورگر کافی ست با کلیک راست کردن در سایت گزینه ی inspect element را انتخاب کرده  تا پنل فایرباگ ظاهر شود . همچنين براي باز کردن پنل فاير باگ مي توانيد روي دکمه فاير باگ کليک کنيد. با توجه به ورژن فاير فاکس شما اين آيکون در پائين صفحه سمت راست يا بالا سمت راست کنار نوار جستجو قرار مي گيرد .

برای استفاده از فایرباگ در یک پنجره جدید روی صفحه می توانید از دکمه نمایش در پنجره جدید را از فایرباگ کلیک کنید . باتوجه به اینکه کار اساسی فایرباگ بررسی می باشد این پنل به شما در بررسی و درک html عناصر درون صفحه کمک می کند.در سمت چپ صفحه شما قسمت نمایش ند وجود دارد که تشکیل دهنده صفحه ای که در مرورگر شما باز است را نمایش می دهند .

ندها به شما کمک می کند تا به ویرایش عناصر html بپردازید این ابزار نشان می دهد که مرورگر به چه صورت به پیاده سازی و اجرا کردن عناصر اچ تی ام ال در صفحه می پردازد و عناصر مشخص در کجای صفحه قرار دارد با استفاده از این ابزار می توانید به مشکلات مربوط به margin و padding در صفحه پی ببرید . وقتي که شما بر روي ند هاي اچ تي ام ال کليک مي کنيد روي نوار بالاي بخش نمايش ند ها، مسير هر ند نمايش داده خواهد شد . از اين مسير براي افزودن يا نوشتن هر نوع سي اس اس مورد نياز بطور مخصوص و مشخص، براي يک بخش به خصوص، از عناصر وب سايت که مشابه قسمت هاي ديگر در صفحه وب سايت شما مي باشد و همچنين براي دريافتن اينکه بخشها و عناصر صفحه داراي چه خصوصياتي از سي اس اس هستند استفاده مي کنيم . براي اينکه هر چه سريعتر به عنصر اچ تي ام ال مورد نظر خود دست يابيد مي توانيد از نوار جستجوي سمت راست پنل استفاده کنيد که با هاي لايت توسي در بخش نمايش ند ها ، بخش مورد نظر را نمايش خواهد داد .

 حال به تعریف پنل کناری که در سمت راست دیده می شود می پردازیم . این پنل 4 پنل دیگر را در خود جای داده است که عبارتند از :

1) استایل : پنل استايل style در پنل کناري به شما تاثير سي اس اس هاي مهم عناصر صفحات وب را نمايش مي دهد اين پنل نمايي از استايل شيت ( صفحه نوشتن کد هاي سي اس اس ) با شماره خط آن سي اس اس را نمايش مي دهد. در اين حالت شما بيشتر از يک استايل شيت خواهيد داشت .

2) قالب : در پنل محاسبات يا computed ، شما خصوصيات سي اس اس را مشاهده خواهيد کرد مانند font-size, font –color,text-align و غيره اين اطلاعات به شما در درک نحوه ارائه اين کد ها توسط مرورگر کمک ميکند .

3) محاسبه : پنل قالب layout در پنل کناري ، تصويري از باکس مدل هاي يا تقسيم بندي صفحه وب را. نمايش ميدهد. اگر شما جزو آن دسته از افراد هستید که برای طراحی سایت با نگاه کردن مي آموزيد اين پنل بهترين امکان را به شما براي يادگيري هر چه بهتر مي دهد .براي يادگيري margin و padding صفحه، آشنايي با تقسيم بندي صفحه وب از اين ابزار به راحتي مي توانيد استفاده کنيد با دوبار کليک کردن روي اعداد نمايش داده شده در اين پنل شما مي توانيد آزمايش هاي خود را به صورت واقعي روي يک صفحه وب انجام دهيد .

4) سند مدل شیء یا DOM : پنل DOM ، در واقع سند مدل شيء يک عنصر در صفحه وب را نمايش مي دهد اين بخش بيشتر براي کساني که با جاوا اسکريپت يا اسکريپت هاي کلاينت سايد کار مي کنند مناسب است .

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

افزودن / ويرايش کردن و حذف کردن تمام عناصر اچ تي ام ال

براي مثال در صورت حذف اين div چه اتفاقي براي floats صفحه خواهد افتاد؟

افزودن / ويرايش و حذف ID وکلاس

براي مثال در صورت حذف اين کلاس آيا خصوصيات ارائه شده با مشکل مواجه مي شوند؟

قرار داد تکميل کننده هاي بيشتر در عنوان ، متن ها و روي دکمه ها براي تست line brek يا شکست خطوط متني

افزودن استايل هاي inline موقتي براي تست سريع با استفاده از خصوصيات html

مثلا آيا اين هايپر لينک hyperlink با اين استايل بهتر مي شود style=”color:#00aeef” or style=”color:# 067fad”

فاير باگ کد هايي ويرايش شده را ذخيره نمي کند . در صورت کليک يک لينک با رفرش کردن صفحه تغييرات انجام شده ناپديد مي شوند . بنابر اين بهتر است يک اديتور متون مثل نت پد در کنار خود داشته باشيد که کد هاي جديد و دستاورد هاي خود را در آن يادداشت کنيد
اصلاح سي اس اس هاي اجرا شده .

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

اين سلکتورها در دستور سي اس اس هاي ارائه شده نمايان مي شود سي اس اس هاي که در صفحه استايل شيت آخر نوشته شده اند بالا تر قرار مي گيرند و آنهايي که در استايل شيت در ابتداي صفحه نوشته شد ه اند در پائين صفحه قرار مي گيرند . مثال بالا در مورد وب سايت هايي داراي چندين صفحه استايل يا استايل شيت متفاوت است .

فاير باگ عناصر اچ تي ام الي که فعال و در تغييرات موثر هستند را با کشيدن خط روي عناصر سي اس اسي که جايگزين آنها شده اند، مشخص مي کند. اگر روي يکي از عناصر خطي کشيده شده بود اين بدين معني است که قانون ديگري در سي اس اس اوليت بيشتري نسبت به اين قانون بر روي يک عنصر واحد داشته است .

چيز جالب که در پنل کناري بخش سي اس اس وجود دارد اين است که اين کد ها قابليت اديت شدن را دارند مثلا اگر مي خواهيد ببيند که وب سايت چه تغييري مي کند اگر شما padding-top را به 22px تغيير بديد فقط کافي روي عدد کليک کنيد و اون رو تغيير بديد يا حتي مي تونيد اون خصوصيت را اديت کنيد يا خصوصيت جديدي به آن اضافه کنيد .

شما حتي مي توانيد خصوصيتي را غير فعال کنيد و ببيند در صورت عدم وجود اين قانون صفحه وب به چه صورت تغيير ميکند. اين قابليت براي پيدا کردن کد ها و خطوط غير قابل استفاده در سي اس اس مفيد مي باشند و به شما در کشف علت استفاده خصوصيات مختلف کمک مي کند .

وقتي شما در حال اديت کردن کد هاي سي اس اس در پنل کناري سمت راست صفحه هستيد با دکمه اينتر مي توانيد به سلول قابل اديت بعدي برويد، با اين دکمه مي توانيد براي ويرايش از يک خصوصيت به مقدار عددي آن و سپس به خصوصيت بعدي برويد. وقتي در آخرين خصوصيت يا مقدار يک بخش از يک سلکتور هستيد دکمه اينتر ، يک خط جديدي را براي افزودن خصوصيت و مقدار عددي جديد ارائه مي کند .

اگر شما تمايل داريد سي اس اس ي را به عنصري که مقدار عددي و کلاس ID ندارد ( که در اينصورت در پنل سمت راست کناري ديده نخواهد شد ) شما ميتوانيد يک استايل inline در پنل نمايش ند هاي سمت چپ با در پنل سي اس اس اضافه کنيد .

پنل سي اس اس يک نمايي را از کد هاي سي اس اس در استايل شيت هاي متعدد که شما به سايت اضافه کرديد مي دهد Source edit mode مد اديت سورس يا منبع، شما به ويرايش مقادير يا ارزشها مي پردازيد ( که شبيه پنل اچ تي ام ال سمت راست است که ما راجع به آن توضيح داده ايم ) در اين بخش مي توانيد آزادانه کد هاي خود را مانند وقتي که در اديتور خود هستيد تايپ کنيد .

محدوديت ها و خصلت هاي فاير باگ
با توجه به اينکه فاير باگ داراري خصلت هاي خوب زيادي است اما سرعت انتشار امکانات جديد درون فاير فاکس ديوانه کننده است و چه کسي مي تواند از اين موضوع ايراد بگيرد؟

با وجود ویژگی های که فایرباگ دارد این برنامه دارای یکسری محدودیت هایی نیز می باشد مانند عناصري در اچ تي ام ال که داراي خصوصيت هاور hover هستند!
اين سخت است که عناصري را که داراي سي اس اس هستند اشکال زدايي کرد داراي قوانين هاور و يا داراي هاور جاوا اسکريپتي هستند مانند منوهاي دراپ دان چون وقتي موس رو از روي انها بر مي داريم خصوصيتشون کاملا عوض مي شوند موضوع اين است که شما بايد چاره اي بيابيد که به بررسي عناصر تودر تو ( که تا زماني که روي عناصر اصلي کليک نکرده ايد پنهان هستند ) ، از طريق بررسي عناصر اصلي بپردازيد .

پيشنهاد اين است که از طريق خصوصيات استايل اچ تي ام ال اين عنصر را مجبور به باز شدن و ديده شدن آن نمائيد البته ايده خوبي براي تست هاي روي وب سايت هاي اجرا شده و لايو نيست اما تا حدي موثر است .

W3C چیست ؟

در این قسمت از مقالات طراحی سایت به معرفی W3C و همچنین کارهایی که توسط آن صورت می گیرد می پردازیم . W3C مخفف کنسرسیوم شبکه جهانی وب (World Wide Web Consortium) می باشد.کنسرسیوم شبکه جهانی وب یک کنسرسیوم از صنعت بین المللی است که به هدایت وب به سوی استعدادهای نهان آن اختصاص داده شده است .توسط تیم برنرز لی، مخترع وب رهبری شده و در سال 1994 تاسیس شده است .
w3c  بیش از 450 عضو سازمانی  که مجموعه ای از تولیدکنندگان نرم افزار،سخت افزار،تامین کننده محتوا و نهادهای علمی و شرکتهای ارتباط ز راه دور است.همچنین کنسرسیوم توسط سه سازمان تحقیقاتی میزبانی می شود که عبارتند از : MIT در آمریکا ، INRIA در اروپا و Keio University در ژاپن می باشد .

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

برنامه نویسان باید به این نکته توجه داشته باشند که حدود 35 درصد از کاربران از سایر مرورگرها غیر از اکسپلورر استفاده می کنند و برنامه نویسان کدهای خود را تنها بر روی اینترنت اکسپلورر آزمایش کنند درحالیکه تقریبا نزدیک به صدها نوع مختلف از مرورگرها وجود دارد و تعداد حتی بیشتری برای PDAها، تلفنهای همراه، و دستگاه های الکترونیکی لوکس دیگری که می توانند به اسنترنت متصل شوند موجود می باشند بنابراین طراحان سایتی که می خواهند سایت طراحی شده در پلتفرمهای مختلف بخوبی کار کند می توانند کدهایشان را با استانداردهای W3C بنویسند.زمان بارگذاری صفحات وب نیز در w3c اهمیت ویژه ای دارد بنابراین بهتر است صفحات وب با css طراحی شوند تا table برای اینکه سرعت بارگذاری صفحاتی که با css طراحی می شوند 25 الی 50 درصد بیشتر است.

همانطور که می دانیم در طراحی سایت رتبه بندی در موتورهای جستجو اهمیت خاصی دارد زیرا موتورهای جستجو وب سایت هایی که از استانداردهای طراحی سایت پیروی میکنند توجه دارند.spider های موتورهای جستجو به صورت منظم و دائمی به این وب سایت ها سرمیزنند،به همین دلایل وب سایت های که از استانداردهای طراحی استفاده می کنند نسبت به دیگر وب سایت ها دارای امتیاز می باشند.

با افزایش تعداد مرورگرها و روند ادامه آن، وجود استانداردی در کد نویسی، به نیازی ضروری بدل شده است. چنانچه شما از کدهایی استفاده کنید که استاندارد و معتبر نباشند بطوریکه در مرورگر خاصی بخوبی کار نکند، در این صورت، مشکل از جانب شماست. ولی چنانچه کدهای شما استاندارد باشند ولی در مرورگر خاصی به درستی نمایش داده نشوند، در اینحالت باگ در مرورگر است.سازمان W3C سرویس آنلاینی ( http://validator.w3.org) را برای بررسی معتبر بودن کدها به عموم ارائه داده است.