web design

طراحی سایت

website

شما تنها با مبلغ ۵۰ هزار تومان می توانید یک سایت اختصاصی داشته باشید!

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

  این پکیج شامل موارد زیر می باشد:   ۱٫ ثبت دامنه: یک سال ثبت آدرس اختصاصی شما با دامنه ی ملی ir   ۲٫ میزبانی وب سایت: ۱۰۰ مگابایت فضای میزبانی برای وب سایت، در ایران یا آمریکا به انتخاب خودتان!   ۳٫ راه اندازی وب سایت: راه اندازی و پیاده سازی وب سایت شما با سیستم مدیریت کاملا فارسی شامل موارد زیر:   www   اسلایدشو در صفحه اول امکان مدیریت مطالب امکان ایجاد پست ثابت امکان ایجاد منو گالری عکس جستجو نقشه سایت نمایش خودکار و لحظه ای اخبار از وب سایت های دیگر فرم ارتباط با ما آمار سایت   web design ریز هزینه های موارد این پکیج به شرح زیر می باشند:
  • ثبت دامنه ی ir یک ساله، ۶ هزار تومان
  • اختصاص فضای میزبانی ۱۰۰ مگابایت، ۲۰ هزار تومان
  • راه اندازی وب سایت با امکانات گفته شده، ۲۴ هزار تومان!

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

web design

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

seo-content-management-systems

سیستم مدیریت محتوا چیست؟

سیستم مدیریت محتوا

یکی از راه های ساخت یک وب سایت کمک گرفتن از سیستم های مدیریت محتوا (Content management system) است.

با مشاهده ی قالب یک وبلاگ ساده متوجه خواهید شد یک صفحه ی به ظاهر ساده ی اینترنتی، برای اینکه نمایش در مرورگر (Browser) نیازمند چه تعداد کد مختلف اینترنتی (HTML و CSS) است.

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

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

بنابراین ساخت یک وب سایت، هرچند هم که ساده به نظر برسد، دارای پیچیدگی های بسیار زیادی است.

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

استفاده از نرم های سایت ساز و کمک گرفتن از سیستم های طراحی وب.

سیستم مدیریت محتوا

سیستم های مدیریت محتوا

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

این سیستم ها دارای ظاهری کاربر بوده و در آنها از صفحه ای شامل کدهای تو در تو خبری نیست !

سیستم های مدیریت محتوا به شما اجازه میدهند تا با چند کلیک ساده، قابلیتی که نیازمند ساعت ها کد نویسی است را به وب سایتتان اضافه کرده و یا قالب و ظاهر کلی وب سایتتان را به راحتی تغییر دهید.

خاطر نشان کردن این نکته ضروری است که استفاده از سیستم های مدیریت محتوا دارای محدودیت هایی نیز هست.

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

سیستم های مدیریت محتوای زیادی وجود دارد که هرکدام دارای قابلیت ها و کارکردهای متفاوتی اند. از جمله سیستم های مدیریت محتوا می توان به وردپرس (Word Press)، جوملا (Joomla) و دروپال (Drupal) اشاره کرد.

هر کدام از این CMS ها دارای تنظیمات، افزونه ها و پلاگین های خاص خود هستند.

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

HTML5_Logo

توضیحاتی درباره HTML 5

HTML5_Logo_512

جایگاه HTML در طراحی

در طراحی و پیاده سازی صفحات وب و application های تحت وب، تکنولوژی های متعددی مورد استفاده قرار می گیرند که هر کدام کاربرد خاص خود را دارند. در این بین کاربردها و اهداف اصلی استفاده از HTML را در دو مورد زیر می توان خلاصه کرد:

  1. توصیف ساختار معنایی اطلاعات
  2. تولید رابط کاربری و فرم های ورود اطلاعات
