طراحی یکسان در مرورگرهای مختلف با CSS Reset ها

حتما برای شما هم پیش آمده که وب سایتی را با HTML و CSS طراحی کرده‌اید ولی بعد از تست های مخلف متوجه تفاوت‌هایی بین نمایش آن در بین مرورگرهای مختلف شده‌اید.کار CSS Reset ها دقیقا همین است. یک CSS Reset چیزی جز چند خط کد CSS ساده نیست که کارش این است که استایل های پیش‌فرضی که هر مرورگر به المان‌های HTML می‌دهد را بصورت کامل غیرفعال و خنثی کند تا در پایان طراحی، طرح ما در مرورگرهای مختلف یک شکل تقریبا یکسان نمایش داده شود.در ویدئوی زیر بصورت کامل کار CSS Reset ها را یاد خواهید گرفت :

dl-btnدانلود فیلم آموزشی معرفی و کار با CSS Reset ها با کیفیت بالا (با حجم 15 مگ)dl-btn
dl-btnدانلود فایل reset.cssdl-btn

آموزش متنی

برای کار با CSS Reset ها فقط کافی است کدهای CSS Reset  را از لینک بالا دانلود کنید و آنرا با دستور import@ در اول فایل CSS اصلی خودتان لود کنید :

@import "reset.css";

CSS Reset خودتان را همچنین میتوانید در اول فایل HTML خود با دستور link لود کنید ولی در دنیای طراحان وب مرسوم است که CSS Reset خود را در فایلی جداگانه با اسم reset.css ذخیره میکنند و بعد آن فایل را در ابتدای فایل استایل اصلی خودشان با دستور بالا وارد میکنند.

توجه کنید که شما میتوانید CSS Reset را با توجه به نیاز و پروژه خودتان دست‌کاری کنید و قسمت‌هایی از آن که کار شما را خراب میکنند حذف و یا قسمت‌های جدید که کار شما را توسعه می‌دهند به آن اضافه کنید.

آماده‌سازی مقدمات برای شروع طراحی وب

حتما در ویدئوهای آموزشی دیده‌اید که ما از یکسری تنظیمات خاص برای محیط توسعه خودمان استفاده میکنیم. این تنظیمات میتواند برای شما متفاوت باشد.ولی شاید شما دوست داشته باشید که بین شما و محیط توسعه‌ای که در آموزش‌ها هست شباهتی وجود داشته باشد.در این ویدئو آموزشی تمام تنظیماتی که برای آماده سازی مقدمات برای طراحی وب نیاز داریم را به شما معرفی میکنیم و همینطور با چند کلید میانبر اصلی IDE که سرعت کار مارا چندین برابر می‌کند آشنا می‌شویم :

 

dl-btnدانلود فیلم آموزشی + تنظیمات محیط توسعه + لینک دانلود نرم افزارها با حجم 30 مگdl-btn

معرفی سایت‌های رایگان دانلود آیکون

سلام به همه‌ی کاربران عزیز زنبیل. قطعا واسه شما هم پیش اومده که در حال طراحی یک اپلیکیشن یا یک وب‌سایت بودید و به آیکون‌هایی برای قسمت منو یا… نیاز پیدا کردید. افراد مختلف با توجه به علافه‌ی خودشون روش‌های مختلفی رو استفاده میکنند تا به آیکون مد نظرشون دست پیدا کنند. توی این ویدئوی آموزشی به شما 4 سایت فوق‌العاده رو معرفی میکنم که با کمک آن‌ها می‌تونید به دنیایی از ایکون‌های رایگان در انواع فرمت‌ها دسترسی پیدا کنید :

dl-btnدانلود این آموزش با کیفیت بالا و کاملا واضح (با حجم 18 مگ)dl-btn

آموزش متنی

برای دانلود آیکون‌هایی با هر موضوعی که مد نظرتان هست کافی‌ست به یکی از 4 سایت زیر مراجعه کنید و در قسمت جستجوی هر سایت نام موضوعی که در آن حیطه به دنبال ایکون می‌گردید را وارد کنید و سپس از لیستی که برای شما نمایش داده می‌شود ایکون مد نظرتان را انتخاب و دانلود کنید :

www.flaticon.com
www.iconfinder.com
www.iconmonstr.com
www.mricons.com

نکته :‌ ممکن است در برخی مواقع، برخی از این 4 سایت با IP ایران مشکل داشته باشند و باز نشوند.به هر حال سایت اول (www.flaticon.com) در اکثر مواقع قابل دسترسی است و می‌تواند پاسخگویی بسیاری از نیازهای شما باشد.

برای درک بهتر آموزش و یادگیری جزئیات بیشتر پیشنهاد میکنم فیلم آموزشی را مشاهده کنید.

بهترین مرورگر اینترنتی برای برنامه نویسی و طراحی وب کدام است؟

