مدیر سایت - دارکوب

جمعه, 26 مهر 1392 17:41

اجرا کردن ویدئو توسط html5 در وب سایت

قرار دادن ویدئو در صفحه توسط html5 بسیار آسان است و از قرار دادن تصویر در صفحه سخت تر نیست. در این مقاله مزایای استفاده از ابزار اجرا کننده داخلی ویدئو مرورگر بحث خواهد شد. به راحتی می توانیم با استفاده از تگ <video> و بدون استفاده از هیچ پلاگین خارجی ویدئو را اجرا نماییم.

پیش نیازها

می بایست از Chrome, Safari یا Internet Explorer 9+ استفاده نمایید. در مرورگرهای Firefox و Opera این کد به دلیل تداخل با ابزارهای داخلی مرورگر کار نمی کند. برای انجام این کار می بایست فرمت ویدئو شما .mp4 باشد.

ایجاد فریم ورک اصلی

کد زیر برای ایجاد فریم ورک ویدئو پلیر می باشد. این کد یک لایه بندی ساده برای ویدئو می سازد. کد html چیزی است شبیه به این:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">     
 <title>HTML5 Video Player</title>     
 <style>         
 body {                  font-family: sans-serif;                  border: 0;                  margin: 0;                  padding: 0;          }       
   header {                  text-align: center;          }        
  #player {                  display: table;                  width: 100%;                  padding: 4px;          }         
 #player > div {                  display: table-cell;                  vertical-align: top;          }      
</style> 
 </head>  
<body>      
<header>        
  <h1>HTML5 Video Player</h1>     
 </header>    
  <section id="player">         
 <div>                  <!-- The video will appear here-->        
  </div>      
</section>  
</body> 
 </html>

هم اکنون کادر ویدئو ایجاد گردید می بایست ویدئو به صفحه اضافه شود.

استفاده از تگ video برای اضافه نمودن ویدئو به صفحه

کد اضافه نمودن ویدئو به صفحه وب سایت کمی پیچیده تر از اضافه کردن تصویر به وب سایت می باشد برای اضافه کردن ویدئو به صفحه سایت می بایست از تگ <video> استفاده نمایید.

<video src="[ YOUR VIDEO ].mp4"  controls  width="720" height="480">
  
Your browser does not support the video element, please #D try <a href="videos/VID_20120122_133036.mp4">downloading the video instead</a>  
</video>

در بخش src می بایست آدرس فایل ویدئو داده شود. بخش controls اعلام می نماید که شما می خواهید ویدئو ابزارهای استاندارد کنترل ویدئو را داشته باشد. width و height نیز طول و عرض ویدئو در صفحه می باشند و در صورتی که مرورگر از المان <video> پشتیبانی ننماید متن داخل المان <video> نمایش داده می شود.

نتیجه

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

فعال سازی شده در html در طراحی سایت

تگ شده تحت

پنج شنبه, 25 مهر 1392 11:49

پلتفرم جدید ساخت وبلاگ بدون نیاز به دیتابیس

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

از زبان خالق:

در حدود یک سال پیش، در نظر داشتم یک بلاگ وردپرس راه اندازی نمایم. به عنوان شخصی که چندین سال بر روی وردپرس تجربه داشته ام، مورد جدیدی برای من نبود. وردپرس در این سال ها رشد بسیاری نموده است، و امروزه از آن به عنوان یک سیستم مدیریت محتوای کامل یاد می شود تا پلتفرم ساخت وبلاگ. سیستم ایجاد وبلاگی که تمرکز آن بر ارسال ها بود و بسیار ساده تر از وردپرس بود را در نظر گرفتم. در نوامبر 2012 مطلبی با عنوان ابزار جدید ایجاد بلاگ ghost منتشر نمودن و مخاطبان بسیاری پیدا نمود که نظرات مثبتی بر روی آن داشتند. در آپریل 2013 تصمیم گرفتم نسخه پروتایپ آن را جهت استفاده در معرض عموم قرار دهم و آن جواب داد. بعد از 5 ماه کار بر روی ghost هم اکنون توسط کاربران آن در حال استفاده می باشد. تفاوت اصلی که ghost با سایر سیستم های ساخت وبلاگ دارد آن است که این نرم افزار تنها با جاوا اسکریپت پیاده سازی شده. با توجه به این مورد شما می توانید محدودیت های وب را نداشته باشید. به عنوان مثال یک وب سایت کامل را می توانید بر روی کول دیسک خود داشته باشید، موردی که قبلا قادر به انجام آن نبودیم. تمرکز اصلی Ghost بر روی ارسال و انتشار مطالب است. همه چیز در این نرم افزار برای ایجاد ساده مطالب در وبلاگ ، سایت خبری و روزنامه بهینه سازی شده.

