ایجاد تب منوی عمودی با استفاده از Css,JQuery

  • بوسیله: جاوید خانلو
  • در 1394/10/22 - 18:49
  • نظرات (10)
تب منوی عمودی

تب منوی عمودی

 

 

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

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

 

(بیشتر…)

Remote debugging صفحات وب با Chrome

  • بوسیله: محسن شفیعی
  • در 1393/10/13 - 18:05
  • نظرات (9)
Remote debugging

Remote debugging

همیشه یکی از چالش های طراحی صفحات وب برای گوشی های هوشمند، تست و خطایابی آنها درون محیط واقعی آنها است. برای این مشکل، راه حل هایی البته وجود دارد. سایت های وجود دارند که عکسی از صفحه شما درون دستگاه های مختلف میدهند. همچنین پکیج هایی نیز برای زبان Node js نوشته شده است که میتوانید گوشی را به سیستم متصل کنید، که به این صورت کارتان را بسیار ساده تر میکنند.
اما اگر بخواهیم از این هم ساده تر سایت ریسپانسیو را درون گوشی یا تبلتمان چک کنیم، چه راه حلی وجود دارد؟ راه حل استفاده از مرورگر گوگل کروم است. این مرورگر از نسخه 32 به بعد قابلیتی به نام Remote debugging را به خودش اضافه کرده است که در آن به راحتی میتوانید گوشی را به سیستم متصل کنید و همچنین میتوانید سایت باز شده درون گوشی را از طریق سیستم inspect کنید.
در ادامه مطلب همراه ما باشید…

(بیشتر…)

روز اول کنفرانس Google I/O 2014

  • بوسیله: محسن شفیعی
  • در 1393/04/05 - 11:41
  • دیدگاه‌ها برای روز اول کنفرانس Google I/O 2014 بسته هستند
Google I/O

Google I/O

اگر سایت های فناوری  و تکنولوژی روز رو دنبال میکنید احتمالا در جریان برگزاری کنفرانس Google I/O قرار دارید. این کنفرانس که همه ساله توسط شرکت گوگل برگزار میشود نوعی کنفرانس است که توسعه دهندگان گوگل نتیجه زحمات یکساله خودشان در اختیارمشتریان و توسعه دهندگان دیگر قرار میدهند. مانند تولیدات گوگل، این کنفرانس نیز جنبه های مختلف زیادی دارد و ما در آپارنت فقط اخبار توسعه وب رو دنبال و بررسی میکنیم.

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

(بیشتر…)

آشنایی با عنصر track در تگ video

  • بوسیله: محسن شفیعی
  • در 1393/04/02 - 22:03
  • نظرات (4)
اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

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

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

توسط این تگ میتوانیم استایل مناسب را نیز به زیرنویس ها بدهیم.

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

(بیشتر…)

طراحی به شیوه ابتدا موبایل (Mobile First)

  • بوسیله: محسن شفیعی
  • در 1393/03/14 - 23:12
  • نظرات (8)
Mobile First Web Design

Mobile First Web Design

شیوه ابتدا موبایل یا Mobile First یک نوع روش در طراحی ریسپانسیو است. ایده آن به اینصورت است که ما طراحی سایت را ابتدا تنها با یک ستون (مخصوص نمایشگرهای کوچک) شروع میکنیم. به این صورت سایت طراحی شده در همه دستگاه‌ها، رزولویشن ها و مرورگرها به خوبی نمایش داده می‌شود. مهم نیست که نمایشگر کاربر چه اندازه‌ای باشد، مهم این است که به راحتی میتواند محتوا را مشاهده کند.

زمانی که طراحی تنها با یک ستون به پایان رسید با استفاده از Media Queryها و JavaScript سایت را برای نمایشگرهای بزرگتر آماده میکنیم. برای مثال ستون‌های بیشتری اضافه میکنیم، عکس‌های با رزولویشن بالاتری را لود میکنیم و هر کاری که میخواهیم در نمایشگرهای بزرگتر انجام دهیم.

اما فواید این روش چیست؟ در ادامه مطلب همراه ما باشید…

(بیشتر…)

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

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

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

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

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

(بیشتر…)

آشنایی با page visibility api در HTML5

  • بوسیله: محسن شفیعی
  • در 1393/01/16 - 14:34
  • نظرات (3)
اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

با استفاده از page visibility api در HTML5 میتوان وضعیت صفحه را در مرورگر کاربر تشخیص داد. برای مثال اگر کاربر روی صفحه دیگری فوکوس کرده باشد و صفحه ما مخفی باشد با استفاده از این API میتوان اینگونه تغیییرات را مطلع شد.

این API در وضعیت Recommendation قرار دارد و میتوان با آسودگی از آن استفاده کرد.

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

(بیشتر…)