نحوه ایجاد عناصر سفارشی در 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 به فایل مشخص شده در این خاصیت انجام میدهد.

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

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

(بیشتر…)

انتشار Ubuntu 14.04 LTS

  • بوسیله: محسن شفیعی
  • در 1393/01/29 - 14:33
  • نظرات (11)
Ubuntu 14.04 LTS

Ubuntu 14.04 LTS

از آنجایی که دنیای وب با جامعه متن باز (Open Source) پیوند عمیقی دارد، تصمیم گرفتیم مطلبی در مورد انتشار یکی از محبوبترین توزیع های Linux یعنی Ubuntu داشته باشیم. Ubuntu 14.04 LTS که نسخه نهایی آن دیروز منتشر شد، به مدت 5 سال پشتیبانی میشود و جزء نسخه های Long Term Support محسوب میشود. این نسخه از Ubuntu را میتوان یکی از بهترین نسخه های Ubuntu از زمان اولین نسخه آن دانست که بهبودهای فراونی در قسمت های مختلف داشته است.

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

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

(بیشتر…)

استفاده از Captcha در Laravel

  • بوسیله: محسن شفیعی
  • در 1393/01/25 - 20:06
  • نظرات (5)
Laravel

Laravel

اگر سری آموزش فریم ورک Laravel را دنبال کرده باشید، احتمالا خواسته اید که کتابخانه یا قطعه کد یا یک کلاس جداگانه را به Laravel اضافه کنید. در نسخه های قدیمی، Laravel از bundle برای اینکار استفاده میکرد، که البته این راه استاندارد آن بود و راه های متفاوت دیگری نیز وجود دارد. اما در نسخه های جدید Laravel از Package استفاده میکند و دیگر دستور php artisan bundle در Laravel وجود ندارد.

اما استفاده از Packageها صجبت این مطلب ما نیست. در واقع ما با استفاده از این قابلیت (Package)، قطعه کدی که قبلا برای ایجاد Captcha در آپارنت گذاشته بودیم را به Laravel وارد کردیم. برای استفاده از Captcha در Laravel کافیست این پکیج را به Laravel اضافه کنید و از آن استفاده نمایید.

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

(بیشتر…)