طراحی سایت توسط ghost

در صورتی که می خواهید بیشتر در مورد این نرم افزار بدانید به سایت رسمی Ghost مراجعه نمایید.

فعال سازی شده در مقالات آموزشی طراحی وب سایت

تگ شده تحت

سه شنبه, 23 مهر 1392 17:00

ساخت منو وب سایت سازگار با موبایل توسط css

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

هدف

هدف این مقاله چگونگی تبدیل یک لیست منو به منو آبشاری می باشد که به فضای بسیار کنتری برای نمایش نیازمند است.

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

Nav HTML Markup

در بخش کد html منو توضیح داده خواهد شد. تگ <nav> برای ایجاد منو آبشاری مورد نیاز می باشد. این را در ادامه مقاله توضیح خواهم داد. کلاس current منوی فعلی که در آن هستیم را نمایش می دهد.

<nav class="nav">
<ul>
<li class="current"><a href="#">Portfolio</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Print Media</a></li>
<li><a href="#">Graphic Design</a></li>
</ul>
</nav>

CSS

کد ایجاد منوی آبشاری بسیار ساده می باشد بنابراین توضیح خاصی برای آن ندارم. فقط دقت نمایید از display:inline-block به جای float:left در تگ <li> استفاده شده. بنابراین با text-align به UL می توانید منوهای خود را راست چین، چپ چین و یا وسط چین نمایید.

