پیش نمایش : نمونه

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

۱٫ عکس زمینه

۲٫ دکمه های کنترل

۳٫ چند عکس برای اسلاید کردن

HTML :

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

<div id="slideshowContainer">

</div>

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

<div class="slideshow">
    <img src="images/image1.png" alt="" width="600" height="300" />
    <img src="images/image2.png" alt="" width="600" height="300" />
    <img src="images/image3.png" alt="" width="600" height="300" />
    <img src="images/image4.png" alt="" width="600" height="300" />
    <img src="images/image5.png" alt="" width="600" height="300" />
</div>

پس تا اینجا باید کدهای شما مثل این باشه :

<div id="slideshowContainer">
<div class="slideshow">
        <img src="images/image1.png" alt="" width="600" height="300" />
        <img src="images/image2.png" alt="" width="600" height="300" />
        <img src="images/image3.png" alt="" width="600" height="300" />
        <img src="images/image4.png" alt="" width="600" height="300" />
        <img src="images/image5.png" alt="" width="600" height="300" />
</div>
</div>

خوب ، تو این مرحله باید دکمه های کنترلی رو اضافه کنیم . مثل کدهای زیر :

<div id="slideshowContainer">
<div class="slideshow">
         <img src="images/image1.png" alt="" width="600" height="300" />
         <img src="images/image2.png" alt="" width="600" height="300" />
         <img src="images/image3.png" alt="" width="600" height="300" />
         <img src="images/image4.png" alt="" width="600" height="300" />
         <img src="images/image5.png" alt="" width="600" height="300" />
</div>
<ul id="nav">
	<li id="prev"><a href="#">Previous</a></li>
	<li id="next"><a href="#">Next</a></li>
</ul>
</div>

JQuery :

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

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

حالا برای اسلاید کردن تصاویر باید پلاگینی که نصب کردیم رو فراخوانی کنیم . کدهای زیر رو به قسمت Head پایین کدهای مرحله قبل اضافه کنید :

<script type="text/javascript">
    $(document).ready(function() {
        $('.slideshow').cycle({
        fx: 'fade',
        pause: 1,
        prev: '#prev',
        next: '#next'
        });
    });
</script>

توی این بخش می تونید هر طوری که خودتون دوست دارید تغییرات ایجاد کنید . مثل افکت ، ترتیب ،عرض ، ارتفاع و …
می تونید همه تنظیمات رو اینجا ببینید

CSS – قالب بندی اسلایدشو :

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

<style type="text/css">
* {
    margin:0px;
    padding:0px;
    border:0px;
}
body {
    background:url(images/background.jpg) repeat-x;
}

#slideshowContainer {
    width: 632px;
    margin: 100px auto 0 auto;
    position:relative;
}
.slideshow {
    height: 332px;
}
.slideshow img {
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #eee;
}
#nav {
    list-style-type:none;
    z-index:150;
}
#nav li a {
    display:block;
    width:58px;
    height:102px;
    text-indent:-9999px;
    outline:none;
}
#prev a {
    background:url(images/left.png);
    width:58px;
    height:102px;
    position:absolute;
    top:120px;
    left:-70px;
}
#next a {
    background:url(images/right.png);
    width:58px;
    height:102px;
    position:absolute;
    top:120px;
    right:-70px;
}
#next a:hover {
    background:url(images/right_over.png);
}
#prev a:hover {
    background:url(images/left_over.png);
}
</style>

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

مجتبی موسوی

تعیین کردن نوع سند :

در نسخه های قبلی HTML برای مشخص کردن نوع سند برای مرورگر باید از یک سری کدهای مزاحم XHTML استفاده می شد که در نسخه جدید HTML5 این کار خیلی خلاصه شده مثل کد زیر :

<!DOCTYPE html>

ساختن متن های قابل ویرایش :