البته از HTML برای توصیف ساختار ظاهری اطلاعات هم استفاده می شود که امروزه این کار تقریبا منسوخ شده و این وظیفه به CSS محول شده است. به عبارت دیگه CSS برای جدا کردن ساختار ظاهری از ساختار معنایی ابداع شد. و بنابراین امروزه استفاده از تگهایی نظیر font و center و همچنین استفاده ازattribute هایی نظیر bgcolor و width داخل HTML تقریبا منسوخ شده است. در راستای جدا کردن ساختار ظاهری از HTML حتی استفاده از table برای طراحی ساختار صفحات هم به نوعی منسوخ دانسته شده و به جای آن از طراحی های مبتنی بر div و CSS استفاده میشود.
HTML5 PageLayout

فرایند تکامل HTML5

HTML 4 در سال ۱۹۹۷ منتشر شد. با گذشت زمان نیاز به ایجاد تغییرات برای برآوردن نیازهای جدید احساس میشد. روند کند توسعه استانداردهای وب که تحت نظارت W3C انجام میشد باعث شد تا گروه WHATWG متشکل از علاقمندان و نمایندگانی از شرکت های فعال در این عرصه نظیر Mozilla ، Opera و Apple در سال ۲۰۰۴ تشکیل شود. حاصل کار چند ساله این گروه در اواسط سال ۲۰۰۷ برای تدوین استاندارد HTML5 مورد قبول W3C واقع شد. HTML5 نسخه شماره ۵ زبان اصلی World Wide Web یعنی HTML است. این نسخه در تاریخ ۲۲ ژانویه ۲۰۰۸ بوسیله کنسرسیوم وب جهانی (W3C) منتشر شد. ایده ابتدایی این نسخه از HTML در سال ۲۰۰۴ در WHATWG کلید خورد. این گروه کاری شامل شرکت های بزرگی مانند AOL، Apple، Google، IBM، Microsoft، Mozilla، Nokia، Opera و … می باشد.

نشانه های جدید HTML 5 عناصر و ویژگی های جدیدی به تگ ها (tag) ها اضافه کرده است. از لحاظ تکنیکی بعضی از این تگ ها به div و span شبیه هستند. به عنوان مثال تگ جدید nav و تگ جدید footer از این دسته هستند. بعضی دیگر از تگ های جدید مخصوص موتور های جستجو (برای ایندکس کردن اطلاعات) ، دستگاه های دارای صفحه کوچک (مانند موبایل) و یا خواننده های صوتی می باشند مانند تگ های جدید audio و video. همچنین بعضی از عناصر حذف شده اند. مانند تگ center. HTML5

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

  • فضای آفلاین: Google Gears را میشناسید؟ HTML5 قرار است چیزی شبیه آن در خود داشته باشد. برای مثال میتوان باHTML5 ایمیلهای خود را به صورت آفلاین خواند. مثال دیگر این است که سایتها میتوانند برخی از اطلاعات خود را بر روی سیستم شما ذخیره کنند و این یعنی چند برابر سرعتی که الان داریم درست مثل یک "ابر کوکی".
  • اشکال غیر منظم: با امکانات کنونی تنها شکلی که میتوان برای قسمتهای صفحه داشت مستطیل است در حالیکه در HTML5 دیگر از این محدودیت ها خبری نیست. میتوانید از هر گوشه صفحه بهترین استفاده را ببرید. حتی میتوانید تنها با کد نویسی تصاویر, نمودارها و هرچیزی را که فکر کنید در صفحه خود داشته باشید. دیگر مجبور به استفاده از فلش یا افزونه های دیگر نیستید.
  • پخش صوت و ویدیو به صورت مستقل: اگر مطلب قبلی من در مورد فایرفاکس و پخش ویدیو بدون هیچ افزونه راخوانده باشید با این قابلیت آشنا هستید. این یعنی اینکه دیگر لازم به استفاده از Flash برای پخش ویدیو و صدا نیستید. به راحتی میتوان از یک خط کد برای اینکار استفاده کرد و در عین حال تمام قابلیتهایی نظیر عقب و جلو کردن, ذخیره ویدیو و … را در اختیار داشته باشید.
  • مکان یابی: HTML5 میتواند مکان شما را تشخیص دهد و نتایج جستجو را بر حسب مکان شما سفارشی کند و یا اینکه ورودی های twitter شما را برچسب گذاری کند.
  • فرم‌های هوشمندتر: جعبه های متن, checkbox ها, منوهای کشویی و تمام عناصر یک فرم هوشمندانه تر عمل خواهند کرد و به شما امکانات بیشتری برای کنترل اطلاعات خواهند داد. برای مثال شما میتوانید هنگام ورود اطلاعات صحت و اعتبار آنها را کنترل کنید. همچنین عناصر فرم تعامل بیشتری با هم خواهند داشت.
  • تمرکز بر برنامه های تحت وب: آینده ازآن برنامه های آنلاین خواهد بود. HTML5 این امکان را میدهد که یک برنامه تحت وب بدون هیچ مشکلی با هر نوع سیستمی سازگار باشد و به کاربران این فرصت را میدهد تا بدون استفاده از ابزاری خاص از یک برنامه لذت ببرند. با HTML5 میتوان ابزارهای چت، انجمن، سایتهای drag-and-drop نوشت.
 

