چهارشنبه, 06 شهریور 1392 15:53

چک لیست رفع عیب طراحی سایت

رفع عیب گام به گام html و css

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

برای رفع مشکل شما به صورت علمی دو روش وجود دارد:

  • کنار گذاشتن مواردی که درست کار می کنند
  • گذاشتم تمرکز بروی مواردی که بر روی آنها کار نشده

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

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

□ آیا تمامی فایل ها بارگذاری شده؟
آدرس تمامی فایل های مرتبط را در مرورگر تست نمایید, و مطمئن شوید تمامی آنها باز می شوند. این فایل ها شامل فایل های زیر می باشند:

  • فایل های HTML
  • فایل های CSS
  • تصاویر
  • فایل های JavaScripts
  • فایل های خارجی دیگر نظیر مالتی مدیاها

□ آیا آدرس تمامی فایل ها درست می باشد
در صورتی که صفحه سایت مورد نظر بالا نمی آید, و در صورتی که می دانید فایل را بارگذاری نموده اید, به هاست خود مراجعه نمایید و فایل خود را در آدرس مورد بررسی قرار دهید.

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

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

□ آیا فایل های css شما معتبر هستند؟
این بخش دقیقا به مانند اعتبارسنجی html می باشد, کافی است به سایت css validator مراجعه نموده و آدرس صفحه سایت خود را وارد نمایید.

□ آیا صفحه وب سایت شما کش می شود؟
کش وب ممکن است باعث سوء تفاهم بسیاری در وب شود. شما تغییرات لازم را بر روی سایت خود انجام می دهد و سایت خود را بارگذاری می نمایید اما تغییرات شما نمایش داده نمی شود. بهترین روش برای پاک کردن کش نگهداشتن کلید شیفت و کلیک بر روی کلید رفرش صفحه می باشد. اکثر مرورگرها با انجام این کار کش خود را خالی می نمایند و سایت را دوباره بارگذاری می نمایند.

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

□ آیا می دانید css و بسیاری سرورها نسبت به حروف بزرگ و کوچک حساس هستند؟
سعی نمایید در نام گذاری فایل ها و کلاس های css به استفاده از حروف کوچک و بزرگ دقت نمایید زیرا در صورتی که شما استفاده از حروف بزرگ و کوچک را رعایت ننمایید، مورد مورد نظر یافت نخواهد شد.

□ آیا DOCTYPE صحیحی انتخاب نموده اید؟
مرورگرهای مدرن چیزی دارند بنام quirks mode, این یک مود است که زمانی که مرورگرهای وب وارد صفحه ای می شوند که DOCTYPE ندارد این مورد را به عنوان پیش فرض انتخاب می نمایند. در صورتی که نمی دانید چه DOCTYPE را قرار دهید بهتر است آن را خالی بگذارید در غیر این صورت برای رویت DOCTYPE به لینک مراجعه نمایید.

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

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

بسیاری از ابزارهای زیر رایگان هستند و بسیاری دیگر را می توانید به مبلغ اندکی خریداری نمایید.

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

Typewolf

قصد ابداع در فونت ها را دارید؟  Typewolf برای شما بهترین سایت می باشد. فقط به شما قابلیت ایجاد فونت مورد نظر را نمی دهد بلکه فونت مناسب شما را می یابد.

Bootstrap 3

Bootstrap, فریم ورک موبایل اول از توئیتر, اما Bootstrap 3 RC1 به وجود آمد. این نسخه تغییرات بسیاری نسبت به نسخه های قبلی نموده است.

iOS 7 Wireframe Kit

 iOS7 Wireframe Kit به شما امکان ایجاد وایر فریم را در Illustrator می دهد.

Tiff

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

Bytesize

Bytesize پادکست در مورد طراحی، توسعه وب و تکنولوژی می باشد. شما همچنین می توانید خلاصه مقاله را با لینک به مقاله مطالعه نمایید.

Skeuocard

Skeuocard یک فرم پیشرفته کارت اعتباری می باشد و اعتبارسنجی ها و نوع فیلدهای مخصوص به خود را دارد.

WakaTi.me

WakaTi.me قابلیت حساب کردن زمان را به محیط ویرایشگر شما می آورد.

Responsive Web CSS

Responsive Web CSS ساخت وب سایت موبایل را برای انواع مختلف موبایل ها برای شما آسان می سازد.

Colorgorize

Colorgorize گالری وب تقسم بندی شده توسط رنگ می باشد. شما می توانید سایت را با رنگ مورد نظر خود مرور و یا جستجو نمایید.

Spectacle

Spectacle برای سیستم مک طراحی شده برای کنترل صفحه با کلیدهای میانبر. این یک سیستم کد باز می باشد و استفاده از آن بسیار آسان می باشد.

Snapnote.io

Snapnote.io به اشتراک گذاری و استفاده از تصاویر را در صفحه به وسیله دراگ و دراپ آسان می سازد.

Pico

Pico سیستم مدیریت محتوای ساده و آسان می باشد که از دیتابیس استفاده نمی نماید. این سیستم کد باز می باشد.

CSS3 Animation Cheat Sheet

 CSS3 Animation Cheat Sheet به شما قابلیت ایجاد انیمیشن های مختلف را توسط css3 نمایش می دهد.

Precomposed Touch Gestures

Precomposed Touch Gestures ابزار مناسبی برای ساخت دموی محصول و پرزنتیشن می باشد.

Mailparser.io

Mailparser یک راه آسان برای اتوماتیک سازی روتین ایمیل شما می باشد.

Progression.js

Progression.js یک پلاگین jquery برای نمایش عملکرد واقعی فرم می باشد.

