آشنایی با فرمت تصویری WebP

  • بوسیله: محسن شفیعی
  • در 1393/03/12 - 19:00
  • نظرات (5)
Image Format

Image Format

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

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

(بیشتر…)

نحوه ایجاد عناصر سفارشی در HTML

  • بوسیله: محسن شفیعی
  • در 1393/02/28 - 22:18
  • نظرات (9)
Web Components

Web Components

همانطور که میدانید در HTML تگ هایی به صورت پیشفرض وجود دارند که مخصوص عملیات خاصی در مرورگر هستند مانند تگ های p و a یا هر تگ دیگری که از آن استفاده میکنیم. در HTML5 ویژگی جدیدی به نام Custom Elements اضافه شده است که بخشی از Web Component است که با استفاده از آن میتوانید خودتان عناصر جدید با نام های جدید بسازید.

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

در ادامه مطلب همراه ما باشید…

(بیشتر…)

آشنایی با Web Component در HTML5

  • بوسیله: محسن شفیعی
  • در 1393/02/27 - 15:07
  • نظرات (5)
Web Components

Web Components

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

حالا همین مبحث تحت عنوان Web Component در HTML5 بوجود آمده است. شما با استفاده از Web Component میتوانید بخش‌های مختلف سایت خودتان را تحت عنوان یک Component اضافه کنید. و از این Componentها در سایت‌های دیگری نیز استفاده کنید مانند Pluginها که یکبار نوشته می‌شوند و چندین بار مورد استفاده و نصب قرار میگیرند.

Web Component خودش به چندین مبحث تقسیم میشود. به عبارتی دیگر برای اینکه شما بتوانید یک Web Component بسازید باید حدود 4 مبحث دیگر از HTML5 را یاد داشته باشید. از این 4 مبحث ما دو مبحث آن تحت عنوان Templates و HTML Import را بررسی کردیم. دو مبحث دیگر نیز با نام های Custom Elements و Shadow DOM وجود دارند که در آینده بررسی میکنیم.

اما هم‌اکنون نیز شما میتوانید از Web Component استفاده کنید. در سایت customelements.io میتوانید میتوانید Web Componentهای ساخته شده و رایگان را مشاهده و از آن‌ها استفاده کنید.

همچنین در سایت webcomponents.org میتوانید مطالب بیشتری در مورد Web Component بخوانید.

منتظر مطالب بعدی در این زمینه باشید.

آشنایی با واحد اندازه گیری rem

  • بوسیله: محسن شفیعی
  • در 1393/02/23 - 12:27
  • نظرات (10)
CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

احتمالا بیشتر شما با واحدهای اندازه گیری مختلفی در CSS آشنا هستید که البته معروف ترین آنها px است و همچنین واحدی که در چند سال گذشته حرف آن زیاد به گوش رسیده واحد em است. در این مطلب ما قبلا با واحد اندازه گیری em آشنا شدیم. این واحد به صورت relative کار میکند و بر اساس مقدار اندازه والد عمل میکند که همین نکته باعث میشود مشکلاتی در استفاده از این واحد در font-size بوجود آید.

در ادامه مطلب همراه ما باشید…
(بیشتر…)

متحرک کردن تصویر با استفاده از CSS Keyframes

  • بوسیله: محسن شفیعی
  • در 1393/02/16 - 12:00
  • نظرات (13)
Animation

Animation

فرمت gif یکی از فرمت های رایج تصویری در وب است که بیشترین استفاده آن زمانی است که بخواهیم یک تصویر متحرک یا به صورت انیمیشن را نمایش دهیم. اما این فرمت برخلاف رایج بودن آن اصلا فرمت خوبی نیست و دارای حجم های بالایی نیز است و همچنین از تعداد رنگ پایینی پشتیبانی میکند. برای مثال Matt در این سایت یک عکس با فرمت gif را گذاشته است که دارای 1.7MB حجم است، در حالی که همان عکس با فرمت ویدیویی WebM دارای فقط 94KB است.

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

در ادامه مطلب همراه ما باشید…

(بیشتر…)

فلکس باکس: آینده لی‌ اوت در CSS

  • بوسیله: محسن شفیعی
  • در 1393/02/09 - 22:21
  • یک نظر
CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

فلکس باکس یا بگذارید بهتر بگوییم Flexbox، مجموعه ای از دستورات یا یک ماژول به حساب می آید که طراحان با استفاده از آنها میتوانند Layoutهای قابل انعطاف یا به نوعی شناور را به راحتی درست کنند که پیچیدگی های سیستم های دیگر را به شدت کاهش میدهد. وضعیت پشتیبانی این ویژگی، الان تنها در Opera mini پشتیبانی نمیشود، و به نظر میرسد زمان یادگیری این ویژگی فرارسیده است.

(بیشتر…)

مقدمه‌ای بر Imports در HTML

  • بوسیله: محسن شفیعی
  • در 1393/02/03 - 12:40
  • یک نظر
Html Imports

Html Imports

HTML Imports تکنولوژی جدیدی است که میتواند نحوه ساخت سایتها را به نحوی تغییر دهد. در‌ واقع با استفاده از Imports میتوانید فایل‌های HTML را درون فایلهای دیگر فراخوانی (Import) کنید. اینکار چند مزیت دارد، که شامل قابلیت ساخت مجموعه‌ای از کدهای HTML, CSS و JavaScript که میتواند بین اپلیکیشن شما در اشتراک باشد و یا حتی میتواند درون وب به اشتراک گذاشته شود.

در حالی که این امکان نیز وجود دارد که با استفاده از AJAX، عملیات Imports را در JavaScript به صورت تمیزتری انجام داد.

در ادامه این مطلب میخواهیم این ویژگی را با ویژگی Template در HTML که قبلاً معرفی کردیم ترکیب کنیم.

(بیشتر…)

نگاهی به خاصیت Ping در HTML5

  • بوسیله: محسن شفیعی
  • در 1393/01/30 - 22:37
  • نظرات (8)
اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

قبلا در مطلبی به خاصیت download در تگ a اشاره کردیم که با استفاده از آن به مرورگر میگفتیم که به جای باز کردن فایل آن را دانلود کند. در این مطلب میخواهیم خاصیت ping در تگ a را بررسی کنیم. همانطور که از اسم این خاصیت برمی آید، هر بار که کاربری روی لینکی کلیک کند که دارای این خاصیت است، مرورگر یک ping به فایل مشخص شده در این خاصیت انجام میدهد.

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

نحوه استفاده از این خاصیت را در ادامه مطلب ببینید…

(بیشتر…)