رفتن به مطلب
اطلاعیه مهم: پایان فعالیت انجمن پس از 15 سال ×
اطلاعیه مهم: پایان فعالیت انجمن پس از 15 سال

۸ قطعه کُد پُرکاربرد برای راه اندازی وب سایت جدید

poor!a

توسط poor!a،
در آموزش های عمومی

ارسال های توصیه شده

poor!a    15130

poor!a
ارسال شده در

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

 

البته تجربه نشان داده است که استفاده از روش های جدید همیشه به نفع ما تمام نخواهد شد! به عنوان مثال اگر می خواهید یک اپلیکیشن و یا وب سایت طراحی کنید که قرار است مرورگر (دردناک!) IE 6 را پشتیبانی کند، همانند اکثر نرم افزارها و وب سایت هایی که در ادارات دولتی استفاده می شوند، بهره گیری از امکانات HTML5 شما را به زحمت خواهد انداخت.

 

در این مطلب ما ۸ قطعه کُد کوچک که در انواع اپلیکیشن ها و وب سایت ها پُر استفاده هستند را با هم مرور خواهیم کرد. این کُد ها شامل کُدهای معمولی HTML5 و کُدهایی در سطح متوسط CSS3 هستند، که از آنها می توانید در اکثر پروژه هایتان استفاده کنید. پیشنهاد ما این است که این مطلب نردبان را بوکمارک کنید یا این کُدها را در یک فایل متنی و در نرم افزارهایی که برای توسعه از آنها استفاده می کنید، ذخیره کنید تا در هر زمان که نیاز داشتید از آنها استفاده کنید. پس در ادامه مطلب با ما همراه باشید.

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

۱. قالب HTML5

 

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

 


    [*=left]
    [*=left]
    [*=left]
    [*=left]
    [*=left] Default Page Title
    [*=left]
    [*=left]
    [*=left]
    [*=left]
    [*=left]
    [*=left]
    [*=left]
    [*=left]
    [*=left]

این قطعه کُد شامل:

A) تگ Doctype مخصوص HTML5 است که خوشبختانه نسبت به نسخه های قبلی HTML بسیار ساده تر شده است.

 

B) تگ Meta برای معرفی نوع محتوای صفحه و پارامتر های مرتبط به آن

 

C) تگ Title که معرف عنوان صفحه است

 

D) تگ های لینک برای معرفی Favicon و Shortcut Icon

 

E) لینک مربوط به یک فایل CSS. شما می توانید آن را به دلخواه خود تعیین کنید.

 

F) تگ Script که در بردانده کتابخانه jQuery ورژن 1.8.2 از سایت گوگل است.

برای استفاده از کتابخانه jQuery دو راه وجود دارد. یا مانند مثال از نسخه هایی که بر روی هاست های Google و یا jQuery قرار دارند استفاده کنید و یا از کتابخانه ای که بر روی هاست خودتان قرار میدهید استفاده کنید. البته نردبان به شما توصیه می کند فایل jQuery را روی هاست خودتان اپلود کنید. چرا که در ایران ممکن است هر لحظه سایت jQuery یا گوگل ف - ی - ل -ت-ر بشود و در این صورت، در عملکرد سایت شما اختلال به وجود می آید.

 

G) تگ اسکریپت HTML5shiv document که باعث می شود تگ های جدید HTML5 در مرورگر IE به رسمیت شناخته شوند.

۲. دستور ClearFix برای رهایی از مشکلات Float

 

اکثر توسعه دهندگان با دستور Float و کاربرد آن در CSS آشنایی دارند. اما همانگونه که می دانید پاک کردن تاثیرات این دستور قوانین خاص خودش را دارد.

 


    [*=left].clearfix:before, .container:after {
    [*=left] content: ""; display: table;
    [*=left]}
    [*=left].clearfix:after {
    [*=left] clear: both;
    [*=left]}
    [*=left]/* IE 6/7 */
    [*=left].clearfix {
    [*=left] zoom: 1;
    [*=left]}

شما می توانید کُدهای بالا را در CSS خود قرار دهید. و کلاس clearfix را به عناصری که در بردارنده عناصر دیگری با ویژگی float هستند اختصاص دهید. و دیگر نگران پاک شدن تاثیرات دستور float نباشید. تصویر زیر شما را در درک چگونه کار کردن این دستور کمک خواهد کرد.

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

۳. رهایی از استایل های پیش فرض مرورگرها

 

مرورگرهای صفحات وب هر یک قوانین خاص خود را در نمایش عناصر صفحات دارند، به معنی دیگر اگر شما تعیین نکرده باشید که عناصر صفحه تان چه استایل هایی (margin, padding,...) داشته باشند، مرورگرها استایل های پیش فرض خود را اعمال می کنند و این موضوع سبب می شود که شما شاهد نمایش های متفاوت یک صفحه در مرورگرهای مختلف باشید. این مشکلی است که برای بسیاری از تازه کارها پیش می آید. سایت شما در مرورگرهای مختلف درست دیده نمیشود و دلیل اش را هم پیدا نمی کنید. کافی است این قطعه کد را در سی اس اس فراموش نکنید تا بسیاری از مشکلات حل شود.

 

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

 

