دوره مجازی طراحی وب (جلسه 16): آشنایی با جاوااسکریپت، رفع مشکلات و ناسازگاری مرورگرها



visibility  
mode_comment   ۳۳

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

عموم مطالب مطرح شده در این جلسه به شرح زیر است :

  • فصل پنجم : آموزش خطایابی و نحوه انجام تغیرات و رفع مشکلات موجود در صفحات وب
  • معرفی 3 پیشنیاز لازم برای انجام تغیرات و رفع مشکلات موجود در صفحات وب
  • انجام تغیرات و رفع مشکلات در ظاهر وبسایت و صفحات وب
  • انجام چندین تغیر در ظاهر یک وبسایت معروف ایرانی (ورزش 3)
  • بررسی سورس کد صفحه وب و اعتبار سنجی آن
  • بررسی سورس کد وبسایت ورزش 3 و نمایش و توضیح خطاهای موجود در اعتبار سنجی آن
  • ذکر نکاتی در مورد نحوه تمرین شما برای تسلط بیشتر
  • ذکر نکاتی مختصر در مورد کپی کردن ظاهر قالب های دیگر
  • فصل ششم: ناسازگاری مرورگرها! چالش ها و نحوه کدنویسی استاندارد و صحیح
  • تعریف ناسازگاری و منابع آن
  • معرفی دلایل ایجاد ناسازگاری
  • معرفی چندین روش و نکته مهم برای رهایی از ناسازگاری ها
  • معرفی CSS Reset و دلیل استفاده از آن
  • فصل هفتم: آشنایی با جاوااسکریپت و کاربرد آن در صفحات وب
  • معرفی مفهوم DHTML
  • معرفی اولیه زبان جاوااسکریپت
  • توانایی ها مزیت های زبان جاوااسکریت
  • معرفی کاربردهای زبان جاوااسکریپت
  • مدل DOM و نحوه انجام تغیرات در صفحات وب توسط جاوااسکریپت
  • اشیاء پیش ساخته در زبان جاوااسکریپت برای دریافت اطلاعات جالب صفحه وب و مرورگر
info توجه

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

ثبت نام در آموزش طراحی سایت

comment دیدگاه کاربران
mmerlin replyپاسخ

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

لقمان آوند

ممنون
تصحیح شد.
این واو کلا حرف فضولیه. چندین بار تا حالا خودشو انداخته وسط 😉

Mehrdad Moradi Avarzamani replyپاسخ

جناب آوند من چرا نمیتونم به دیدگاه ها رای بدم؟
میگه ظاهرا شما قبلا رای دادید

لقمان آوند

بررسی می کنیم این مورد رو …

sadaf replyپاسخ

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

لقمان آوند

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

asipool lika replyپاسخ

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

لقمان آوند

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

دانشجو replyپاسخ

سلام استاد آوند عزیز خدا قوت

یه سوال خارج از گود الان که اینجا بحث سایت ورزش 3 شد میدونید سایت ورزش 3 از چه سایت مرجعی برای نمایش نتایج زنده و جداول لیگها استفاده میکنه؟ یه اسکریپت داشتیم از سایت http://www.livescores.com/ اطلاعات رو با curl میگرفت الان این سایت فیلتر شده اسکریپت کار نمیکنه البته نسخه جدید اسکریپت رو نمیدونم چیکار کردن کار میکنه ولی قبلی که ما داریم کار نمیکنه به نظرتون اینها از چه سایتی اطلاعات رو میگیرن؟
تشکر

لقمان آوند

سلام
متاسفانه من اطلاعی از منابع اطلاعاتی سایت ورزش 3 ندارم. این موارد رو معمولا سایتای بزرگ مخفی نگه میدارن .

دانشجو replyپاسخ

سلام مجدد استاد عزیز

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

لقمان آوند

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

دانشجو

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

لقمان آوند

ایشالله …

جعفر پیشدادی replyپاسخ

با سلام…من قالبی طراحی کردم وسپس ان را با سایت اعتبار سنجی چک نمودم خطای
The error was: utf8 “\xD8” does not map to Unicode
می دهد .در عنوانین مقالات واخبار برای اینکه عنوان از 50کاراکتر بیشتر نشود از تابع trim استفاده نمودم .جستجویی که کردم برای عناوین فارسی سایت اعتبار سنجی این خطا را می دهد برای رفع ان چه کنم …باتشکر

لقمان آوند

آدرس سایت رو بدید …

Mohsen replyپاسخ

سلام جناب آوند ، من با آموزشهای شما و چیزایی که بلد بودم یه قالب آماده کردم
منتها چند تا مشکل دارم
براتون ایمیل کردم قالب رو ، میشه بررسی بکنید ؟
سوالمو تو ایمیل پرسیدم
😎 🙂

لقمان آوند

چشم ایشالله …

Mohsen

آقای اوند اگه امکانش هست سوالاتم تو ایمیل رو یه مقدار زودتر جواب بدید 🙂 خیلی فکرمو مشغول کرده 😯
و قالب رو بعدا بررسی بفرمایید ممنون از لطفتون

