مخصوص اعضای ویژه 
قیمت این دوره: رایگانــ
- مدرس دوره : فرزاد معصومی ( رزومه )
- تعداد ویدیوها : 30 ویدیو
- مدت زمان دوره : 6:39:00
- سطح دوره : متوسط
- وضعیت دوره : به اتمام رسیده
- تاریخ آخرین بروزرسانی : 1400/02/30
آموزش ریسپانسیو سازی صفحات وب
سلام به دوره طراحی سایت ریسپانسیو در تاپلرن خوش اومدین
سایت واکنش گرا یا سایت ریسپانسیو (responsive) سایتی است که با ابعاد و رزولوشن دستگاههای مختلف سازگاری دارد و
کاربران بدون توجه به اینکه صفحه نمایش دستگاهشان کوچک باشد (مثل اکثر گوشی های هوشمند موبایل) یا نمایشگری متوسط(مثل لپ تاپ و
تبلت) و یا نمایشگرهای بزرگ (کامپیوترهای رومیزی و ال سی دی های بزرگ)داشته باشند،
میتوانند به راحتی سایت را بررسی کنند و دیگر نیازی نیست اندازه صفحه را تغییر دهند که سایت به صورت کامل دیده شود.
امروزه کاربران از نمایشگرهای مختلف در ابعاد بزرگ و کوچک برای دستیابی به صفحات اینترنت استفاده میکنند. بنابراین سایتی میتواند در فضای وب موفق باشد که بتواند به همه کاربران مراجعه کننده به سایت خدمات مناسب ارائه دهد و نمایش سایت به صورت کامل باشد .
حدود 50 درصد از کاربران از موبایل و تبلت برای مشاهده سایت ها استفاده میکنند و در صورتی که قالب سایت شما نمایش درستی در موبایل و تبلت نداشته باشد کاربران بسیاری را از دست خواهید داد. زیرا این دسته از کاربران پس از ورود به سایت شما در صورتی که نتوانند مطالب سایت شما را به راحتی مطالعه نمایند ممکن است سایت شما را بلافاصله ترک کنند و وارد سایت دیگری شوند که به درستی در دستگاه آنان نمایش داده
شود. با توجه به مورد مطرح شده وجود سایت ریسپانسیو(واکنش گرا) برای سایت ها امری لازم و ضروری میباشد.
مزایای سایت های ریسپانسیو:
-سازگاری با همه سایزهای نمایشگرهای مختلف مانند موبایل، تبلت و لپ تاپ و . . .
-نمایش مناسب سایت در طیف وسیعی از مرورگر های جدید و قدیمی
-انعطاف پذیری بالا و کارآمد
-رتبه بهتر و بالاتر در گوگل
-افزایش قدرت سئو سایت (به دلیل پوشش همه کاربران)
-افزایش بازدیدکنندگان سایت
-محبوبیت بیشتر در بین موتور های جستجو
پس بیاین یک بار برای همیشه ریسپانسیو کردن و یا همون واکنش گرایی صفحات وب رو یاد بگیریم و روی همه طراحی های خودمون پیاده سازیش کنیم
با من همراه باشید.
فهرستـــ ویدیوها
مدت زمان دوره 6:39:00با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.
2
اضافه کردن viewport به پرونده html
00:05:30
viewport قسمتی از صفحه وب ما است که کاربر در حال تماشای آن میباشد ما در این ویدیو با آن آشنا خواهیم شد و نحوه وارد کردن آن به فایل html خود را یاد میگیریم ممنون از همراهی شما.
3
media query چیست و چگونه باید استفاده کنیم
00:09:00
یکی از ویژگی های media query به ما اجازه میدهد که با توجه به عرض صفحه نمایش بتوانیم شرط گذاری کنیم و تغییرات در استایل وب سایت به وجود آوریم در این ویدیو راجب media query و روش استفاده از آن را با یک مثال توضیح میدهیم
4
قالب نخست - ریسپانسیو سازی nav - بخش اول
00:21:30
در این ویدیو شروع به ریسپانسیو میکنیم قالب اول را دانلود کنید تا با هم بخش nav را ریسپانسیو کنیم قسمت بعدی به صورت کامل این بخش را تکمیل میکنیم.
5
قالب نخست - ریسپانسیو سازی nav - بخش دوم
00:26:00
در این ویدیو قسمت nav خود را به صورت کامل پیاده سازی میکنیم ما با استفاده از jquery و کمک گرفتن از این کتابخانه قسمت nav را به صورت انیمیشن پیاده خواهیم کرد.
6
قالب نخست - ریسپانسیو سازی کامل هدر
00:11:30
در این قسمت میایم و بخش هدر خودمون رو کامل ریسپانسیو میکنیم و بخش هدر که nav هم بخشی از اون بود رو به پایان میرسونیم
7
قالب نخست - ریسپانسیو سازی بخش our-story
00:20:00
در این ویدیو میریم سراغ دومین سکشن از قالب خودمون سکشن our-story رو در این ویدیو به صورت کامل ریسپانسیو میکنیم پس بیاین با هم شروع کنیم.
8
قالب نخست - ریسپانسیو سازی بخش sweet
00:18:00
ما در این قسمت سکشن sweet رو ریسپانسیو میکنیم البته قبل از اون ایرادی در قالب رو برطرف میکنیم که قالب کاملا بدون مشکل باشه, پس بیاین شروع کنیم.
9
قالب نخست - ریسپانسیو سازی بخش menu
00:10:00
توی این ویدیو میریم و بخش بعدی رو ریسپانسیو میکنیم , یعنی بخش menu پس بیاین و شروع کنیم
10
قالب نخست - ریسپانسیو سازی بخش hot
00:08:00
در این ویدیو بخش بعدی که hot هست رو ریسپانسیو میکنیم و کم کم داریم به تموم کردن کار ریسپانسیو این تم میرسیم
11
قالب نخست - ریسپانسیو سازی بخش delight
00:19:30
خب بریم سراغ یکی از آخرین بخش های این قالب یعنی بخش delight , چیز سختی نیست پس بیاین تمومش کنیم
12
قالب نخست - ریسپانسیو سازی بخش footer
00:14:30
خب در این ویدیو ما قالب اول خودمون رو با ریسپانسیو سازی بخش فوتر به پایان میرسونیم بیاین با هم تمومش کنیم
14
قالب دوم - ریسپانسیو سازی nav - بخش اول
00:08:00
خب از این قسمت شروع به ریسپانسیو کردن قالب دوم میپردازیم بیشترین زمان رو همین nav خواهد برد البته بستگی داره بخوایم چیکار کنیم روی اون اما در این قالب مدت زمان بیشتری رو روی nav میزاریم تا زیباتر از قالب قبل ما بشه پس با من همراه باشید.
15
قالب دوم - ریسپانسیو سازی nav - بخش دوم
00:08:00
خب ما در این ویدیو قسمت nav خودمون رو بیشتر جلو میبریم و در ویدیو بعد این قسمت رو تموم میکنیم
16
قالب دوم - ریسپانسیو سازی nav - بخش سوم
00:13:00
خب خب خب در این قسمت بالاخره nav رو تموم میکنیم و با خیال راحت میریم سراغ قسمت ها بعدی پس بیاین تمومش کنیم
17
قالب دوم - ریسپانسیو سازی big section
00:11:30
در این ویدیو میریم و big section رو ریسپانسیو میکنیم
18
قالب دوم - ریسپانسیو سازی newsletter و toplearn
00:15:39
خب دوستان ما در این قسمت میایم و دو بخش از قالب رو به هم ریسپانسیو میکنیم
19
قالب دوم - ریسپانسیو سازی team و teams
00:25:30
خب ما در این ویدیو 2 بخش رو به صورت کامل ریسپانسیو میکنیم پس با من همراه باشید
20
قالب دوم - ریسپانسیو سازی footer - پایان فصل اول
00:16:00
خب توی این ویدیو footer خودمون رو ریسپانسیو میکنیم و فصل اول این دوره اینجا به پایان میرسه
نظرات کاربران در رابطه با این دوره