در این آموزش با بهترین مرورگرهای حاظ حاظر اشنا خواهیم شد و یاد میگیریم که یک مرورگر خوب برای طراحی و برنامه نویسی وب چه ویژگی‌هایی باید داشته باشد.

بهترین مرورگر برای برنامه نویسی و طراحی وب

بهترین مرورگر برای برنامه نویسی و طراحی وب کدام است؟

این سوالی است که برای خیلی از برنامه‌نویس‌ها و طراح‌های تازه‌کار پیش می‌آید.

وقتی چندین سال پیش برای اولین بار وارد محیط وب شدم برای مدتی در انتخاب مرورگر خیلی شک داشتم.

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

همیشه یکی از بزرگ‌ترین سوالات و مشکلاتی که مبتدیان عرصه‌ی طراحی و برنامه نویسی وب آن روبرو هستند این است:

که بهترین مرورگر اینترنتی برای طراحی و برنامه‌نویسی وب کدام است؟

در این آموزش به این موضوع می‌پردازیم که بهترین مرورگر برای برنامه نویسی و طراحی وب کدام است ؟

دانلود ویدئوی آموزشی با حجم 21 مگ

بهترین مرورگر برای برنامه نویسی و طراحی وب

در حال حاظر در دنیای وب 5 مرورگر زیر از بقیه شهرت بیشتری دارند و بیشتر از بقیه استفاده می‌شوند:

  • گوگل کروم – Google Chrome
  • موزیلا فایرفاکس – Mozilla Firefox
  • سافاری – Safari
  • اپرا – Opera
  • اینترنت اکسپلورر – Internet explorer

می‌توان گفت ترتیبی که در بالا ارائه شده است ترتیب محبوبیت مرورگرها هست.

از نسخه‌های بروز مرورگرها استفاده کنید

از هر مرورگر مدرنی که استفاده می‌کنید سعی کنید همواره از آخرین نسخه‌های آن بهره ببرید.

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

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

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

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

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

علاوه بر این خیلی از امکانات طراحی که برای مثال با HTML 5 و CSS 3 انجام میشود در مرورگرهای خیلی قدیمی به شکل بسیار نازیبایی نمایش داده می‌شود و کلا کار شما را دچار مشکل میکند.

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

بهترین مرورگر برای برنامه نویسی
بهترین مرورگر برای برنامه نویسی

مرورگر اینترنت اکسپلورر را فراموش کنید

پیشنهادی که برای شما دارم این است که هرگز و به هیچ وجه از مرورگر اینترنت اکسپلورر (IE) استفاده نکنید.

به این دلیل که این مرورگر بسیار بد، غیرحرفه‌ای و با هزاران مشکل دیگر طراحی و ساخته شده و کلا هر کدی که در مرورگرهای فایرفاکس و کروم نوشته شود به صورت کلی در اینترنت اکسپلورر به شکلی بسیار متفاوت و خراب دیده می‌شود.

البته در نسخه‌های جدید آن شرکت سازنده خیلی سعی داشته که IE را به یک مرورگر مدرن برای رقابت با کروم و فایرفاکس تبدیل کند.

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

اگر می‌خواهید به یک آرامش ذهنی و کاری برسید به‌طور کل دور این مرورگر را خط بکشید.

پیشفرض‌های خاص هر مرورگر

هر مرورگری به‌صورت پیش‌فرض برای خودش یک سری تنظیمات از قبل تعیین شده دارد (برای مثال padding ها و margin هایی خودکار اضافه میکند).

به همین دلیل خیلی سخت است که شما بتوانید سایتی را طراحی کنید که در 2 مرورگر به‌صورت کاملا یکسان نمایش داده شود.

ولی میشود این تنظیمان پیش‌فرض مرورگرها را با کدهای CSS مدیریت کرد که در مطالب بعدی حتما درباره‌ی آن صحبت خواهیم کرد.

مرورگر پیشنهادی من

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

من به شما ترکیب زیر را که خودم استفاده میکنم و در دنیا هم مرسوم است پیشنهاد میکنم.

این ترکیب به این صورت است که ما 2 مرورگر کروم و فایرفاکس را در کنار هم استفاده می‌کنیم :

مرورگر کروم : به دلیل سرعت بالا و همینطور افزونه‌های فوق‌العاده برای : وب‌گردی، سرچ‌های اینترنتی، یافتن مطالب سایت‌ها، چک کردن ایمیل‌ها و…
مروگر فایرفاکس : به دلیل امکاناتی که برای طراحان و برنامه‌نویسان دارد برای : تست‌کدها، دیباگ کردن و …

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

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

ولی به طور کلی ترکیب این دو مرورگر میتواند برای کارهای شما بسیار مناسب و حرفه‌ای باشد.