لقمان آوند

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

علیرضا replyپاسخ

سلام،
در برخی از موارد وقتی میخوایم کدها رو برای ولید بودن تست کنیم
وبسایت validator.w3.org ارور هایی رو نمایش میده که کلا تو سورس که ما داریم وجود نداره
همچنین در گوگل جستجو کردم و به وبسایت هایی همانند stackoverflow.com مراجعه کردم اما نتیجه قانع کننده ای رو نگرفتم
لطفه راهنمایی کنید چجوری این نوع ارور ها رو برطرف کنیم
ممنون

وحید صالحی

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

علیرضا

سلام،
متاسفانه هر سوالی در انجمن مطرح میکنم پاسخ داده نمیشه 🙂

وحید صالحی

دوستان اگر اطلاع داشته باشن حتما پاسخ خواهند داد

Mohammad Reza replyپاسخ

سلام یه مشکلی هست که نتونستم رفع کنم تو یکی ازوبسایت های دوستان.
این وبسایت http://khabarver.ir/ رو اگه برید میبینید که

برای اینکه عرض قالب رو 100% کنم تو قسمت inspect مرورگر میشه 100%کرد ولی وقتی تواستایل کد زیر رو سیو کردم ولی باز کد قبلی لودمیشه کش مرورگر پاک کردم باز تغییری ندیدم بیزحمت مشکلش رو اینجا بگید چون تو انجمن کسی جواب نداده

لقمان آوند

عرضش که الان 100% هست و مشکلی نمی بینم.

itone replyپاسخ

سلام استاد اوند استاد میشه کاربرد min-width:; و max -width رو
بهم بگید متاسفانه هنوز کاربردشونو نفهمیدم ممنون از لطفتون

لقمان آوند

عرض تگ ها و المان هایی که به وضوح مشخص نکردید ممکنه متغیر باشه. با این مشخصه ها شما حداقل عرض و حداکثر عرض رو مشخص میکنید.

Moh Tav replyپاسخ

سلام.
در این جلسه تمرینی دادید که کدهای یک سایت را کپی کنیم و با سایت validator.w3.org مشکلات را حل کنیم.
یه سوال.
استاد آوند فرمودند که این کد ها را روی هاستی کپی کنیم. یعنی یه فایل html و فایل css را روی هاست کپی کنیم جواب میده؟ چطوری باید اینکارو بکنیم؟ باید روی یک دامنه خاص اینکارو کرد؟
میشه راهنمایی کنید تا بتونیم از سایتی که معرفی کردند، ایرادات سایت ها را برای تمرین برطرف کنیم.

لقمان آوند

سلام
وبسایت هایی هست که هاست رایگان میدن. هاست رایگان رو سرچ کنید . ثبت نام کنید و فایل هاتون رو آپلود کنید

spring spring replyپاسخ

سلام ، ممنون از زحمات شما ، سوال داشتم در رابطه با ناسازگاری مرورگرها ، می خواستم بپرسم در کل عمده عوامل ناسازگاری مرورگر ها این موارد هست ؟ 1-موتور های رندرینگ 2-پیش فرض مرورگر ها 3-در صورتی که از css های مخصوص مرورگر ها استفاده کنید 4-عدم معتبر بودن کد های cssو html و 5-استفاده از زبان جاوا اسکریپت 6- استفاده از ifram ها ، آیا موارد 2 به بعد زیر مجموعه موتور های رندرینگ نیست ؟ ******یعنی پیش فرض متفاوت مرورگر ها (همچنین موارد دیگر)به خاطر تفاوت در موتور های رندرینگ نیست ؟ ******

مدیه دارم رو این فکر می کنم ، چندین بار فیلما رو از اول دیدم ، اما متوجه این موضوع نمیشم!

hossein replyپاسخ

سلام بر استاد آوند عزیز:
در ابتدا می خواهم یک تقدیر و تشکر کنم ازتون بابت این دوره من تا این جلسه(جلسه 16) پیش اومدم و خیلی لذت بردم.
استاد بنده به عنوان تمرین مشکلات سایت سون لرن رو رو داخل سایت https://validator.w3.org بررسی کردم و برام خیلی جالب بود که سایتی با این حجم زیاد مطالب فقط چند خطا و ارور جزئی داشت:
1) یکی این بود که در تگ های img از مشخصه alt استفاده نشده در چند مورد.
2) در دو سه مورد از تگ style در body استفاده شده که باید داخل head باشه.
3) مشخصه type برای تگ های script لازم نیست بکار برده شوند که شما استفاده کرده اید.
4) مشخصه role در تگ های nav لازم نیست بکار برده شوند که شما استفاده کرده اید.
5) در تگ section باید از تگ های h2 تا h6 استفاده شود در حالیکه یک تگ h1 استفاده شده است.
واقعا بابت این دوره ازتون صمیمانه سپاسگزارم.

لقمان آوند

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

ارسال نظرات

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