با کدهای زیر می توانید استایل های CSS پیش فرض خودتان را برای عناصر مختلف تعیین کنید تا دیگر مرورگرها در کار شما دخالت نکند.

 


    [*=left]html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    [*=left] margin: 0;
    [*=left] padding: 0;
    [*=left] border: 0;
    [*=left] font-size: 100%;
    [*=left] font: inherit;
    [*=left] vertical-align: baseline;
    [*=left] outline: none;
    [*=left]}
    [*=left]html { height: 101%; } /* always display scrollbars */
    [*=left]body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; }
    [*=left]article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
    [*=left]ol, ul { list-style: none; }
    [*=left]blockquote, q { quotes: none; }
    [*=left]blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
    [*=left]strong { font-weight: bold; }
    [*=left]input { outline: none; }
    [*=left]table { border-collapse: collapse; border-spacing: 0; }
    [*=left]img { border: 0; max-width: 100%; }
    [*=left]a { text-decoration: none; }
    [*=left]a:hover { text-decoration: underline; }

۴. گرادیانت در CSS3

 

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

 


    [*=left]background-color: #000;
    [*=left]filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000');
    [*=left]background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000));
    [*=left]background-image: -webkit-linear-gradient(top, #bbb, #000);
    [*=left]background-image: -moz-linear-gradient(top, #bbb, #000);
    [*=left]background-image: -ms-linear-gradient(top, #bbb, #000);
    [*=left]background-image: -o-linear-gradient(top, #bbb, #000);
    [*=left]background-image: linear-gradient(top, #bbb, #000);

برای هر عنصری که می خواهید گرادیانت داشته باشد استایل های CSS بالا را برای آن اختصاص دهید و سپس رنگ ها و سایر متغییر ها را به مقادیر دلخواه تغییر دهید.

۵. CSS3 Transforms

 

یکی دیگر از دستور های جدید CSS3 دستور transforms است. متاسفانه باید گفت که این دستور هنوز در مرورگر IE و نسخه های قدیمی Firefox دارای مشکلاتی است. اما به نظر ما امتحان کردن این دستور خالی از لطف نیست، اما در استفاده از آن در پروژه هایتان محتاط باشید.

 


    [*=left]-webkit-transform: perspective(250) rotateX(45deg);
    [*=left]-moz-transform: perspective(250) rotateX(45deg);
    [*=left]-ms-transform: perspective(250) rotateX(45deg);
    [*=left]-o-transform: perspective(250) rotateX(45deg);
    [*=left]transform: perspective(250) rotateX(45deg);

استایل های بالا را به طور مثال بر روی یک تگ h2 اعمال کنید و نتیجه را ببنید. به امید روزی که اکثر مرورگرها این دستور را به صورت یک پارچه و کامل پشتیبانی کنند.

۶. استفاده از فونت های مخلتف

 

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

 


    [*=left]@font-face{
    [*=left] font-family: 'MyFont';
    [*=left] src: url('myfont.eot');
    [*=left] src: url('myfont.eot?#iefix') format('embedded-opentype'),
    [*=left] url('myfont.woff') format('woff'),
    [*=left] url('myfont.ttf') format('truetype'),
    [*=left] url('myfont.svg#webfont') format('svg');
    [*=left]}
    [*=left]h1 { font-family: 'MyFont', sans-serif; }

خبر بدی که درباره دستور @font-face باید بدانید این است که متاسفانه نوع فونت هایی که مرورگرها پشتیبانی می کنند متفاوت است و اگر شما می خواهید دست خط مورد نظرتان در تمام مرورگرها کار کند باید فونت خود را با فرمت های OTF, TTF, EOT, WOFF و SVG تهیه کنید.

 

اما سرویس رایگان

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

۷. متا تگ (Meta Tag) های مورد نیاز برای طراحی ریسپانسیو

 

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

 


    [*=left]
    [*=left]
    [*=left]

زمانی که صفحه شما در یک تلفن هوشمند بارگزاری می شود متا تگ View Port باعث میشود که صفحه شما در نسبت ابعاد 1x1 نمایش داده شود. این متا تگ باعث می شود که مرورگر تلفن هوشمند به صورت پیش فرض صفحه شما را در حالت Full-View باز نکند و کاربر امکان بزرگنمایی (زوم) هم داشته باشد. دو تگ دیگر برای تلفن های هوشمند قدیمی تر در نظر گرفته شده اند.

۸. ابزارهای رسانه ای صوتی و تصویری در HTML5

 

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

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.
و
برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.
در وب پشتیبانی می شوند.

 


    [*=left]
    [*=left]

با استفاده از صفت preload می توانیم کاری کنیم که رسانه صوتی و یا تصویری پیش از آنکه کاربر بر روی آن کلیک کند روند دانلودش آغاز شود تا کاربر کمتر در انتظار دانلود شدن فایل مورد نظر بنشیند.

 

 

منبع :http://nardebaan.ir

نویسنده:محمد حسین موسی‌ زاده

  • Like 2
لینک به دیدگاه
رفتن به فهرست موضوع ها
×
×
  • اضافه کردن...