با استفاده صفت contenteditable در HTML5 می توان محتوایی در پوشش صفحات وب با قابلیت ویرایش ساخت و می توان به کاربران اجازه داد نوشته هایی که در پوشش این المان هستند را ویرایش کنند .

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>untitled</title>
</head>
<body>
    <h2>Editable</h2>
    <ul contenteditable="true">
        <li>Text 1</li>
        <li>Text 2</li>
        <li>Text 3</li>
    </ul>
</body>
</html>

استفاده از HTML5 در Internet Explorer :

در مرورگر Internet Explorer پشتیبانی خوبی از تگ های HTML5 نمی شود و به همین دلیل برای استفاده باید از یک سری تکنیک ها استفاده شود که بهترین روش استفاده از اسکریپت HTML5.js است که باید به صورت زیر در قسمت Head صفحات وب استفاده شود :

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

صفت مورد نیاز برای فیلدها :

برای اجباری کردن فیلد های مورد نظر درفرم های تماس و … در HTML5 می توان از صفت Required به دو روش استفاده کرد :

<input type="text" name="someInput" required>

یا

<input type="text" name="someInput" required="required">

صفت انتخاب اتوماتیک فیلدها :

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

<input type="text" name="someInput" autofocus>

عبارات منظم :

گاهی اوقات ورودی فیلدها و اغلب در فیلدهای ایمیل ، متن ورودی باید از قاعده خاصی پیروی کند که قبل از HTML5 از کدهای جاوا برای این منظور استفاده می شد و در حال حاضر با یک کد خلاصه می شود این کار را به راحتی انجام داد :

<form action="" method="post">
    <label for="username">Create a Username: </label>
    <input type="text"
       name="username"
       id="username"
       placeholder="4 <> 10"
       pattern="[A-Za-z]{4,10}"
       autofocus
       required>
    <button type="submit">Go </button>
</form>

تذکر مهم : با توجه به عدم ارائه تقویم و سررسید های سال ۱۳۹۱ از مراجع رسمی، استفاده و استناد به تقویم فوق با مسئولیت شخص شما خواهد بود و وب سایت بانک تور و گردشگری امکان درج اشتباه در رخدادها و تاریخ ها را رد نمیکند.

s

می توانید فایل فشرده شده این تقویم را یکجا دریافت کنید : | دریافت فایل از سرور ۱|دریافت فایل از سرور ۲ | دریافت فایل از سرور۳ رمز فایل فشرده : www.lastsecond.ir با کلیک بر روی هر ماه می توانید پس زمینه مربوط به آن را دریافت کنید
فروردین	اردیبهشت
خرداد	تیر
مرداد	شهریور
مهر	آبان
آذر	دی
بهمن	اسفند

همچنین سایت هایی که بازدید روزانه بالایی دارند میتونند در باره سایت فوق مطلبی در قالب رپورتاژ آگهی بنویسند و سایت رو به کاربران و بازدیدکنندگان سایت خودشون معرفی کنند (منظور سایت هایی که بازدید روزانه بالای ۱۰،۰۰۰ نفر دارند) و بابت این رپورتاژ آگهی هزینه دریافت نمایند. فقط قبل از ارسال پیشنهاد به نکات زیر دقت نمایید :

۱- تنها با سایتهای معتبر تبادل لینک صورت میگیرد.

۲- پیج رنک شما میبایست از ۳ به بالا باشد و آمار الکسای خوبی نیز داشته باشید.

۳- سایت حتما باید بر روی دامنه باشد و با وبلاگهایی که از دامنه های عمومی استفاده میکنند معذوریم.

۴- مطالب سایت برای ما بسیار حائز اهیمت است.

۵- در قبول و یا در پیشنهاد شما مختار هستیم.

۶- چنانچه پیج رنک سایت شما کمتر از ۳ میباشد اما از بازدید بالایی برخوردار هستید (الکسا زیر ۲۰۰۰۰۰) و این بازدید را بتوانید توسط  به اثبات برسانید تبادل لینک با شما امکان پذیر خواهد بود.