تفاوت ها با HTML 4

لیست تعدادی از تفاوت های HTML 5 با HTML 4 به طور خلاصه (تعداد کمی از نمونه ها نمایش داده شده است) عبارتند از:

  • عناصر جدید – section, video, progress, nav, meter, time, aside, canvas
  • عناصر صفحه – header, section, footer, figure
  • ویژگی های جدید برای تگ Input – date/time, email, url
  • ویژگی های جدید – ping, charset, async
  • ویژگی های عمومی (به تمامی عناصر قابل اعمال هستند) – id, tabindex,repeat
  • عناصر حذف شده – center, font, strike
 

تغییرات HTML5

تغییرات HTML5 بیشتر در رابطه با هر چه بهتر برآوردن دو هدفی است که پیشتر گفته شد. » تگ های جدیدی که برای توصیف بهتر ساختار معنایی اطلاعات افزوده شده عبارتند از: section , article , aside, header , footer , nav , dialog , figure

» تغییرات جدید برای طراحی بهتر فرم های ورود اطلاعات، افزوده شدن انواع جدیدی از input نظیر : datetime, datetime-local, date, month, week, time, number, range, email, url تگ های جدید output و datalist » برخی از تگ های جدید برای پویا تر شدن محتوا و رابط کاربری: audio, video, canvas, meter, progress, event-source, … مشاهده لیست کامل تغییرات (در سایت W3C)

برای مشاهده تگ های جدید اضافه شده به نسخه ۵ و توضیح کوتاهی در مورد هر یک، به صفحه HTML 5 Reference مراجعه نمایید. تگ های جدید با (NEW) مشخص شده است. (در سایت W3schools)

html5 code

ساختار کلی یک صفحه وب مبتنی بر HTML۵

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

همانطور که در تصویر مشاهده میکنید تمامی قسمت‌ها توسط تگ‌هایی از یکدیگر جدا شده‌اند و این، کار را برای موتورهای جستجو راحت میکند. در ادامه توضیح کوتاهی در مورد تگ های موجود در تصویر ارائه می دهیم:

<header> همانطور که از نامش پیداست مکان دقیق سربرگ سایت را مشخص می‌سازد و تمامی عناصر مربوط به سربرگ بین دو تگ <header> و </header> قرار می‌گیرند به صورت زیر:

<header> . . </header>

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

<section> از این تگ برای تعریف بخش ها در صفحه استفاده می شود. فصل ها ، سرصفحه ، پاورقی ، بخش های مربوط به تبلیغات و یا هر بخش دیگر از صفحه با این تگ مشخص و مجزا می گردد.

<article> جهت تعریف محتوای خارجی از تگ <article> استفاده می شود. محتوای خارجی می تواند یک مقاله خبری از ارائه دهنده های خارجی، یک متن از وبلاگ و یا یک متن از یک بخش یا هر چیز دیگر از یک منبع خارجی باشد.

<footer> تگ <footer> همانطور که از نامش پیداست برای مشخص کردن مکان پابرگ سایت یا وبلاگ استفاده میشود و تمامی عناصری که در قسمت پابرگ صفحه قرار می‌گیرند بین دو تگ <footer> و </footer> قرار می‌گیرند.

