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.

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

محتوا اول

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

طراحی منعطف

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

Metro

با انتشار ویندوز نسخه 8 و مطرح شدن مسائلی به مانند ارائه محتوا قبل از هر چیزی وب سایت های بسیاری قالب خود را به مانند قالب Metro پیش فرض ویندوز 8 طراحی نمودند. Metro طراحی است که در آن آیتم های محتوا به باکس هایی در سایزهای مختلف تقسیم بندی شده , که با تصویر ، آیکون تزئین شده است.

پشتیبانی Retina

Apple نمایش Retina خود را برای iPhone 4, iPad, و MacBook Pro در سال 2012 معرفی نمود. نمایش Retina نوع نماشی می باشد که شرکت apple برای صفحات کریستالی نمایشی خود طراحی نموده است. Apple ادعا می نماید نمایش Retina از نظر کیفیت پیکسلی به گونه ای است که چشم انسان قادر به رویت پیکسل های آن نیست. طراحان وب بسیاری کیفیت تصاویر و فایل های css خود را به گونه ای طراحی نمودند تا از این قابلیت پشتیبانی نماید. Retina.js راه دیگری برای ارسال تصاویر با کیفیت به مرورگرهای apple می باشد.

اسکرول نامحدود

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

Parallax

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

سایت های تک صفحه ای

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

پس زمینه تصویر و یا ویدئو کامل

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

طراحی نظیر نرم افزارها

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

افکت های CSS3

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

استفاده از فونت ها و تیترهای درشت

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

طراحی المنت ها به صورت کروی

طراحان وب بسیاری از اشکال دایره ای شکل به جای اشکال مستطیلی و گوشه های گرد استفاده نمودند . دایره ها همچنین در طراحی “Metro” استفاده می شوند.

فید کردن

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

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

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

فرآیند بررسی سایت به سه مرحله تقسیم شده: سئو کل سایت, سئو صفحات و خارج از صفحات.

سئو کل سایت

سئو کل سایت به بررسی کل سایت می پردازد

Accessibility

• دسترسی صفحه: در صورتی که موتور جستجو به یک صفحه نرسد نمی تواند صفحه را ایندکس نماید. دقت نمایید فایل robots.txt یا robots meta tag به صورت تصادفی صفحات خاصی را مسدود نکرده باشد. 
• صفحات نا مناسب: همینطور صفحاتی نیز نبایند ایندکس شوند به طور مثال صفحاتی که هنوز تکمیل نشده اند و یا صفحات مخصوص کاربران. آن ها را از طریقrobots.txt یا robots meta tag مسدود نمایید. 
• صفحه بندی: حتما از تگ های rel=”next” و rel=”prev” برای لینک های صفحه بندی خود استفاده نمایید تا دچار صفحات با عناوین تکراری نشوید. 
• انتقال ها: از عملیات انتقال صفحه 301 به جای 302 استفاده نمایید. عملیات انتقال صفحه 301 رنک بهتری نسبت به 302 دارد. 
• 404 خطا: خطاهای 404 سایت خود را به حداقل برسانید. 
• سرعت سایت: سرعت لود شدن وب سایت تاثیر بالای در رنک وب سایت دارد. سرعت بالاتر رنک بهتری در گوگل می گیرد از ابزار چک کردن سرعت وب سایت گوگل برای بررسی سرعت وب سایت خود استفاده نمایید. 
• دسترسی برای موبایل: آیا سایت شما با موبایل دسترسی مناسبی دارد. گوگل پیشنهاد می نماید برای سایت خود حتما نسخه موبایل ایجاد نمایید. 
• محتوای تکراری: حتما سایت خود را در ابزار مدیران وب سایت گوگل ثبت نموده و صفحات تکراری خود را بررسی نموده و صفحاتی تکراری خود را حذف نموده و یا آنها را به صفحه اصلی انتقال دهید. همینطور می توانید از تگ rel=”canonical” برای جلوگیری از محتوای تکراری استفاده نمایید. 

ساختار آدرس دهی صفحات

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

نقشه سایت

• HTML نقشه سایت: یک نقشه سایت html برای کاربران سایت ایجاد می گردد تا کاربران سایت ساختار سایت را متوجه شوند ولی موتورهای جستجو از طریق آن شاخه بندی سایت را همینطور بررسی می نمایند. 
• XML نقشه سایت: نقشه سایت xml برای موتورهای جستجو طراحی می گردد و موتورهای جستجو از طریق آن شاخه بندی سایت را استخراج می نمایید. تعداد لینک های نقشه سایت نباید از 5000 بیشتر باشد. 
• نقشه سایت تصویری: تصویر نقشه سایت شما در نتایج موتور جستجوی گوگل نمایش داده خواهد شد و باعث بالا رفتن رنک شما خواهد شد. 
• نقشه سایت ویدئو: نقشه سایت ویدئوئی به ایجاد ابزارهای جدید گوگل در سایت کمک می نماید. 