۷- برای سایت های خاص تبادل بنر هم امکان پذیر میباشد.

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

با تشکر

سهم بازار مرورگرها :

حدود یک سال پیش مقاله ای نوشتم در مورد اینکه خیلی از ما متوجه شدیم که توسعه دهندگان PHP برای استفاده از اینترنت به نرم افزار گوگل Chrome سوئیچ کرده اند.
همان طور که می بنید طبق جدول، این روند به مدت یک سال ادامه داشته است. این آماری است که طی ۳۰ روز از توسعه دهندگانی که وارد سایت phpclasses.org شده اند گرفته شده است.

طبق جدول بالا، سهم مرورگر Chrome تقریباً در یک سال دو برابر شده است، در صورتیکه مرورگر Internet Explorer بالای ۵۰ درصد کاهش و مرورگر Firefox هم درصد کمی کاهش داشته اند.
افزایش علاقه به مرورگر Chrome خیلی بیشتر از کاهش علاقه به Firefox و Internet Explorer است. این بدان معنی است که مرورگر Chrome سهم خود را قبال کاهش علاقه دیگر مرورگرها، افزایش داده است.

با توجه به اینکه سهم گوگل در حال رشد است، ممکن است در مورد دلایل ذکر شده برای عنوان این مقاله تعجب کنید. در واقع مرورگر Chrome در حال محبوب شدن برای استفاده از اینترنت می باشد، این بدان معنی نیست که وقتی توسعه دهنده ای در حال کار روی پروژه خود است، تنها از مرورگر Chrome استفاده می کند.
برای من که اینطور نیست. اغلب اوقات زمانیکه من در حال توسعه وب سایتی هستم احساس می کنم به دلایلی که در ادامه ذکر کرده ام نیاز هست که به مرورگر Firefox سوئیچ کنم.

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

۱- نمایش کدهای Html :

زمانیکه در حال کار روی سایتی هستیم که دارای باگ (خطا) باشد که معمولاً دارای کدهای Html نادرست و یا حتی نامعتبر بوده، بنابراین باید کدهای Html را بررسی و مشکل را پیدا کنیم.
مرورگر Firefox دارای یک ویژگی عالی است که به شما اجازه می دهد بخشی از صفحه را انتخاب کرده و کد آن بخش انتخاب شده را نمایش دهد که در زیر توضیح داده می شود، در مرورگر Chrome یک همچین ویژگی ای وجود ندارد.
بازرس عناصر (Inspect Element) بهترین ویژگی ای است که به شما کمک می کند که کد Html زیر اشاره گر موس را پیدا نمائید. (م : این ویژگی توسط افزونه ای به نام Firebug به مرورگر Firefox اضافه شده است). می توانید از لینک زیر اقدام به نصب آن بر روی مرورگر Firefox نمائید :

Firebug

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

۲- معتبرسازی کدهای Html :

یکی دیگر از ویژگی های عالی مرورگر Firefox امکان نمایش تمام خطاهای معتبرسازی کدهای Html ای است که ممکن است وجود داشته باشد، در واقع این ویژگی ای است که توسط افزونه معتبرساز کدهای Html (Html Validation) ارائه می شود. شما می توانید از لینک زیر اقدام به نصب آن بر روی مرورگر Firefox نمائید :

Html Validation

من چندین افزونه از مرورگر Chrome برای این منظور را بررسی کردم اما هیچ کدام به این خوبی نبودند. همچنین بعضی ها فقط از سرویس اعتبارسنجی W3C برای بررسی URL صفحه استفاده می کنند که این خوب نیست، زیرا زمانیکه شما در حال توسعه یک صفحه غیر عمومی (دولتی) هستید سرویس W3C نمی تواند به آن دسترسی داشته باشد، در حالیکه اگر بخواهید دسترسی پیدا کند باید به عنوان کاربر ثبت شده در سایت قرار دهید که این هم غیر ممکن است.
افزونه های دیگر سعی می کنند صفحه لود شده را کپی و به سرویس اعتبارسنج خود تحویل دهند، اما در نهایت هیچ کد Html غیر معتبری را مانند مرورگر Firefox گزارش و نمایش نمی دهند. همچنین این افزونه وابسته به سرویسهای خارجی نیست، این بدان معنی است که اگر شما دسترسی به اینترنت هم نداشته باشید می توانید به راحتی از این اعتبارسنج استفاده نمائید.