در اینجا جا دارد کمی هم درباره ساختار یک صفحه وب صحبت کنیم. در نسخه قدیمی HTML یعنی نسخه ۴ آن برای شروع کدنویسی هر صفحه باید استاندارد آن صفحه تایید میشد که با کد زیر مشخص می‌شود:

<!DOCTYPE html PUBLIC "-//W۳C//DTD XHTML ۱.۰ Transitional//EN" "http://www.w۳.org/TR/xhtml۱/DTD/xhtml۱-transitional.dtd"> <html xmlns="http://www.w۳.org/۱۹۹۹/xhtml">

اما در HTML۵ دیگر لازم نیست دو خط کد بنویسید تا استاندارد بین المللی HTML را مشخص کنید و فقط کافی است با کد زیر در ابتدای کدها، استانداردتان را مشخص کنید:

<!DOCTYPE html>

همانطور که مشاهده کردید کدها در HTML۵ بسیار بهینه‌تر از گذشته شده اند تگهای بسیاری در نسخه جدید جایگزین چندین خط کد شده‌اند. به عنوان مثال برای مشخص کردن نوع کاراکتر صفحه و تنظیم آن به UTF8 در نسخه قبلی باید کد زیر نوشته می شد:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

اما حالا در نسخه جدید فقط کافی است از کد زیر استفاده کنید:

<meta charset="UTF-۸">

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

سازگاری مرورگرها با HTML5 اکثر مرورگر ها به غیر از IE همگام با استاندارد ها پیش میروند و کم و بیش از استاندارد های جدید پشتیبانی میکنند. هم اکنون نسخه های بتای firefox3 و opera9.5 تا حدودی از HTML5 پشتیبانی میکنند. قطعا زمانیکه HTML5 از پیش نویس خارج شده و کاربردی شود این مرورگر ها هم از نسخه بتا خارج شوند، میتوان انتظار داشت تا از HTML5 و CSS3 پشتیبانی قابل قبولی داشته باشند. با توجه به این که اکثر کاربران این مرورگرها از نسخه های آپدیت استفاده میکنند در آینده نزدیک مشکل خاصی با این مرورگرها وجود نخواهد داشت. اما IE که متاسفانه حدود ۷۵ درصد از کاربران وب از آن استفاده میکنند. بعید به نظر میرسد که در آینده نزدیک (و یا حتی دور) پشتیبانی قابل قبولی از HTML5 و CSS3 داشته باشد. IE6 در سال ۲۰۰۱ منتشر شد و در سال ۲۰۰۵ نسخه ی ۷ این مرورگر در حالی منتشر شد که پیشرفت چشمگیری نسبت به نسخه قبل نداشت و حتی هنوز از CSS2 هم پشتیبانی خوبی نداشت. و اگر مایکروسافت این روند را در پیش بگیرد نمیتوان به IE8 امیدوار بود.

HTML5، طراحان وب و مرورگرها از آنجایی که سازگاری یکسان همه مرورگرها با استاندارد های وب ظاهرا" رؤیایی بیش نیست. لذا طراحان وب چاره ای ندارند جز اینکه خودشان طرح ها یشان را با مرورگر ها سازگار کنند. برای مثال برای پشتیبانی از canvas در IE میتوان از explorercanvas استفاده کرد که در واقع canvas شبیه سازی شده با استفاده از جاوااسکریپت و vml است. HTML5 و CSS3 برای راحت تر و بهتر شدن طراحی بوجود آمده اند ولی با توصیفاتی که ذکرش رفت، طراحی با تکنولوژی های جدید و در عین حال سازگار بودن با تمام مرورگرها کار را دشوار تر میکند. اما چاره ای نیست چون گذر از این مراحل برای پیشرفت لازم است حتی اگر دشوار باشد و حتی اگر موانعی نظیر IE بر سر راه باشد.

