۷ سال

سلام

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

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

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

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

اینجا قصد داریم تا به طور مختصر چیزهایی درباره‌ی این معجزه جدید وب یاد بگیریم.

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

چه چیزهایی را میتوان از Html5 انتظار داشت؟

فضای آفلاین: Google Gears را میشناسید؟ HTML5  قرار است چیزی شبیه آن در خود داشته باشد. برای مثال میتوان باHTML5 ایمیلهای خود را به صورت آفلاین خواند. مثال دیگر این است که سایتها میتوانند برخی از اطلاعات خود را بر روی سیستم شما ذخیره کنند و این یعنی چند برابر سرعتی که الان داریم درست مثل یک “ابًر کوکی”.

اشکال غیر منظم: با امکانات کنونی تنها شکلی که میتوان برای قسمتهای صفحه داشت مستطیل است در حالیکه در HTML5 دیگر از این محدودیت ها خبری نیست. میتوانید از هر گوشه صفحه بهترین استفاده را ببرید. حتی میتوانید تنها با کد نویسی تصاویر, نمودارها و هرچیزی را که فکر کنید در صفحه خود داشته باشید. دیگر مجبور به استفاده از فلش یا افزونه های دیگر نیستید.

پخش صوت و ویدیو به صورت مستقل: اگر مطلب قبلی من در مورد فایرفاکس و پخش ویدیو بدون هیچ افزونه راخوانده باشید با این قابلیت آشنا هستید. این یعنی اینکه دیگر لازم به استفاده از Flash برای پخش ویدیو و صدا نیستید. به راحتی میتوان از یک خط کد برای اینکار استفاده کرد و در عین حال تمام قابلیتهایی نظیر عقب و جلو کردن, ذخیره ویدیو و … را در اختیار داشته باشید.

مکان یابی: HTML5 میتواند مکان شما را تشخیص دهد و نتایج جستجو را بر حسب مکان شما سفارشی کند و یا اینکه ورودی های توییتر شما را برچسب گذاری کند.

فرم‌های هوشمندتر: جعبه های متن, checkbox ها, منوهای کشویی و تمام عناصر یک فرم هوشمندانه تر عمل خواهند کرد و به شما امکانات بیشتری برای کنترل اطلاعات خواهند داد. برای مثال شما میتوانید هنگام ورود اطلاعات صحت و اعتبار آنها را کنترل کنید. همچنین عناصر فرم تعامل بیشتری با هم خواهند داشت.

تمرکز بر برنامه های تحت وب: آینده ازآن برنامه های آنلاین خواهد بود. HTML5 این امکان را میدهد که یک برنامه تحت وب بدون درد و خون ریزی با هر نوع سیستمی سازگار باشد و به کاربران این فرصت را میدهد تا بدون استفاده از ابزاری خاص از یک برنامه لذت ببرند. با HTML5 میتوان ابزارهای چت, انجمن, سایتهای drag-and-drop نوشت.

آیا با وجود JavaScript  و Flash  نیازی به استفاده از HTML5 هست؟

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

Flash همیشه انتخاب خوبی نیست. مشکلات زیادی دارد. برای مثال استفاده زیاد از منابع سیستم مانند CPU و اینکه همیشه باید برای استفاده از آن نرم افزارش را نصب کرد.

و در آخر اینکه HTML5 آمده تا وب را تکان دهد. منتظر یک زلزله ۱۰ ریشتری باشید.

منبع LifeHacker

اگر مایلید در مورد HTML5 بیشتر بدانید به منابع زیر رجوع کنید.

HTML5 – Wikipedia

HTML5

Dive Into HTML5

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

حالا تصور کنید که همین صفحات وب عامل کندی و هدر رفتن وقت بشن. در این مطلب و مطالب مرتبط قصد داریم تا راهکارهای مٶ ثری رو برای افزایش سرعت بارگذاری صفحات وب بررسی کنیم.

در اولین قدم به بهینه سازی کدهای html میپردازیم.

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

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

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

• </area>
• </base>
• <body>
• </body>
• </br>
• </col>
• </colgroup>
• </dd>
• </dt>
• <head>
• </head>
• </hr>
• <html>
• </html>
• </img>
• </input>
• </li>
• </link>
• </meta>
• </option>
• </p>
• </param>
• <tbody>
• </tbody>
• </td>
• </tfoot>
• </th>
• </thead>
• </tr>

برای مثال شما میتونید به جای استفاده از فرمت <li> List Item</li> از شکل کوتاه تر <li> List Item استفاده کنید. شما حتی میتونید تگهایی مثل <body> , <head> , <html> رو هم که وجودشون در HTML لازم نیست حذف کنید.

HTML 5

نسخه 5 html که هنوز در دست توسعه امکانات بیشتری رو برای کاهش حجم به شما ارایه میده.

برای مثال شما میتونید از حالت کوتاه شده اعلان DOCTYPE استفاده کنید:

به جای دستور طولانی و معمول اون در نسخه های پایین تر html:

یا مثلا زمانی که قصد دارد encoding مربوط به صفحه تون رو مشخص کنید به جای استفاده از دستور طولانی <meta http-equiv=”content-type” content=”text/html; charset=utf-8″>

از شکل کوتاه شده‌ی اون استفاده کنید.

مورد دیگه اینه که هنگام استفاده از تگهای script و یا style حتما لازم نیست که خاصیت type اون رو مشخص کنید.

به طور کل اگر شما بتونید از نکات بالا به موقع و به صورت ترکیبی استفاده کنید قادر خواهید بود که بین 5 تا 20٪ از حجم فایلتون کم کنید و این خودش تأثیر به سزایی در سرعت لود صفحات شما در اینترنت داره.

برگرفته از مقالات آموزشی گوگل کد

q2njz6rwia