/* nav */
.nav { position: relative; margin: 20px 0; }
.nav ul { margin: 0; padding: 0; }
.nav li { margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block; }
.nav a { padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; }
.nav a:hover { color: #000; }
.nav .current a { background: #999; color: #fff; border-radius: 5px; }

وسط چین و یا راست چین

به طوری که در بخش قبل توضیح داده می شود می توانید جهت منوهای خود را عوض نمایید:

/* right nav */
.nav.right ul { text-align: right; }
/* center nav */
.nav.center ul { text-align: center; }

پشتیبانی از اینترنت اکسپلورر

تگ html5 که در این کد استفاده شده یعنی <nav> در اینترنت اکسپلورر نسخه 8 با پایین پشتیبانی نمی شود. برای پشتیبانی css3-mediaqueries.js (یا respond.js) و html5shim.js استفاده نمایید. در صورتی که نمی خواهید از این کتابخانه ها استفاده نماید می توانید <nav> را با <div> جایگزین نمایید.

Responsive

هم اکنون که می بایست این منوی ایجاد شده را با استفاده از media query سازگار با نسخه موبایل نمایید. در رزولوشن کمتر از 600px از تگ nav استفاده شده بنابراین می توان تگ <ul> را به بالای صفحه انتقال داد. تمامی <li> توسط display:none مخفی شده اند. اما .current به صورت بلاک نمایش داده می شود. اما در هاور nav کلیه <li> ها به حالت display:block خواهد بود. آیکون به .current اضافه شده تا منوی فعال مشخص گردد.

@media screen and (max-width: 600px)
{ .nav { position: relative; min-height: 40px; }
.nav ul { width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.nav li { display: none; /* hide all <li> items */ margin: 0; }
.nav .current { display: block;
/* show only current <li> item */
}
.nav a { display: block; padding: 5px 5px 5px 32px; text-align: left; }
.nav .current a { background: none; color: #666; }
/* on nav hover */
.nav ul:hover { background-image: none; }
.nav ul:hover li { display: block; margin: 0 0 5px; }
.nav ul:hover .current { background: url(images/icon-check.png) no-repeat 10px 7px; }
/* right nav */
.nav.right ul { left: auto; right: 0; }
/* center nav */
.nav.center ul { left: 50%; margin-left: -90px; } }

فعال سازی شده در css در طراحی سایت

سه شنبه, 23 مهر 1392 12:19

طراحی قالب وب سایت سازگار موبایل (ریسپانسیو)

طراحی قالب وب سایت سازگار با موبایل کار ساده ای نیست و نیاز به تجربه فراوانی دارد. در صورتی که تجربه ای در ساخت سایت سازگار با موبایل ندارید این کار را به طراحی سایت دارکوب بسپارید. طراحی سایت سازگار با موبایل بسیاری از هزینه های شما در مقایسه با طراحی جداگانه سایت برای موبایل را پایین می آورد. برای ساخت سیستم ستون بندی می بایست جهت صفحه بندی کلاس ستون اول و آخر را بدانید. البته بدون دانستن ستون اول و آخر نیز می توانید ستون بندی سازگار با انواع مرورگرها را داشته باشد. در این مقاله می خواهم به شما نحوه ساخت سیستم ستون بندی سازگار با موبایل توسط nth-of-type دستور css را آموزش دهم. لازم نیست کلاس ستون آخر و اول داشته باشید و یا تعداد ستون ها را بدانید، زیرا همه کارها توسط viewport انجام می شود. زیرا در سایزهای مختلف مرورگر و رزولوشن صفحه قالب به ستون های مختلف تبدیل می گردد.

بروز خطا در استفاده از کلاس اول و آخر

به صورت پیش فرض می بایست کلاس ستون اول و آخر (.first و .last) را به کدهای خود اضافه نماییم ولی انجام این کار برای پیاده سازی قالب مناسب برای رزولوشن های مختلف مشکل ایجاد می نماید.

طراحی سایت موبایل

استفاده از nth-of-type

دستور زیر به شما امکان ایجاد فلوت و مارجین را بدون استفاده از (.first و .last) می دهد.

:nth-of-type(An+B)

- دستور زیر ستون های 4 ام از ستون 1 را انتخاب می نماید.

.grid4 .col:nth-of-type(4n+1)

- دستور زیر ستون های3 ام از ستون 1 را انتخاب می نماید.

.grid3 .col:nth-of-type(3n+1)

- دستور زیر ستون های 2 ام از ستون 1 را انتخاب می نماید.

.grid2 .col:nth-of-type(2n+1)

طراحی سایت موبایل

.grid4 .col:nth-of-type(4n+1), .grid3 .col:nth-of-type(3n+1), .grid2 .col:nth-of-type(2n+1)
{ margin-left: 0; clear: left; }

سازگاری با موبایل توسط Media Queries

/* col */
.col { background: #eee; float: left; margin-left: 3.2%; margin-bottom: 30px; }
/* grid4 col */
.grid4 .col { width: 22.6%; }
/* grid3 col */
.grid3 .col { width: 31.2%; }
/* grid2 col */
.grid2 .col { width: 48.4%; }

تبدیل 4 ستونه به 3 ستونه

برای تبدیل 4 ستونه به 3 ستونه که عرض آن کمتر از 740px می باشد

1. تبدیل عرض .grid4 .col به 31.2%

2. بازنویسی left margin و clear

3. ست نمودن مجدد left margin و clear property توسط دستور nth-of-type(3n+1) برای ایجاد قالب سه ستونه

@media screen and (max-width: 740px)
{ .grid4 .col { width: 31.2%; }
.grid4 .col:nth-of-type(4n+1) { margin-left: 3.2%; clear: none; }
.grid4 .col:nth-of-type(3n+1) { margin-left: 0; clear: left; }
}

تبدیل 4 ستونه و 3 ستونه به 2 ستونه

برای تبدیل 4 ستونه به 3 ستونه و 2 ستونه که عرض صفحه کمتر از 600px باشد نیز به همان روش بالا اقدام نمایید.

@media screen and (max-width: 600px)
{ /* change grid4 to 2-column */
.grid4 .col { width: 48.4%; }
.grid4 .col:nth-of-type(3n+1) { margin-left: 3.2%; clear: none; }
.grid4 .col:nth-of-type(2n+1) { margin-left: 0; clear: left; }
/* change grid3 to 2-column */
.grid3 .col { width: 48.4%; }
.grid3 .col:nth-of-type(3n+1)
{ margin-left: 3.2%; clear: none; }
.grid3 .col:nth-of-type(2n+1)
{ margin-left: 0; clear: left; }
}

تمام عرض کردن تمامی ستون ها

برای تمام عرض کردن کلیه ستون ها که رزولوشن صفحه آنها از 400px: کمتر است می بایست به روش زیر اقدام شود.

@media screen and (max-width: 400px)
{
.col { width: 100% !important; margin-left: 0 !important; clear: none !important; }
}

مشکلات اینترنت اکسپلورر

هم media queries and nth-of-type توسط اینترنت اکسپلورر 8 به پایین پشتیبانی نمی شود. شما می توانید از selectivizr.js برای nth-of-type و respond.js برای media queries به جهت پشتیبانی اینترنت اکسپلورر استفاده نمایید. هر دوی selectivizr.js and respond.js متاسفانه به یکدیگر به خوبی کار نمی کنند بنابراین ستون بندی ها از 4 به 3 و 2 تغییر نمی یابند. البته فقط در اکسپلورر.

فعال سازی شده در مقالات آموزشی طراحی وب سایت

تگ شده تحت

یکشنبه, 21 مهر 1392 14:47

نمایش تصویر و نام نویسنده در نتایج گوگل

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

روش اول: لینک کردن محتوای سایت با گوگل پلاس توسط آدرس ایمیل معتبر

در صورتی که آدرس ایمیل از سایت مورد نظر ندارید می بایست روش دوم را انجام دهید.

1. بررسی نمایید تا در سایت مورد و با نام دامنه مورد نظر آدرس ایمیل داشته باشید.

2. در سایت مورد نظر می بایست در مقالاتی که مربوط به شماست توسط نویسنده داشته باشید. به عنوان مثال "By احمد بالوی پور" یا "Author: احمد بالوی پور"

3. صفحه Authorship گوگل را مشاهده نموده و آدرس ایمیل خود را ارسال نمایید. فرقی ندارد در این دامنه چند مقاله دارید می بایست این کار را یک بار برای هر دامنه انجام دهید. ایمیل شما در بخش Contributor to گوگل نمایش داده می شود.

4. برای آنکه بدانید از پروفایل شما چه اطلاعاتی نمایش داده می شود می توانید از آدرس structured data testing tool آن را بررسی نمایید. به عنوان مثال در صورت وارد نموده آدرس چیزی شبیه به این برای شما نمایش داده خواهد شد.

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

روش دوم: برقراری ارتباط بین مقاله و پروفایل گوگل پلاس توسط لینک دادن

1. ایجاد یک لینک از صفحه مقاله به پروفایل گوگل پلاس شما به صورت زیر:

<a href="[profile_url]?rel=author">Google</a>

این بخش [profile_url] را با آدرس گوگل پلاس خود جایگزین نمایید به مانند زیر:

<a href="https://plus.google.com/102470396871003930386?rel=author">Google</a

دقت نمایید لینک شما حتما می بایست شامل ?rel=author باشد در غیر این صورت گوگل متوجه لینک شما نخواهد گردید.

2. از پروفایل گوگل نیز می بایست به سایت خود لینک برقرار نمایید:

- بخش Contributor To section را ویرایش نمایید.

- در بخش Add custom link آدرس سایت خود را وارد نمایید.

- و همچنین می توانید انتخاب نمایید چه کسی لینک را مشاهده نماید.

- بر روی ثبت کلیک نمایید

* در صورتی که نمی خواهید اطلاعاتی از پروفایل شما نمایش داده شود به آدرس http://plus.google.com/me/about/edit مراجعه نموده و Help others discover my profile in search results را غیر فعال نمایید.

فعال سازی شده در طراحی سایت سئو

تگ شده تحت

شنبه, 20 مهر 1392 08:46

شرکت طراحی وب سایت در تهران‎

در صورتی که در جستجوی یک شرکت طراحی سایت در تهران می باشید دارکوب یکی از معتبرترین شرکت های طراحی وب سایت در کشور می باشد. هم اکنون 40 طراح وب سایت، برنامه نویس، سئو کار و تولید کننده محتوا به صورت حضوری و 20 نفر به صورت غیر حضوری با این مجموعه همکاری دارند. تعرفه قیمت طراحی سایت دارکوب بسیار ارزان می باشد و این مجموعه جزو شرکت های طراحی سایت ارزان در تهران می باشد. دارکوب یکی از بهترین شرکت های طراحی وب سایت در کشور می باشد که دارای پشتیبانی 24 ساعت و هفت روز در هفته می باشد. طراحی سایت اینترنتی و پشتیبانی آن نیاز به تخصص و تجربه فراوان دارد و برای آنکه وب سایت به موفقیت برسد نیاز به پشتیبانی تیمی کارآزموده و متعهد دارد.

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

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

مصاحبه زنده تلویزیونی احمد بالوی پور موسس دارکوب در برنامه جوان موفق

شرکت های طراحی وب بسیاری در ایران وجود دارند. اکثر شرکت های طراحی سایت در تهران هستند. طراحی سایت دارکوب از سال 1381 فعالیت خود را در زمینه طراحی سایت آغاز نمود و در این سال ها و تا زمان نوشتن این مقاله در حدود 3000 سایت طراحی نموده است. در صورت تمایل نمونه کارهای طراحی سایت دارکوب را مشاهده نمایید. تخصص اصلی برنامه نویسی دارکوب برنامه نویسی php می باشد و در پروژه های خود معمولا از سیستم های مدیریت محتوای جوملا و وردپرس استفاده می نمایید. این شرکت همچنین اقدام به آموزش طراحان وب از طریق تهیه و ارائه مقالات در زمینه طراحی صفحات سایت و بهینه سازی سایت از طریق ارائه مقالات مفید و معتبر نموده است که در صورت تمایل می توانید مقالات طراحی سایت دارکوب را مطالعه نمایید. دارکوب همچنین عضو گروه های برنامه نویسی و طراحی مختلفی به مانند توسعه دهندگان جوملا و وردپرس می باشد و در صورت تمایل می توانید صفحه دارکوب را در جوملا مشاهده نمایید.

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

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

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

فعال سازی شده در مقالات آموزشی طراحی وب سایت

تگ شده تحت

شنبه, 20 مهر 1392 08:45

سایت طراحی وب سایت

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

طراحی سایت رایگان آکان
ایجاد وب سایت رایگان - epage.ir
سايت ساز رايگان کاني وب

سایت سازهای ایرانی معمولا امکانات کمتری نسبت به سایت سازهای جهانی دارند. به عنوان مثال سایت سازهای ایرانی تعداد قالب های کمتری نسبت به سایت سازهای جهانی دارند، همچنین سایت سازهای ایرانی امکانات کمتری در قمایسه با سایت سازهای جهانی جهت ویرایش قالب سایت و همچنین ایجاد قالب جدید سایت دارند. در زیر برترین سایت سازهای دنیا را برای شما لیست می نمایم.

Free Website Builder | Create a Free Website | WIX

Free Website Builder | Make Your Own Website with Free Templates

Free Website Builder - Moonfruit - Total website design control

Weebly: Free website | Free blog | Create a free website

Webs - Make a free website, get free hosting

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

فعال سازی شده در مقالات آموزشی طراحی وب سایت

تگ شده تحت

شنبه, 20 مهر 1392 08:45

ساخت وب سایت توسط Webydo

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

Webydo.com یک سرویس آنلاین می باشد که به شما امکان ساخت وب سایت های html را می دهد. سرویس های بسیاری با مانند این سرویس برای ایجاد وب سایت شخصی وجود دارند اما این سرویس به شما قابلیت ساخت وب سایت برای مشتری شما را می دهد.سایت Webydo توسط نرم افزار Webydo ایجاد گردیده که به شما آزادی عمل در طراحی را می دهد. این نرم افزار ابزارهای رایگان و غیر رایگانی دارد که به شما امکان راه اندازی سایت را می دهد. به عنوان نمونه به شما امکان ثبت دامنه را می دهد اما هزینه آن را دریافت می نماید.

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

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

می توانید سایت را برای مشتری خود ایجاد نموده و از این طریق کسب در آمد نمایید و برای کمک به Webydo می توانید پروژه خود را به اشتراک بگذارید. به اشتراک گذاری پروژه انجام شده به سایر کاربران این امکان را می دهد که از پروژه طراحی شده شما برای طراحی سایت خود استفاده نمایند. این نرم افزار به قدرت و توانایی های وردپرس و جوملا نیست اما این یک سایت طراحی وب سایت می باشد که به شما امکان ایجاد ساده سایت را می دهد. این سایت همچنین به شما امکان ایجاد برند خود را می دهد که می توانی کنترل پانل این سایت را با برند خود ارائه نمایید. هدف Webydo ایجاد امکان طراحی پیکسلی سایت بدون نیاز به دانستن کد نویسی می باشد. این نرم افزار ابزار رایگانی است ولی پلن های غیر رایگانی نیز دارد که برای گرفتن 75% تخفیف می توانید از کد ProDesignerWDD278 استفاده نمایید.

فعال سازی شده در مقالات آموزشی طراحی وب سایت

تگ شده تحت

شنبه, 20 مهر 1392 08:44

ساخت گرافیک های HTML5 سایت توسط طراح وب گوگل

گوگل به تازگی نسخه بتا نرم افزار طراحی گرافیک های html5 خود را به نام Web Designer منتشر نموده است.

این نرم افزار به شما قابلیت ایجاد گرافیک ها و حرکت های html5 را می دهد که در هر نوع وسیله ای قابل اجراست. نکته قابل توجه این نرم افزار آن است که گرافیک هایی که در این نرم افزار ایجاد می شوند در تمامی سایز صفحات، هر نوع کامپیوتر، موبایل و سایر وسائل الکترونیکی قابل اجراست. توسط این نرم افزار می توانید بر طراحی خود تمرکز بیشتری داشته باشید بدون اینکه بر کد نویسی html5 و css3 نظارت نمایید. این نرم افزار به شما محیط بصری برای طراحی هر آنچه را که می خواهید می دهد، بدون آنکه نگران سازگاری خروجی با وسائل و مرورگرهای مختلف داشته باشید. در صورتی که قصد داشته باشید که خود دست به کار شوید و کد نویسی نمایید می توانید در کنار طراحی خود کد نویسی نمایید. این نرم افزار دو حالت ساخت انمیشن دارد، که در حالت ساده انیمیشن خود را صحنه به صحنه می سازید و مراقب فریم ها خواهید بود ولی در حالت پیشرفته می توانید هر المانی را در صفحه توسط لایه ها حرکت دهید. این نرم افزار همچنین به شما قابلیت های ایجاد گرافیک های 3d را می دهد. همچنین به شما قابلیت چرخش المان ها و تغییر حالت های 3d را می دهد که برای انجام این کار از قابلیت های css3 بهره می گیرد. این نرم افزار دو حالت نمایش طرح و نمایش قالب دارد که به شما هم امکان تمرکز بر جنبه طراحی و هم استفاده از قابلیت کد زنی html5 و css3 را می دهد تا بتوانید تمامی ایده های خود را پیاده سازی نمایید. به محض تغییر کد نتیجه در حالت نمایش تغییر می نماید.

نرم افزارهای بسیاری برای کد زنی html5 وجود دارند، نظیر Hype که با ما امکان ساخت گرافیک های html5 را می دهند بودن اینکه کد نویسی نماییم.

فعال سازی شده در مقالات آموزشی طراحی وب سایت

تگ شده تحت

شنبه, 20 مهر 1392 08:43

طریقه بارگذاری فروم phpbb بر روی سرور

برای بارگذاری فروم phpbb کافی است ابتدا فایل های phpbb را بر روی سرور بارگذاری نموده. سپس دیتابیس mybb را بر روی سرور ایجاد نموده و فایل دیتابیس را بر روی سرور بارگذاری نمایید. همچنین نام کاربری و رمز برای دیتابیس ایجاد شده اختصاص دهیم. سپس فایل config.php را باز نموده و موارد زیر را مطابق با اطلاعات دیتابیس خود بر روی سرور تغییر دهید:

$dbhost = 'localhost';
$dbname = 'phpbb';
$dbuser = 'root';
$dbpasswd = '';

سپس دیتابیس phpbb را بر روی سرور توسط phpmyadmin باز نموده و جدول phpbb_config باز نموده و دستور زیر را اجرا نمایید:

UPDATE phpbb_config SET config_value = 'domain_name_here' WHERE config_name = 'cookie_domain';
UPDATE phpbb_config SET config_value = 'domain_name_here' WHERE config_name = 'server_name';
UPDATE phpbb_config SET config_value = 'path_to_phpBB' WHERE config_name = 'cookie_path';
UPDATE phpbb_config SET config_value = 'domain_name_here' WHERE config_name = 'script_path';

مقدار value را مناسب با مقدارهای آدرس فروم خود تغییر دهید.

فعال سازی شده در مقالات آموزشی طراحی وب سایت

تگ شده تحت