CSS Zen Garden

CSS Zen Garden به شما امکان های ساخت ابزارهای مختلف توسط css را نمایش می دهد که با html5 هماهنگ شده.

NearlyFreeSpeech.NET

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

Webflow

Webflow ابزاری برای ساخت وب سایت موبایل به صورت تصویری می باشد. که شامل ابزارهای گرید، فونت های وب و فرم ها و .. می باشد.

Emmet LiveStyle

Emmet LiveStyle یلاگین برای ویرایش فایل CSS شما می باشد. این ابزار با گوگل کروم و سافاری سازگاری دارد.

TypeWonder

TypeWonder به شما امکان بررسی و تست فونت های وب را می دهد. فقط کافی است آدرس سایت مورد نظر را وارد نموده و فونت مورد نظر خود را انتخاب نمایید.

Cloud Cannon

Cloud Cannon به شما امکان ایجاد سیستم مدیریت محتوا از css و html را می دهد.

SVGeneration

SVGeneration به شما امکان ایجاد گرافیک های SVG را در سایت می دهد.

سه شنبه, 29 مرداد 1392 19:13

6 کتاب رایگان HTML5 برای طراحان وب

HTML زبان برنامه نویسی پایه می باشد و HTML5 آخرین نسخه HTML می باشد. که ابزارها و امکانات بسیاری برای ایجاد وب سایت پویا دارد. HTML5 استاندارهای مدرن وب را برای همگان به ارمغان آورده است.HTML5 قابلیت های فراوانی را به وب اضافه نموده است, که مطالب قابل خواندن توسط انسان را با مطالب قابل خواندن توسط ماشین را با یکدیگر در ارتباط قرار می دهد.

در روزهای پیش, تکنولوژی های جدید نظیر HTML5, CSS3, jQuery و سایر امکانات معرفی شدند. این تکنولوژی های جدید به طراحان امکان ایجاد وب سایت های پویاتر و به روز تر را می دهند. امروزه برخی از طراحان ترجیح می دهند مطالب آموزشی را به صورت آنلاین و از طریق کتاب های الکترونیکی مطالعه نمایند.

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

مجموعه 6 کتاب رایگان html5 برای طراحان وب

1. Dive Into HTML5

Dive Into HTML5 قابلیت های جدید html5 را به کاربر نمایش می دهد. نسخه آخر آن توسط O’Reilly, تحت لیسانس Google چاپ گردید.

دانلود: Dive Into HTML5

2. Up to Speed on HTML 5 and CSS 3

یک معرفی اولیه در مورد استانداردهای html5 و css3, که از موارد اولیه تا موارد کاربردی تر را آموزش می دهد.

دانلود : Up to Speed on HTML 5 and CSS 3

3. Scribd in HTML5

یک کتاب آموزشی html5 که آموزش خود را از طریق تشریح مثال های موارد انجام شده انجام می دهد.

دانلود Scribd in HTML5

4. HTML5 WTF?

در این کتاب به تغییرات html5 نسبت به نسخه های قبلی بیشتر اشاره شده

دانلود : HTML5 WTF?

5. 20 Things I learned about Browsers and the Web

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

دانلود: 20 Things I learned about Browsers and the Web

6. HTML5 Quick Learning Guide

این کتای آموزشی المان های اولیه html5 را به شما آموزش می دهد و آن ها را از نظر کاربردی بررسی می کند. این کتاب آموزشی برای آنهایی که می خواهند با امکانات جدید html5 آشنا شوند مناسب است.

دانلود: HTML5 Quick Learning Guide.

فعال سازی شده در html در طراحی سایت
سه شنبه, 22 مرداد 1392 12:50

ساخت پرزنتیشن توسط ابزار HTML5

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

ساخت معرفی نام توسط Presente بسیار آسان می باشد

Presentate کاربران را قادر می سازد پرزنتیشن های خود را در مرورگر و با قابلیت به اشتراک گذاری در هر وسیله ای بسازد. این برنامه توسط Faruk Ate و Justin Hileman ساخته شده. آنها قصد داشتند سیستم پرزنتیشنی را طراحی نمایند که بهترین در سطح وب باشد, و HTML5 به آنها این اجازه را داد تا این سیستم را راه اندازی نمایند.

File API و History API دو تا از امکانات HTML5 دیده شده در نرم افزار هستند, فول صفحه و امکان انواع مختلف فایل. آنها اعلام می نمایند که مشکلی که آنها با آن در حال حاضر روبرو هستند "پشتیبانی از مرورگرهای مختلف برای نوع داده های مختلف و مقداردهی ها".

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

فعال سازی شده در html در طراحی سایت
دوشنبه, 14 مرداد 1392 17:11

قالب خالی جوملا 2.5 و 3

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

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

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

#content{

position:absolute;

left:0;

right:0;

margin-left:auto;

margin-right:auto;

}


سایر مقالاتی که ممکن است علاقه مند باشید


فعال سازی شده در css در طراحی سایت
صفحه 2 از 2
طراحی سایت دارکوب | هاست دارکوب | دارکوب نام و علامت تجاری ثبت شده این مجموعه می باشد.
دارای مجوز از (سازمان نظام صنفی رایانه ای استان تهران) ، (رتبه 4 شورای عالی انفورماتیک کشور) ، (وزارت فرهنگ و ارشاد اسلامی)
آموزشگاه طراحی سایت و سئو با مجوز رسمی از سازمان فنی و حرفه ای کشور افتتاح شد
دارکوب به عنوان شرکت خلاق توسط معاونت علمی و فناوری ریاست جمهوری برگزیده شد