بهینه سازی صفحه

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

Keyword

• یک کلمه کلیدی در هر صفحه: هر صفحه یک کلمه کلیدی داشته باشد. 
• بررسی کلمه کلیدی: رنک گرفتن برای کلمه کلیدی درست بسیار مهم می باشد. کلمات کلیدی خود را بررسی نمایید و آنهایی را انتخاب نمایید که جستجوی ماهینه بیشتری دارند و تعداد رقابت کننده کمتری دارند. 
• کلمه کلیدی در آدرس: برای ساخت نام صفحات خود از کلمات کلیدی صفحه استفاده نمایید 
• کلمه کلیدی در عنوان: کلمه کلیدی را حتما در عنوان استفاده نمایید, و ترجیحا در ابتدای جمله. این مسئله برای موتورهای جستجو بسیار مهم است. 
• کلمات کلیدی در عناوین: کلمات کلیدی خود را در تگ های عناوین h1,h2,h3 استفاده نمایید.
• کلمه کلیدی در محتوا: از کلمه کلیدی مورد نظر حتما در بدنه صفحه استفاده نمایید از مترادف های کلمه کلیدی نیز استفاده نمایید. سعی نمایید کلمه کلیدی را حتما در اولین پاراگراف استفاده نمایید. 

محتوا

• عنوان: حداکثر 70 کاراکتر
• محتوای جدید: به کاربران خود مطالب جدید و جذاب ارائه نمایید. 
• نوع محتوا: استفاده از انواع مختلف فایل ها به مانند فایل امتحانی، فایل کمیک و ....... 
• قابلیت خوانایی: موتورهای جستجو نمی توانند انواع مختلفی از آیتم ها به مانند تصاویر و فایل فلش را بخوانند حتی الامکان از متون جهت توضیح صفحه خود استفاده نمایید.  
• انتخاب زبان: به موتورهای جستجو اطلاع دهید این یک نسخه ترجمه می باشد با استفاده از تگ هایtherel=”alternate” hreflang=”x” . 
• تازگی: موتورهای جستجو به مطالب جدید علاقه مندند دائما مطالب خود را تغییر دهید.
• مقدار محتوا: مقالات بلندتر رنک بهتری در موتورهای جستجو می گیرند سعی نمایید مقالات تعداد کاراکترهای مقالات شما از 300 بیشتر باشد. 

تصاویر

• نام فایل: از نام فایل معنادار استفاده نمایید. 
• Alt تگ: حتما توضیحات تصویر را توسط تگ alt بدهید. 
• سایز: حجم تصاویر را در حداقل قرار دهید. 

نمایش در موتورهای جستجو

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

جستجوی محلی

• بهینه سازی محلی: برای بهینه سازی صفحه خود برای مکان خاصی از نام مکان در عنوان، بدنه و آدرس صفحه استفاده نمایید. 
• داده های ساختار یافته: توسط داده های ساتار یافته همچنین می تواند مکان محل خود را اعلام نمایید.  
• چندین مکان: در صورتی که خدمات خود را در مکان های مختلف ارائه می نمایید برای هر مکان یک صفحه مجزا ایجاد نمایید. 
• Google+: صفحه محلی گوگل خود را ایجاد نمایید. 
• لیست محلی: از سایت های محلی برای سایت خود لینک بگیرید. 

بهینه سازی خارج از سایت

تاکتیک سئو بر روی خارج از سایت

• لینک های داخلی: تعداد لینک های داخلی را بررسی نمایید. 
• اعتبار بخشیدن: لینک از سایت های معتبر به سایت شما اعتبار می بخشد 
• متن لینک: از کلمات کلیدی خود برای لینک دادن به سایت خود از سایت های دیگر استفاده نماید اما در انجام این کار زیاده روی ننمایید و آن را به صورت طبیعی انجام دهید. 
• تنوع: بهتر است از چند سایت مختلف رنک بگیرید تا در یک سایت لینک های بیشتری داشته باشید. 
• Nofollow:لینک هایی که تگ nofollow دارند رنکی به سایت شما ارسال نمی نمایند 
• لینک های بد: لینک از سایت ها نا معتبر رنک سایت شما را خراب می نماید. لینک در سایت های بد را حذف نموده و یا از Disavow Tool استفاده نمایید. 

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