نکته: XHTML5 در واقع همان HTML5 با رعایت قوانین XML هست. ولی در مورد XHTML2.0 بر خلاف XHTML1 که بر اساس HTML4 توسعه یافته، XHTML 2.0 کاملا مستقل از HTML5 هست و حتی با XHTML 1.1 هم سازگاری ندارد.

برای آشنایی هر چه بیشتر با نسخه ۵ HTML مشاهده ویدئویی در این مورد خالی از لطف نیست. زمان ویدئو تقریبا" ۴۲ دقیقه بوده و برای مشاهده آنلاین آن داشتن اینترنت پر سرعت الزامی است. » لینک ویدئو: http://www.vimeo.com/6691519 » زبان: English » زمان: ۴۱:۵۵ دقیقه

منابع: http://www.w3schools.com http://www.pcpedia.ir http://forum.downloadina.com http://www.faroxa.com

منبع فارسی: http://www.webexpress.ir   توضیحاتی درباره HTML 5
google-search

پیدا کردن موقعیت سایت در جستجوی گوگل

وقتی سایتی ایجاد می شود، یکی از مهمترین اهداف جذب مخاطبین از طریق موتورهای جستجو و در راس آنها گوگل است. در این مطلب چگونگی پیدا کردن موقعیت سایت در جستجوی گوگل را برای کلمه کلیدی مورد نظر، توضیح می دهیم. فرض کنید شما مطلبی درباره ی «گلهای بهاری» نوشته اید. پس از گذشت چند روز از انتشار مطلب در سایت خود، انتظار دارید با جستجوی عبارت «گلهای بهاری» در گوگل، سایت شما به عنوان یکی از نتایج ظاهر شود. اگر صفحه ی «گلهای بهاری» که در سایت شما وجود دارد، در زمان جستجو در یکی صفحه های اول یا دوم گوگل نباشد، کار ساده ای نیست که همه ی صفحه های بعدی را یکی یکی بررسی کنید. به پیدا کردن موقعیت سایت در جستجوی گوگل Search Engine Results Page یا به صورت مخفف SERP می گویند. به وسیله ی این ابزارها می توانید بفهمید در هنگام جستجوی یک عبارت در گوگل (در مثال ما، عبارت «گلهای بهاری»)، سایت شما در کدام یک از صفحه های نتایج گوگل دیده می شود؟ ممکن است سرویس های SERP امکانات زیر را داشته باشند:
  • کلمه ی کلیدی (Keywrods) برای جستجو
  • دامنه ی مورد نظر (برای پیدا کردن آن دامنه) در صفحات نتایج موتور جستجو
  • امکان انتخاب موتور جستجو (معمولا Google و یا Yahoo/Bing)
  • تا چند صفحه ی نتایج جستجو، بررسی شود؟
  • جستجوی محلی (Local Search) برای جستجو بر اساس فرهنگ ها و زبان های مختلف
برای پیدا کردن موقعیت سایت در جستجوی گوگل می توانید از ابزارهای زیر استفاده کنید:
Website-templates-collection

منابع قالب رایگان وردپرس فارسی

WordPress یک سیستم مدیریت محتوای (CMS) بسیار معروف است که در بین طراحان وب محبوبیت زیادی دارد. CMS ها طوری طراحی شده اند که انعطاف زیادی دارند تا بتوانند برای طراحی طیف گسترده ای از وب سایت به کار آیند. خوشبختانه قالب (پوسته یا theme) های زیادی برای وردپرس وجود دارد. ما در این مطلب سعی داریم تا بهترین منابع قالب رایگان وردپرس فارسی را به شما معرفی کنیم.

(بیشتر…)
cloudflare-logo

آموزش راه اندازی سرویس cloudflare.com

سرویس cloudflare.com برای امنیت و بهینه سازی وب سایت ها خدمات جالبی را به صورت رایگان (و پولی) ارائه می کند. این خدمات از طرفی در تامین امنیت از جمله مقابله با حملات DDOS و از طرف دیگر در بهینه شدن سرعت بارگذاری وب سایت شما تاثیر بسیار مثبتی دارند. در این نوشته آموزش راه اندازی سرویس cloudflare.com را ارائه می نماییم. (بیشتر…)