جواد عوض زاده

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

به طور کل در تقریبا همه زبان‌های برنامه نویسی و حتی طراحی وب یک پروژه رو میشه به دو بخش frontend و backend تقسیم کرد. فرانت‌اند یعنی بخش جلویی و بک‌اند یعنی بخش پس زمینه کار. این اتفاق برای یک سایت ساده شخصی یا یک سایت خبری یا مثلا آشپزی هم میافته. شما در واقع دو بخش دارید.

در این آموزش ما قصد داریم که روش طراحی بخش جلویی کار یا frontend رو بهتون آموزش بدیم. جدا از اینکه در بخش پشتی کار چه اتفاقی داره میافته و از چه تکنولوژی استفاده میشه، در نهایت بخش جلویی کار در یک وب سایت ساده تا پیچیده‌ترین وب سایت‌ها از html و css‌ تشکیل شده است.

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

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

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

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

برای دانلود کامل و رایگان این مجموعه به ادامه مطلب بروید.ادامه دارد »»»

با توجه به درخواست تعداد زیادی از دوستان و همینطور باجناقم(!)، مبنی بر آموزش تجزیه و تحلیل یک صفحه وب و ساختار اون، این آموزش رو که توی اون با استفاده از ابزار Inspect Element موجود در مرورگر دوست داشتنی اپرا (opera) نحوه ی انجام این کار رو آماده کردم.

این ابزار که از اون میشه با نام Opera Dragonfly هم یاد کرد، ابزاری قدرتمند برای بررسی یک صفحه وب است. در واقع Inspect Element یکی از ویژگی های Opera Dragonfly است. به مطلبی که برای توضیح ویژگی پرواز اژدهای اپرا در سایت رسمی اومده نگاهی بندازید.

Opera Dragonfly is a fully featured development and debugging tool integrated into the Opera browser. It requires no additional installation or setup and works across most of Opera’s browsers – on desktop, mobile phones, tablets and even web-enabled TVs and set-top boxes.

As the power of the Open Web platform increases, high quality tools such as Opera Dragonfly ease the development process. The various tools explained in this guide cover the full debugging workflow, from inspecting network access and downloaded resources, to debugging JavaScript issues and how CSS rules apply to the DOM. Support is included for debugging the very latest technologies, from SVG to HTML5 APIs. For lovers of the command line, a Console HUD can be brought up at any time in the debugging process to interact with the document. There has never been a better excuse to banish JavaScript alert debugging to the past.

برای استفاده این قابلیت چند روش وجود دارد که به تناسب شرایط از یکی از اون ها می تونید استفاده کنید.

• کلیک راست روی صفحه و انتخاب Inspect Element از منوی بازشده
• از طریق مسیر Page > Developer Tools > Opera Dragonfly
• استفاده از کلیدهای میانبر و ترکیبی  Ctrl + Shift + I

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

• قابلیت دوست داشتنی speeddial که فوق العادس و کروم یه کپی ازش زده
• نمایش تمام صفحه صفحات وب بدون هیچ کادر اضافه تنها با فشردن F11
• ویژگی موس جادویی که با نگه داشتن کلیک راست موس حتما چک کنیدش
• Ctrl+Z اش که عالیه، اگه تبی رو اشتباهی بستین با Ctrl+Z دوباره بازش کنید!
• Ctrl+Enter هم که کارش پر کردن فرم های ذخیره شدس که اونم عالیه
• و …

جدا از اینها از سیاست اپرا خوشم میاد، هر چند شاید اگه من بودم این کار رو نمی کردم ولی به هر حال روش کارشون رو می پسندم. با اینکه درصد کمی از کاربران مرورگرها در دنیا رو در اختیار دارن ولی هنوز هم مثل همیشه پیشتاز بوده و هستند. امیدوارم شما هم از اپرا خوشتون بیاد.

هفته پیش واسه درس اصول و شیوه ارئه مطالب باید یه موضوعی رو ارائه می‌دادم، اولش می خواستم  درباره‌ی مروگرها ارائه بدم، ولی نظرم عوض شد و اچ تی ام ال 5 رو انتخاب کردم. پاورپوینت HTML5ای که آماده کردم رو می تونی در انتهای صفحه دانلود کنید. سعی کرده بودم مطالب عمومی باشه و فقط یه مرور رو ویژگی‌های این نسخه جدید داشته باشم. یک صفحه از خلاصه ارائه رو می تونید در فایل فشرده پاورپوینت ببینید!

در HTML5 بحث اصلی ایجاد استانداردهایی برای وب چندرسانه‌ای است. به عبارت دیگر استانداردی است که می تواند پاسخگوی تمام نیازهای اینترنتی کاربران باشد.

کاربران اینترنت می‌توانند از مرورگر اینترنتی که با استاندارد HTML5 سازگار است استفاده کنند و از طریق آن فایل های صوتی، تصاویر ویدئویی و فایل‌های گرافیکی را با کیفیت و سرعت بالا مشاهده کند.

در صورت تمایل می توانید فایل اصلی پاورپوینت را در انتهای صفحه دانلود کنید. در صورت بروز مشکل در نمایش متن که به دلیل عدم نصب فونت های استفاده شده از اینجا فونت ها را دانلود کرده و در پوشه فونت موجود در کنترل پنل ویندوز کپی کنید(در این ارائه از فونت ادوب اربیک استفاده شده است).

اهداف این ارئه به شرح زیر است.

• معرفی HTML
• معرفی 3CSS و کاربرد آن و بررسی سایت دانشکاه آزاد نور
• بررسی فلش در طراحی وب‌سایت و مشکلات آن
• سیاست شرکت های بزرگ نرم افزاری در برابر HTML5
• معرفی جدیدترین تکنولوژی‌های مدرن طراحی وب به کمک HTML5