۳- غیرفعال کردن JavaScript :

بعضی اوقات شما نیاز دارید که سایت در حال طراحی خود را بدون جاوااسکریپت تست کنید. تنها راه برای این کار در مرورگر Chrome رفتن به قسمت Option بعد در تب سمت چپ روی Under the hood رفته، در سمت راست گزینه Content setting و در قسمت جاوااسکریپت گزینه Do not allow any site to run JavaScript را می زنیم. این یک درگ کردن واقعی است. (م: کنایه از راحتی انجام این عمل است).
در مرورگر Firefox شما می توانید از افزونه ای به نام Web Developer که توسط آقای Chris Pederick نوشته شده است استفاده نمائید. شما می توانید از لینک زیر اقدام به نصب آن بر روی مرورگر Firefox نمائید :

Web Developer

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

۴- خالی کردن کش (حافظه) مرورگر:

بعضی اوقات پیش می آید که باید خیلی سریع کش (حافظه) مرورگر خود را خالی نمائید، بنابراین اطلاعات به روز شده سایت در حال توسعه از سرور تقاضا و دریافت می شود. این محدودیت نیز مشابه محدودیت غیرفعال کردن جاوااسکریپت در مرورگر Chrome همچنان وجود دارد. شما نمی توانید از طریق افزونه ها کاری انجام دهید و باید برای این کار داخل منوی Option شوید. (م: خالی کردن کش (حافظه) در مرورگر Firefoxاز طریق افزونه Web Developer به این صورت است که ابتدا روی گزینه Miscellaneous رفته و از قسمت Clear private data روی Cache کلیک می کنیم، به همین سادگی).

۵- تعویض User Agent مرورگر:

بعضی وقتها در زمان توسعه یک سایت پیش می آید که باید تظاهر کنید که در حال استفاده از یک نوع مرورگر دیگر هستید تا ببینید که کدهای نوشته شده با انواع مرورگرها سازگاری دارند و انتظارات شما را برآورده می نمایند.
برای نمونه، اگر خدمات RSS شما از طریق Feed Burner تأمین می شود، شما نیاز دارید که تمام مرورگرها را به آدرس Feed Burner تغییر مسیر دهید، مگر اینکه نماینده کاربر (User Agent) کنونی بصورت خوکار Feed Burner را چک نماید که فید به روز بوده باشد، بنابراین، این امر در صورتی مفید واقع می شود که مرورگر برای Feed Burner تظاهر نموده که یک مرورگر دیگر است و شما مطمئن خواهید بود که این امر در Feed Burner به درستی کار خواهد کرد.
در مرورگر Firefox شما می توانید از افزونه User agent switcher که توسط Chris Pederick (م: نویسنده افزونه Web Developer) استفاده نمائید. شما می توانید از لینک زیر اقدام به نصب آن بر روی مرورگر Firefox نمائید :

User agent switcher

در مرورگر Chrome نیز یک چنین افزونه ای به نام User agent switcher وجود دارد. اما مشکل اینجاست که به درستی کار نمی کند یا به عبارتی کار می کند اما نه به آن اندازه ای که انتظار دارید.
این افزونه تنها می تواند در برابر جاوااسکریپت شناسایی مرورگر را تغییر دهد. این بدان معنی است که در خواستهای Http ای را که به سرور فرستاده است را دیگر نمی تواند برای شناسایی user agent استفاده کند که شما برای ارسال اطلاعات به آن نیاز دارید.

