طراحی سایت

now browsing by tag

 
 

قرار دادن فنت فارسی در CSS3.

در این زمان که کاربران به ظاهر سایت توجه میکنند دیگر فونت های قدیمی مانند Arial و Tahoma, برای سایتهای فارسی مورد استفاده قرار نمیگیرد.
بر این اساس مقاله ای برای آموزش قرار دادن فونت فارسی برای شما آماده کردیم.
برای این کار:
۱٫فونت های فارسی را در گوگل جست و جو کرده و دانلود کنید.
۲٫ فونت ها را به پسوند های ttf ، eot ، svg ، woof تبدیل کنید. برای این کار میتوانید از سایت www.onlinefontconverter.coکمک بگیرید.
۳٫ پس از آماده کردن این فرمت ها فایل CSS اصلی را باز کرده و این کد را قرار دهید.
@font-face {
font-family: ‘b koodak’;
src: url(‘Fonts/BKoodak.eot’);
src: url(‘Fonts/BKoodak.eot?#iefix’)
format(‘embedded-opentype’),
url(‘Fonts/BKoodak.woff’) format(‘woff’),
url(‘Fonts/BKoodak.ttf’) format(‘truetype’),
url(‘Fonts/BKoodak.svg#BKoodakRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;

نکته:
از مودل True type فونت ها استفاده کنید که در مرورگرهای مختلف سایت شما به هم نریزد.
نکته ۲:
استفاده بیش از حد از این فونت ها نکنید, زیرا باعث کاهش سرعت بارگزاری و همچنین ایندکس نکردن مطالب سایت شما توسط گوگل به دلیل پشتیبانی نکردن CSS3 میشود.

هر آنچه در طراحی سایت باید بدانیم

این مقاله ابهامات ایجاد شده در مورد نیازهای طراحی سایت را برطرف می کند، همچنین شما را در جایگاه درستی از درک موارد مورد نیاز وب سایت قرار می دهد.
مرحله اول : ثبت یک دامنه
ثبت دامنه به شما امکان داشتن یک صفحه اصلی می دهد (www.yourdomain.com) و ثبت یک نام اینترنتی (دامنه) اولین مرحله در داشتن یک وب سایت آنلاین می باشد.
این مرحله تنها چند دقیقه وقت شما را می گیرد و شما در ازای دامنه انتخابی خود مبلغی را سالانه پرداخت می کنید.
مرحله دوم : ثبت هاست یا میزبان وب
هاست یا میزبان وب محل نگهداری فایلها، ویدیو ها، تصاویر، ایمیل ها و … می باشد. شما می توانید در ازای پرداخت مبلغی سالانه فضای هاست خود را شارژ نمایید.
و حالا نوبت طراحی وبسایت شما می باشد.
شما در این مرحله انتخاب های متفاوتی خواهید داشت. انتخاب اول می تواند طراحی یک وب سایت استاتیک باشد که شما می توانید در این مرحله از نرم افزارهای چون (Artisteer,Dreamweaver,…) استفاده نمایید و یا با فراگیری HTML و CSS کار خود را آغاز کنید.
وب سایتهای استاتیک خاصیت بروز رسانی و مدیریت محتوای خود را ندارند اما برای راه اندازی یک وب سایت ساده ایده آل می باشند.
از دیگر انتخابهای موجود استفاده از سیستم های مدیریت محتوا می باشد. سیستم های مدیریت محتوا به شما امکان مدیریت وب سایت خود را می دهند. از جمله سیستم های مدیریت محتوا می توان (جوملا، وردپرس، دروپال و …) را نام برد و شما با فراگیری نحوه کارایی این سیستم های مدیریت وب سایت می توانید براحتی برای خود یک وب سایت طراحی کنید.
امروزه استفاده از سیستم های مدیریت محتوا بسیار متداول شده و طراحان از این سیستم ها برای ساخت وب سایت خود استفاده می کنند چون شما دیگر نیازی به دانش و فراگیری علوم طراحی وب سایت نخواهید داشت و تنها اگر اپراتوری ویندوز را فرا گرفته اید می توانید با تمرین، طراحی وب سایت خود را آغاز کنید.
امروزه طراحی وب سایت های داینامیک با قابلیت مدیریت محتوا توسط مدیر یا مدیران وب سایت ها از محبوبیت بسیار برخوردار است.

ابزارهای جدید برای طراحان وب در ۲۰۱۳

ابزارهای جدید برای طراحان وب در ۲۰۱۳
در سال ۲۰۱۳ ابزارهای جدیدی برای طراحان و توسعه دهندگان وب معرفی شدند که شامل برنامه های جدید وب، منابع jquery، ابزارهای توسعه وب، ابزارهای طراحی سایت موبایل، ابزارهای کد زنی و ابزارهای ساخت فونت های جدید می باشد.
بسیاری از ابزارهای زیر رایگان هستند و بسیاری دیگر را می توانید به مبلغ اندکی خریداری نمایید.
به مانند همیشه در صورتی که موردی از قلم افتاده در بخش نظرات پایین صفحه آن را اعلام نمایید.
Typewolf
قصد ابداع در فونت ها را دارید؟ Typewolf برای شما بهترین سایت می باشد. فقط به شما قابلیت ایجاد فونت مورد نظر را نمی دهد بلکه فونت مناسب شما را می یابد.
Bootstrap 3
Bootstrap, فریم ورک موبایل اول از توئیتر, اما Bootstrap 3 RC1 به وجود آمد. این نسخه تغییرات بسیاری نسبت به نسخه های قبلی نموده است.
iOS 7 Wireframe Kit
iOS7 Wireframe Kit به شما امکان ایجاد وایر فریم را در Illustrator می دهد.
Tiff
Tiff به شما تفاوت بین دو نوع فونت را نمایش می دهد. این سیستم با فونت های گوگل به مانند فونت های سیستم شما کار می کند.
Bytesize
Bytesize پادکست در مورد طراحی، توسعه وب و تکنولوژی می باشد. شما همچنین می توانید خلاصه مقاله را با لینک به مقاله مطالعه نمایید.
Skeuocard
Skeuocard یک فرم پیشرفته کارت اعتباری می باشد و اعتبارسنجی ها و نوع فیلدهای مخصوص به خود را دارد.
WakaTi.me
WakaTi.me قابلیت حساب کردن زمان را به محیط ویرایشگر شما می آورد.
Responsive Web CSS
Responsive Web CSS ساخت وب سایت موبایل را برای انواع مختلف موبایل ها برای شما آسان می سازد.
Colorgorize
Colorgorize گالری وب تقسم بندی شده توسط رنگ می باشد. شما می توانید سایت را با رنگ مورد نظر خود مرور و یا جستجو نمایید.
Spectacle
Spectacle برای سیستم مک طراحی شده برای کنترل صفحه با کلیدهای میانبر. این یک سیستم کد باز می باشد و استفاده از آن بسیار آسان می باشد.
Snapnote.io
Snapnote.io به اشتراک گذاری و استفاده از تصاویر را در صفحه به وسیله دراگ و دراپ آسان می سازد.
Pico
Pico سیستم مدیریت محتوای ساده و آسان می باشد که از دیتابیس استفاده نمی نماید. این سیستم کد باز می باشد.
CSS3 Animation Cheat Sheet
CSS3 Animation Cheat Sheet به شما قابلیت ایجاد انیمیشن های مختلف را توسط css3 نمایش می دهد.
Precomposed Touch Gestures
Precomposed Touch Gestures ابزار مناسبی برای ساخت دموی محصول و پرزنتیشن می باشد.
Mailparser.io
Mailparser یک راه آسان برای اتوماتیک سازی روتین ایمیل شما می باشد.
Progression.js
Progression.js یک پلاگین jquery برای نمایش عملکرد واقعی فرم می باشد.
CSS Zen Garden
CSS Zen Garden به شما امکان های ساخت ابزارهای مختلف توسط css را نمایش می دهد که با html5 هماهنگ شده.
NearlyFreeSpeech.NET
NearlyFreeSpeech.NET سرویس هاستینگی است که شما برای آن مقدار که استفاده می نمایید پرداخت می کنید. همچنین یک ابزار محاسبه و پیشبینی قیمت هاست دارید.
Webflow
Webflow ابزاری برای ساخت وب سایت موبایلصورت تصویری می باشد. که شامل ابزارهای گرید، فونت های وب و فرم ها و .. می باشد.
Emmet LiveStyle
Emmet LiveStyle یلاگین برای ویرایش فایل CSS شما می باشد. این ابزار با گوگل کروم و سافاری سازگاری دارد.
TypeWonder
TypeWonder به شما امکان بررسی و تست فونت های وب را می دهد. فقط کافی است آدرس سایت مورد نظر را وارد نموده و فونت مورد نظر خود را انتخاب نمایید.
Cloud Cannon
Cloud Cannon به شما امکان ایجاد سیستم مدیریت محتوا از css و html را می دهد.
SVGeneration
SVGeneration به شما امکان ایجاد گرافیک های SVG را در سایت می دهد.

فرق PHP و ASP.NET در طراحی سایت

PHP و ASP زبان های متداول برنامه نویسی تحت وب هستند که برای طراحی سایت های داینامیک بکار می روند. از نظر کاربرد هر دو می توانند صفحات وب سایت با کارایی و طرح قالب مشابه را تولید کنند.
اما اینکه کدام یک بهتر از دیگری است همواره موجب بحث هایی بین طراحان سایت قرار می گیرد . واقعیت این است که برنامه نویسان وب هر کدام بر یکی از این دو زبان برنامه نویسی تسلط بیشتری دارند چرا که در انتخاب اولیه خود از بین PHP و ASP یکی را انتخاب کرده اند و بقول معروف در آن خبره شده اند طبیعتا در مقابل این سوال ، بی درنگ از برتری ۱۰۰ درصدی زبانی که بر آن تسلط دارند می گویند اما حقیقت چیز دیگری است.
برنامه نویسی وب php
برنامه نویسی وب asp
برای ما چند معیار در طراحی سایت اهمیت دارد که روی انتخاب ما تاثیر خواهد داشت.

بحث کارایی:

همانطور که اشاره شد هر دو زبان برنامه نویسی از نظر کارایی یکسان هستند یعنی اگر بخواهیم هر وب سایت با هر قابلیتی را طراحی و راه اندازی کنیم اینکار هم با ASP قابل اجرا است و هم با PHP

بحث هزینه :

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

بحث عمومیت :

همانطور که اشاره شد پی اچ پی یک زبان لایه باز است به همین دلیل عمومیت بیشتری دارد. اسکریپت های زیادی برای آن یافت می شود و همواره بحث های اینترنتی درباره برنامه های نوشته شده توسط PHP داغ تر است.
خیلی از چیزهایی که یک برنامه نویس و طراح سایت نیاز دارد برای PHP بسرعت یافت می شود از انواع سیستم های مدیریت محتوا ( CMS ها ( گرفته تا فریم ورک ها و همین عمومیت یکی از مزایای این زبان است.
بازار طراحی وب سایت بر اساس PHP تقاضای بسیاری دارد . اگر یک طراح سایت بخواهد در این بازار سهم بیشتری داشته باشد نباید بر اهمیت تمرکز روی PHP غافل شود.
بنابراین با توجه به معیارهای فوق استفاده از زبان برنامه نویسی PHP در طراحی سایت مطلوب تر است اما از نظر کارایی هر دو یکسان هستند.
و یک نکته مهم :
بد نیست به این نکته هم اشاره کنیم که بزرگترین سایت های دنیا از بین این دو زبان ، PHP را انتخاب کرده اند که این انتخاب قطعا بدون بررسی های دقیق نبوده. بطور مثال سایت گوگل ، یاهو ، فیس بوک و بسیاری از سایت های بزرگ دیگر بر اساس PHP نوشته شده اند که حتما هر یک دلایل خاص خود را داشته اند.

بحث امنیت

(از نظر امنیت هیچ تفاوتی بین سایت های PHP و ASP نیست هردو می توانند امن باشند و یا هردو می توانند حفره های امنیتی داشته باشند. اما برخی عقیده دارند یکی از معیارهایی که باعث شده سایت های بزرگی مثل گوگل از PHP استفاده کنند امکان ایمن سازی بیشتر آن بوده است.

بحث رتبه سایت در گوگل:

در پاسخ به این سوال که از نظر سئو ( بهینه سازی سایت ) PHP برای گوگل بهتر است یا ASP باید گفت هیچ تفاوتی بین این دو زبان برنامه نویسی وب برای گوگل یا سایر موتورهای جستجوگر نیست. تعداد اندکی از سئو کاران عقیده دارند صفحات با پسوند PHP بهتر از ASP در سایت گوگل رتبه می گیرند اما گوگل هر گونه ارتباط بین رتبه بندی موتور جستجوی خود را با نوع برنامه نویسی رد کرده است.
با توجه به بررسی های فوق از بین زبان PHP و ASP.NET ، زبان برنامه نویسی وب PHP ترجیح داده می شود و این به معنی بد بودن ASP نیست . فقط و فقط بحث بر سر این است که از بین دو گزینه کدام را بر دیگری ترجیح می دهیم.

۶ روش در طراحی سایت جذاب

۶ روش در طراحی سایت جذاب
یکی از عوامل مهم در جذب بازدیدکننده طراحی سایتی جذاب است که علاوه بر جذب بازدیدکننده قابلیت نگه داشتن کاربر در وب سایت را برای مدتی طولانی داشته باشد.
شما در: صفحه اصلی آموزش ها و مقالاتشش روش در طراحی وب سایتی جذاب
شنبه, ۰۹ شهریور ۱۳۹۲
Facebook Like Button
Twitter Tweet Button
Google Plus One Button
Load all Button
Info Button
شش روش در طراحی وب سایتی جذاب
طراحی سایت جذاب
این سوال بسیاری است که چگونه می توان بازدید کننده بیشتری برای وب سایت خود جذب کرد؟ جذب ترافیک بیشتر در وب سایت مهم است و از آن مهمتر طراحی وب سایتی جذاب و زیبا که بتواند بازدیدکننده جذب شده را برای مدتی زیاد در وب سایت نگه داشت.
در این مقاله شما با شش نکته مهم در طراحی وب سایت جذاب و زیبا آشنا خواهید شد که نه تنها برای بازدید کننده شما جذاب باشد بلکه او را ترغیب به ماندن در وب سایت شما برای مدتی طولانی کند.
۱-انتخاب آگاهانه رنگ و طرح وب سایت
اگر شرکت شما دارای لوگو یا رنگ سازمانی خاصی است برای شروع خوب است، برای شروع شما می توانید با دو یا سه رنگ طراحی صفحات خود را آغاز کنید. ترکیب رنگهایی که شما در طرح خود می توانید استفاده کنید در زیر اشاره شده است:
۱٫قرمز، زرد و سفید
۲٫آبی و سفید
۳٫قرمز، خاکستری و سفید
۴٫آبی، نارنجی و سفید
۵٫زرد، خاکستری و سفید
۶٫رنگ پیازی، قهوه ای سوخته و سفید
اگر شما در استفاده از ترکیبات رنگی دچار تردید هستید با جستجویی در اینترنت و پیدا کردن وب سایت مورد علاقه خود می توانید از آن به عنوان مدل و نمونه در انتخاب طرح و رنگ مورد پسند خود استفاده کنید، معمولاً استفاده از چند ترکیب رنگ گفته شده در بالا جذابیت زیادی برای کاربران در پی خواهد داشت.
۲-زمینه صفحات وب سایت
مطمئن شوید که کاربران در زمینه صفحات شما برای خواندن متون سایت مشکلی نداشته باشند. از رنگهای تیره برای متون خود در زمینه های تیره ی و یا رنگهای سفید و زرد استفاده نکنید. اگر زمینه صفحات شما تیره است از رنگ های روشن برای متون خود استفاده کنید و بالعکس. مغمولاً رنگی که برای لینکها و پیوندهای استفاده می شود آبی است (قبل از بازدید) پس اگر شما زمینه تیره در وب سایت خود دارید مطمئن شوید که رنگ لینکهای شما روشن است.
۳-بارگذاری سریع صفحات وب سایت
اگر صفحات وب سایت شما بیش از یک دقیقه با اینترنت دیال آپ زمان برای بارگذاری صفحات نیاز دارد نیاز به رفع بعضی از مشکلات خواهد داشت. معمولاً افراد و کاربران وقت نخواهند گذاشت برای بارگذاری وب سایت شما و به وب سایت دیگری می روند که سریعتر بارگذاری شود و وقت خود را از دست ندهند. پس یک وب سایت خوب بارگذاری سریع دارد.
۴-اختصاص سایز پیکسلی مناسب
سایز صفحات وب با واحد پیکسل اندازه گیری می شوند. پیکسل ها واحد اندازه گیری صفحه می باشند. یک صفحه وب می تواند در هر سایزی باشد. مانند (۱۰۲۴*۷۶۸)
نرم افزارهای طراحی وب سایت معمولاً سایزهای استاندارد طراحی صفحات وب را در اختیار شما قرار می دهند. برای طراحی صفحات پاپ آپ همیشه از سایزهای کوچکتر استفاده کنید. انتخاب سایز پیکسلی صفحات سایت با شماست. نکته ای که مد نظر شما باید باشد این است که سایزی را انتخاب کنید تا در همه نمایشگرهای قابل نمایش باشد.
۵- لوگو
با طراحی لوگویی ساده کمک به شناساندن وب سایت خود خواهید کرد. در سر صفحه خود جایی برای آن در نظر بگیرید و با نوشتن متنی درباره شرکت و وب سایت خود توضیحاتی منحصر به فرد از وب سایت خود ارائه دهید. اینها نشانی از شماست که در ذهن بازدیدکننده و کاربر وب سایت خود هک می کنید.
۶- دقت در ادبیات بیان و جلوگیری از اشتباهات نوشتاری
در فن بیان ادبیات خود دقت داشته باشید و آنرا با مخاطبان خود وقف دهید، همچنین اشتباهات نوشتاری و تایپی مانع رسیدن شما به اهدافتان خواهد شد.

۶ پلاگین افکت اسکرولی نامحدود jQuery

۶ پلاگین افکت اسکرولی نامحدود jQuery
افکت اسکرول نامحدود را دیده اید. در سایت هایی مثل فیس بوک و گوگل پلاس. این افکت به این صورت می باشد که زمانی که اسکرول کاربر به انتهای صفحه می رسد سایر مطالب لود می شود. در حقیقت اسکرول نامحدود جایگزین صفحه بندی شده. اسکرول نامحدود بسیار کاربر پسند تر از سیستم صفحه بندی می باشد زیرا برای رویت مطالب بیشتر لازم نیست کاربر صفحه دیگری را لود نماید. برای ایجاد اسکرول نامحدود در صفحه می توانید از jquery استفاده نمایید. jquery پلاگین های بسیار و دستورات بسیاری برای انجام این کار دارد. در زیر ۶ پلاگین برتر انجام این کار را برای شما لیست نموده ام. برای رویت سایر مقالات به بخش مقالات jquery مراجعه نمایید.
jQuery Scroll Path
jQuery Scroll Path برای ایجاد سیستم های اسکرولی سفارشی ایجاد گردیده. با استفاده از این پلاگین می توانید هر نوع سیستم اسکرولی می خواهید ایجاد نمایید.
Superscrollorama
برای ایجاد اسکرول های انیمیشنی.
stellar.js
windows
Cool Kitten

Sticky
این پلاگین به شما این امکان را می دهد که هر موردی را که بخواهید در صفحه به صورت ثابت نمایش داشته باشد.

۵ اشتباه رایج در کد نویسی HTML

۵ اشتباه رایج در کد نویسی HTML
اشتباه در کدنویسی html
در کدنویسی اچ تی ام ال اشتباهات رایجی میان کدنویسان مبتدی تا پیشرفته وجود دارد که در مورد پسند بودن سایت، سرعت بارگذاری صفحات وب، کاهش حجم صفحات وب تاثیر گذارند، اگر چه این اشتباهات ممکن است از نظر کاربران و بینندگان سایت مخفی بمانند اما چشمهای تیز موتورهای جستجوگر مخصوصاً گوگل در رتبه سایت، بازگشت دادن کاربران به سایت و در نهایت پیشرفت وب سایت تاثیر بسزایی دارد. کد نویسی تمیز و بدون اشتباه از سوی طراحان وب سایت در روند پیشرفت و توسعه سایت تاثیر شگرفی خواهد داشت، در زیر به چند نمونه اشتباهات رایج در طراحی سایت و کد نویسی HTML می پردازیم.
تبدیل نکردن Ampersand (&)
زمانیکه در سورس بسیاری از صفحات وب نگاهی می اندازید می بینید که نماد & در آنها تبدیل به کد نشده است و این اشتباه به دلیل کپی و وارد کردن از صفحه کلید می باشد و برای رفع آن کد نویس می تواند از کد   به جای آن استفاده کند.
نمایش اشتباه Ellipsis
در زبان انگلیسی به “غیره” یا همان سه نقطه که در زبان فارسی بکار گرفته می شود Ellipsis گفته می شود و از اشتباهات عمده ای که معمولاً طراحان سایت مرتکب می شوند استفاده نادرست از سه نقطه در پایان کلمات می باشد. برای رفع این مشکل تنها کافیست بجای استفاده از سه نقطه از کد &Hellip; استفاده شود.
اشتباه استفاده از خط فاصله en
در زبان کد نویسی HTML خط های فاصله هر کدام نمایش و عملکرد خاصی را ارائه می دهند بعنوان مثال برای نمایش بازه زمانی مشخص ۱:۰۰–۲:۰۰ می بایست از کد – استفاده کرد تا موتورهای جستجوگر و مرورگرها به اشتباه منظور شما را درک نکنند.
نماد حق کپی رایت
نماد © که دور آن دایره کشیده شده است همگان می دانند که نماد کپی رایت می باشد، برای نمایش این نماد از کد © استفاده کنید.
نمایش اشتباه کد ثبت نام تجاری TM
اگر نام تجاری خود را ثبت کرده اید و می خواهید از کد ™ در کنار آن استفاده کنید کافیست کد ™ استفاده کنید.

آشنایی با ۲۲ تگ جدید در HTML5

آشنایی با ۲۲ تگ جدید در HTML5
تگ های جدید، HTML5
در اینجا به ۲۲ تگ جدید که در HTML5 نیاز به آشنایی با آنها داریم اشاره می کنیم.

یک بلاک برای مقاله ایجاد می کند.

^