۶- دکمه ها در نوار وضعیت:

یک ایده خوب در مورد مرورگر Firefox و بعضی از مرورگرهای دیگر، وجود دکمه های سودمند در پائین صفحه ی مرورگر در قسمت نوار وضعیت است. جایی که دکمه افزونه Firebug و دیگر افزونه های سودمند (در مرورگر Firefox) در آنجا ظاهر می شوند. زمانی که می خواهید از آنها استفاده نمائید، خیلی راحت روی دکمه آن کلیک کرده تا Firebug باز شده و کدهای جاوااسکریپت خود را اشکال زدایی نمائید.
در مرورگر Chrome عملاً نوار وضعیت حذف شده است. از نوار وضعیت فقط برای نمایش بعضی از پیغامهای موقت استفاده می شود. اگر بخواهید ابزارهای توسعه دهنده را برای اشکال زدایی کدهای جاواسکریپ یا چک کردن کدهای HTML صفحه استفاده کنید هیچ راهی جز رفتن به منوها و یا بخاطر سپردن کلیدها و زدن کلیدهای ترکیبی برای پیداکردن آنها ندارید.

۷- ذخیره صفحات ارسال شده در تاریخچه مرورگر:

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

۸- قفل کردن متداول افزونه فلش:

من سایتهای فلش را توسعه نمی دهم. با این حال، گاهی اوقات برای دسترسی به سایتهای شخصی که گوگل در آنها به ارائه اطلاعات به صورت فلش می دهد نیاز دارم. این مسئله شامل Analytics Google و ابزارهای Google web master هم می شود. متأسفانه ، افزونه ای که همراه مرورگر Chrome عرضه شده به صورت مکرر قفل می نماید. درصورتی که این اتفاق هرگز در زمان استفاده از مرورگر Firefox رخ نمی دهد.

۹- تولید کدهای Html ناقص در حال ویرایش:

امروزه، اکثر سایتهایی که محتوای Html را توسط کاربر انتشار می دهند، از یک ویرایشگر قدرتمند WYSIWYG که مخفف What You See Is What You Get (در طراحی وب یعنی اینکه اون چیزی رو که طراحی میکنید همان چیزی است که نهایتا کاربر می بیند) استفاده می کنند که این ویژگی توسط ویرایش کدهای HTML قابل استفاده می باشد.
مشکل اینجاست که ویرایشگرهای Html در مرورگر Chrome هنوز دارای اشکال می باشند . اغلب اگر شما کدهای تولید شده توسط ویرایشگرها را کپی و در یک ویرایشگر دیگر بچسبانید (Past) نتیجه کدهای ناقص خواهند بود.

من کد متاتگهایی را دیده ام که در وسط متن ظاهر شده اند زمانی که بخشی از کدها را از جایی از همان سند کپی و در جایی دیگر چسبانده ام (Past) . من حتی اغلب اشکالهایی از Css دیده ام، به این صورت که شیوه ای به نام APPL-Style-span زمانی که کد Html را می چسبانیم (Past) ظاهر می شود. در صورتی که زمانی که در حال ویرایش کدهای Html بودم یک چنین کدی وجود نداشت.

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

۱۰- هیچ بازخوردی برای گزارش مشکلات:

من سعی کردن تعدادی از مشکلاتی که در بالا ذکر شد را از طریق سیستم گزارش داخلی مرورگر Chrome گزارش کنم. برای این کار شما می توانید به منوی Tools رفته و بعد گزینه Repost an issue را کلیک نمائید، این گزینه یک صفحه گزارش مشکلات خیلی زیبا را نمایش می دهد که می توانید یک تصویر از صفحه جاری در حال مرور را نیز الحاق نمائید.
*** مشکل اینجاست که من هرگز هیچ بازخوردی از مشکلات گزارش شده را دریافت نکردم. ***

نویسنده : Manuel Lemos
مترجم : سید داوود فامرینی
[ مرجع مقاله ]