مدیر سایت
رفع مشکل ارتفاع یکسان ستون ها در طراحی وب
این مشکل تمامی طراحان وب بوده از زمانی که طراحی وب از صفحه بندی با table به div گرایش پیدا کرد و سوالی که برای اکثر طراحان مطرح بود آن بود که چگونه می توانم پس زمینه با 100% ارتفاع داشته باشم در لایه بندی چند ستونی.
چندین روش برای حل این مشکل وجود دارد که در این بخش یک روش آن را بیان می نمایم که ممکن است در حالات زیر مورد استفاده پروژه شما واقع شود:
- تصاویر پس زمینه، بردرها، افکت های CSS3 مورد استفاده برای ستون های شما
- بیشتر از سه ستون
- ارتفاع و عرض انعطاف پذیر
شرح مشکل از قرار زیر می باشد:
نمایش پیش فرض پس زمینه
تصویر بالا یک قالب سه ستونی می باشد که قالب ها به صورت پیش فرض به سمت چپ فلوت شده اند. هر ستون پس زمینه خود را دارد و پس زمینه به ارتفاع محتوای موجود در آن در می آید. این مورد جالی برای کاربران سایت نیست زیرا تغییر در ارتفاع باعث عدم نظم صفحات وب سایت از نظر چشمی می گردد. که HTML برای این سه لایه از قرار زیر است:
<div class="content">...</div>
<div class="sidebar">...</div>
<div class="sidebar_two">...</div>
</div>
و کد CSS تصویر بالا:
width:60%;
float:left;
padding: 20px 30px;
background: #fff;
color: #6d7072;
}
.sidebar {
width:20%;
float:left;
padding: 20px 30px;
background: #5f6673;
color: #ebeef3;
font-size: 90%;
}
.sidebar_two {
width:20%;
float:left;
padding: 20px 30px;
background: #434750;
color: #ebeef3;
font-size: 90%;
}
راه حل: استفاده از المان های کاذب pseudo-elements
زمانی که در مورد ستون های با ارتفاع یکسان صحبت می نمایم قصد بر آورده کردن دو مورد را داریم:
- ستون می بایست به اندازه محتوای خود فضا داشته باشد
- ستون ها می بایست مستقل از محتوای وجود و در صورت نیاز ارتفاع فضای خود را افزایش دهند
در مورد مثال ما، پس زمینه به اندازه فضای محتوا وجود دارد و فقط نیاز است پس زمینه می بایست تا انتهای فضای موجود کشیده شود. بنابراین در صورتی که قصد داریم پس زمینه ها تنظیمات ارتفاع متفاوتی داشته باشند، می توانیم ارتفاع را به گروه المان آن اختصاص دهیم. برای انجام این کار می بایست از pseudo-elements استفاده نماییم. برای هر کدام از ستون ها از :before استفاده می نماییم تا یک pseudo-element ایجاد گردد. با تلفیق مکان کامل absolute positionin و z-index پس زمینه را به صورتی در نظر می گیرم تا تمام بخش را در بر گیرد. کد CSS جدید از قرار زیر است:
width:60%;
}
.content {
float:left;
padding: 20px 30px;
color: #6d7072;
}
.content:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
left: 0;
background: #fff;
}
.sidebar, .sidebar:before {
width:20%;
}
.sidebar {
float:left;
padding: 20px 30px;
color: #ebeef3;
font-size: 90%;
}
.sidebar:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
left: 60%;
background-color: #5f6673;
}
.sidebar_two, .sidebar_two:before {
width:20%;
}
.sidebar_two {
float:left;
padding: 20px 30px;
color: #ebeef3;
font-size: 90%;
}
.sidebar_two:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
left: 80%;
background-color: #434750;
}
که در نهایت ستون های ما با حالت زیر در می آید:
این کد چگونه کار می کند
مطابق تصویر زیر :before به مانند المان در بر دارنده المان فعلی عمل می نماید که ارتفاع آن با توجه به CSS در نظر گرفته شده به اندازه ارتفاع المان در بر گیرنده سه ستون wrap می باشد.
نکته مهم: ستون های شما می بایست داخل المانی باشند که موقعیت آن position: relative; باشد تا absolute positioning آنها عمل نماید.
کمتر و بیشتر از سه ستون
برای انجام همین کار تا سه ستون و با استفاده از :before و :after می توانید مقاله Nicolas Gallagher را مطالعه نمایید. برای ستون های بالاتر از این تعداد نیز می توانید از "background holder" استفاده نمایید.
لینک منبع:
8 اشتباه رایج در انتخاب عنوان صفحات وب سایت
انتخاب عنوان مناسب برای وب سایت بسیار چالش بر انگیر می باشد. زیرا می بایست اهداف مختلفی را برآورده نماید و در نتیجه انتخاب عنوان مناسب برای صفحات وب سایت به دقت بالایی نیازمند است و ممکن است در اثر اشتباه شما صفحه وب سایت شما دچار آسیب گردد و اثر لازم را نداشته باشد.
بزرگترین اشتباه آن است که عنوانی برای صفحه در نظر گرفته نشود. عنوان صفحه به دلایل بسیار استفاده می گردد و در صورتی که شما عنوانی در نظر نگیرید آن موارد را از دست خواهید داد. عنوان برای موارد زیر در نظر گرفته می شود:
- تعریف صفحه در مرورگر، در بالای صفحه مرورگر
- به عنوان متن صفحات علاقه مندی شده در نظر گرفته می شود
- در نتایج جستجو به عنوان متن لینک استفاده می گردد
- موتورهای جستجو از طریق عنوان محتوای صفحه را تشخیص می دهند
در صورتی که عنوان نداشته باشید، موتورهای جستجو متن جایگزینی برای آن انتخاب می نمایند. و مطمئن باشید شما قصد ندارید موتور جستجو برای صفحات سایت شما عنوان در نظر بگیرد. در صورتی که کاربر صفحه را به علاقه مندی های خود اضافه نماید عنوان صفحه قابل تشخیص نخواهد بود و همچنین در صورتی که کاربر تب های باز بسیاری داشته باشد عنوانی برای تب مورد نظر وجود ندارد و صفحه برای کاربر قابل تشخیص نخواهد بود.
استفاده از عنوان های پیش فرض ویرایشگر
در صورتی که از ویرایشگر جهت طراحی صفحات وب سایت استفاده می نماید، ویرایشگر برای صفحات جدیدی که ایجاد می نمایید متن پیش فرضی را برای عنوان در نظر می گیرد. عنوانی به مانند "Untitled Document" که معمولا به دلیل فراموش کردن در نظر گرفتن عنوان به وجود می آید. می توانید عنوان های به این صورت را از طریق موتورهای جستجو بررسی نمایید. برای این کار عبارت زیر را در گوگل جستجو نمایید:
استفاده از عناوین کوتاه و یا بلند
موتورهای جستجو مقدار مختلفی از عنوان را در نتایج جستجو نمایش می دهند، اما گوگل به عنوان محبوب ترین موتور جستجو حداکثر در حدود 70 کاراکتر از عنوان صفحه را در نتایج جستجو نمایش می دهد. عناوین صفحات خود را کمتر از این تعداد برگزینید. عناوین کوتاه نیز هدف از محتوای صفحه را به خوبی نمی رسانند و باعث سوء تفاهم می گردند و بهتر است عنوان جامعی برای صفحه در نظر گرفته شود تا موضوع صفحه به درستی انتقال داده شود.
استفاده از مهترین عبارات در انتهای جمله
تعداد کاراکترهای عنوان مهم می باشد و همچنین مکان در نظر گرفتن کلمات کلیدی نیز در عنوان مهم می باشد. کاربران در اینترنت و مشتریان شما زمان کمی دارند و تمایل دارند مطالب را هر چه سریعتر درک نمایند. در نظر گرفتن کلمات کلیدی و مهم عنوان در ابتدای عنوان باعث شده تا کاربر سریهتر متوجه موضوع صفحه شود و همچنین در صورتی که عنوان شما در موتورهای جستجو کامل نمایش داده نشود مطمئن خواهید بود که بخش های اصلی عنوان در موتور جستجو نمایش داده می شود.
استفاده از کلمات کلیدی بسیار در عنوان صفحه
استفاده بسیار از کلمات کلیدی در عنوان باعث می شود تا عنوان صفحه به صورت اسپمی به نظر آید. سعی نمایید عنوان را برای کاربر خود در نظر بگیرید تا موتور جستجو. امروزه موتورهای جستجو درک بهتری از موضوع صفحه دارند و لازم نیست کلیه کلمات و عبارات کلیدی را در عنوان صفحه استفاده نمایید. بهتر است صفحه بسیار ظریف و کاربر پسند انتخاب گردد.
عناوین تکراری
در صورتی که دو صفحه با عنوان تکراری دارید بهتر است عنوان های تکراری را از سایت خود حذف نمایید و یکی را تغییر عنوان دهید. برای این کار می توانید از Google Webmaster Tools استفاد نمایید تا عناوین تکراری را بیابید و عناوین صفحات مختلف را تغییر دهید. این مورد معمولا در طول زمان در سایت و با زیاد شدن مقالات وب سایت پیش می آید و بهتر است سایت خود را از جهت عناوین و توضیحات تکراری دائما در Google Webmaster Tools بررسی نمایید.
اضافه کردن عنوان وب سایت در تمامی صفحات
اضافه نمودن عنوان کلی وب سایت به تمامی صفحات وبسایت باعث بلدتر شدن بی مورد عنوان صفحات و مشکلات کلمات کلیدی می گردد. وب سایت ها تمایل دارند تا برند در عنوان مطلب ذکر گردد تا سایت و برند مجموعه شناخته شود اما این کار برخی زمان ها منجر به اثرات منفی در کلمات کلیدی می گردد. پس بهتر است عنوان برند را در صفحات وب سایت هوشمندانه انتخاب نمایید و یا آن را حذف نمایید.
عدم مشاوره با متخصص سئو
عنوان صفحه مناسب برای سایت شما ممکن است حتی منجر به موفقیت شغلی شما گردد. انتخاب عناوین صفحات سایت مورد بسیار مهمی بوده و حتما می بایست تحت نظر متخصص سئو انجام گردد تا بیشترین اثر را داشته باشد زیرا که شرایط دیگری در انتخاب نام دامنه تاثیر گذار می باشد که در نظر گرفتن آن در تخصص سئوکار می باشد. برای مشاوره با متخصصین سئو دارکوب کلیک نمایید.
نکات کلیدی برای وب سایت های فروشگاهی
فروشگاه های آنلاین بسیاری در اینترنت وجود دارند و برای آنکه کاربران سایت شما را برای خرید انتخاب نمایند می بایست نکته هایی را در سایت خود رعایت نمایید. صدها روش برای بهینه سازی فروشگاه آنلاین وجود دارد و در این مقاله من یازده روش را برای شما عنوان می نمایم. در حقیقت این موارد نکات کلیدی فروشگاه های اینترنتی می باشد.
1. توضیحات کامل بنویسید
همیشه سعی نمایید توضیحات محصولات در سایت شما کافی باشد و تمام ویژگی های محصول را در بخش توضیحات آورده باشید. در صورتی که محصول منبع خاصی دارد می تواند منبع را نیز ذکر نمایید. با درج توضیحات علاوه بر آنکه به پرسش های کاربران خود پاسخ می دهید باعث افزایش رنک صفحه وب سایت خود می شوید. در حقیقت درج اطلاعات کامل محصول تاثیر مثبت بر روی سئو وب سایت شما داشته و باعث می شود محصول در موتورهای جستجو بهتر جستجو شود. البته دقت نمایید اطلاعات محصول در سایت شما با سایر سایت ها یکی نباشد زیرا باعث به وجود آمدن مشکل محتوای کپی شده می شود. سعی نمایید اطلاعات محصول را خود و به صورت متمایز با سایر سایت ها درج نمایید.
2. باکس جستجو را در دید کاربر قرار دهید
باکس جستجو را در مکانی قرار دهید تا همیشه در دسترس کاربر باشد تا در صورتی که نیاز به جستجو در سایت بود کاربر بتواند به راحتی در سایت جستجو نماید. سایت های فروشگاهی معمولا یک باکس جستجو کلی دارد که در بالای صفحه قرار می گیرد و ممکن است قابلیت جستجو در دسته بندی خاصی نیز در آن تعبیه شده باشد و همچنین باکس جستجوی پیشرفته که معمولا در اطراف لیست محصولات کار می شود. جستجوی پیشرفته معمولا به صورت فیلتر کار می شود تا زمانی که کاربر با عنوان مثال قصد داشت محصولات با خصوصیات و قیمت خاصی را رویت نماید از فیلتر مورد نظر خصوصیات مورد نظر خود را انتخاب نماید.
3. آدرس صفحات را ذکر نماید
همیشه در صفحه داخلی آدرس صفحه را ذکر نمایید تا کاربر بداند در کدام بخش از سایت قرار دارد. انجام این مورد نه تنها از سر در گمی کاربر می کاهد بلکه باعث تاثیر مثبت بر روی سئو سایت خواهد بود و موتورهای جستجو دسته بندی اطلاعاتی سایت را بهتر تشخصی می دهند.
4. نمایش تصاویر مختلف از یک محصول
سعی نمایید چندین تصویر از محصول مورد نظر خود در سایت قرار دهید و در تصاویر جنبه های مختلف محصول را نمایش دهید. به عنوان مثال تصویر محصول از زاویه های مختلف و همچنین رنگ بندی های مختلف محصول. با انجام این کار در حقیقت معرفی بهتری از محصول خود خواهد داشت و کاربر با اطمینان بیشتری خرید خود را انجام می دهد.
5. نمایش محصولات مرتبط
همیشه سعی نمایید محصولات مرتبط را در صفحه محصولات مرتبط به کاربر نمایش دهید. انجام این کار باعث حس بهتری در کاربر می گردد. البته دفت نمایید محصولاتی که به کاربر نمایش می دهید مرتبط به محصول مورد نظر باشد. به عنوان مثال در صورتی که کاربر قصد خرید تی شرت را داشته باشد بهتر است سایر تی شرت ها با رنگ ها و طرح های مختلف نمایش داده شود. معمولا محصولات مرتبط بر اساس دسته بندی یا تگ معین می گردند.
6. عملیات خرید را تا حد ممکن آسان طراحی نمایید
عملیات خرید می بایست بسیار ساده و کاربر پسند طراحی گردد و مراحل خرید می بایست به کاربر ارائه گردد و اینکه در کدام مرحله در انجام خرید قرار دارد. انجام این کار اطمینان بیشتری به کاربر می دهد و باعث می شود کاربر در مراحل خرید خود سر در گم نباشد. در حقیقتا پس از انتخاب محصول می بایست فرم عضویت و یا ورود به سایت به کاربر نمایش داده شود و پس از آن کاربر به درگاه پرداخت هدایت گردد.
7. نگهداری سبد خرید
فروشگاه را به گونه ای طراحی نمایید تا کاربر بتواند محصولات مختلفی را در سایت انتخاب نماید. معمولا در فروشگاه بخشی به عنوان سبد خرید در نظر گرفته می شود و زمانی که کاربر محصول خاصی را برای خرید انتخاب می نماید آیتم مورد نظر به سبد خرید اضافه می گردد. در انتهای کار کاربر می تواند سبد خرید خود را رویت نموده و در صورت نیاز ویرایش نماید و در صورت تایید می تواند سبد خرید موجو را پرداخت نماید.
8. پشتیبانی آنلاین مشتریان
بخشی را برای پشتیبانی آنلاین مشتریان در وب سایت قرار دهید تا زمانی که کاربران نیاز به پشتیبانی داشتند بتوانند به صورت آنلاین مشاوره بگیرند. چت آنلاین مشتریان کار کاربران را بسیار ساده می سازد و می توانند در صورت نیاز به برقراری ارتباط با فروشگاه سریعا این کار را انجام دهند. البته پشتیبانی به صورت تلفنی نیز حتما می بایست وجود داشته باشد.
9. قرار دادن بخش توضیحات در ثبت سفارش
حتما در زمان ثبت سفارش بخشی به جهت ارائه توضیحات از سوی مشتری قرار دهید تا مشتریان بتوانند موارد درخواستی خود را در آن اعلام نمایند. معمولا در زمان خرید سوالات و موارد خاصی پیش می آید و کاربران می توانند از این باکس برای این موارد استفاده نمایند.
10. کلیه خصوصیات مربوط به محصول را نمایش دهید
به عنوان مثال در صورتی که کاربر قصد خرید کامپیوتر را داردف می بایست به کاربر تنوع رنگی و خصویات محصول نمایش داده شود تا کاربر بتواند محصول با خصوصیات مورد نظر خود را خریداری نماید. در صورتی که محصول با خصوصیات مورد انتخاب کاربر قیمتی متفاوت از قیمت اصلی حصول داشت می بایست سریعا به کاربر نمایش داده شود. به عنوان مثال آیفون 32 گیگ با 64 گیگ قیمت های متفاوتی دارند و در صورتی که کاربر مدل مورد نظر را در صفحه انتخاب نمود می بایست قیمت مورد نظر سریعا نمایش داده شود.
11. جستجوی پیشرفته برای وب سایت
برای دسته بندی های مختلف خود جستجوی پیشرفته مربوط به آن دسته بندی قرار دهید. به عنوان مثال در صورتی که کاربر قصد جستجوی موبایل را داشته باشد باید بتواند در خصوصیات مختص به موبایل جستجو نماید تا بتواند سریعا محصول مورد نیاز خود را بیابد. این مورد در حقیقت در فروشگا های پیشرفته تر تعبیه می گردد و باعث رساندن سریع کاربر به محصول مورد نظر خود می گردد.
جهت ثبت سفارش سایت های فروشگاهی کلیک نمایید.ابزارهای PHP برای برنامه نویسی و توسعه وب سایت
ابزارهای بسیاری برای کد نویسی PHP وجود دارند که با استفاده از آنها می توانید راحت تر برنامه نویسی نمایید. در زیر چند مورد را که مورد استفاده دارکوب نیز می باشد به شما نمایش داده ام.
Aptana PHP
Aptana PHP ویرایشگر متن باز PHP می باشد که در کنار Aptana Studio مورد استفاده قرار می گیرد. برای اطلاعات بیشتر به online documentation about Aptana PHP مراجعه نمایید.
PHPUnit
PHPUnit ابزار کامل JUnit جهت تست و بررسی PHP 5 می باشد. ابزاری جهت تست برنامه های نوشته شده توسط PHP شما می باشد. تست کردن برنامه توسط فریم ورک PHPUnit بسیار ساده می باشد; برای نحوه استفاده به نحوه استفاده مراجعه نمایید.
Securimage
Securimage ابزاری رایگان, جهت ساخت تصاویر با کدهای رندم CAPTCHA جهت امن سازی فرم های وب سایت می باشد.
SublimeText
ابزاری برای ویرایش کدهای PHP که توسط برنامه نویسان مورد استفاده قرار می گیرد، Sublime Text دارای امکانات جانبی بسیاری در باکس کناری آن می باشد. می توانید چندین ستون/ ردیف/ پنجره در هر پروژه باز نمایید ، موس را در چندین جای مختلف قرار دهید، کلیدهای میانبر برای آیتم های مختلف تعریف نمایید و سایر موارد. ویژگی مورد علاقه من مدیریت بسته ها می باشد ، که با برنامه نویس امکان نصب پلاگین های مختلف را می دهد تا از تابع های مختلفی استفاده نماید.
بسته های مختلف از بابت معرفی (سایر موارد را می توانید در این آدرس بیابید https://sublime.wbond.net/):
- phpDocumenter (ایجاد تالیفات حرفه ای)
- Alignment (مرتب سازی کدها)
- PHP Completions Kit (تکمیل کننده پارامترها؟)
- Automatic Backups (نگه داشتن فایل بک آپ همه چیز)
- Retro Computer Themes (قالب نماشی مترو)
- Bracket Highlighter (های لایت کردن براکت ها)
- LastModifiedIndicator (نمایکشگر تغییرات فایل)
Composer
در صورتی که قصد استفاده از کتابخانه های محبوب PHP را دارید می توانید از این ابزار استفاده نمایید. به راحتی می توانید فایلcomposer.json در ریشه اصلی پروژه خود ایجاد نموده, و یک دستور را اجرا نمایید, و کلیه ارتباط ها بارگذاری می گردند و آماده استفاده می باشند. کتابخانه های بسیار در https://packagist.org
Git/SVN/Version Control
ابزاری جهت استفاده در پروژه های تیمی. در صورتی که چندین نفر بر روی یک فایل کار می نمایند و نیاز به بازگردانی به نسخه های قبلی باشد استفاده از این ابزار بسیار مناسب خواهد بود. به شما پیشنهاد می نمایم در مورد نحوه استفاده و امکانات به Git مراجعه نمایید.
PHP Debugbar
https://github.com/maximebf/php-debugbar
ارسال اطلاعات رفع عیب و صفحه کنسول مرورگر. خروجی var_dump()ing برای شما ارسال خواهد شد, Jpop. این ابزار شبیه به FirePHP می باشد اما استفاده از آن بسیار ساده تر می باشد. این ابزار شبیه به Monolog می باشد, که اطلاعات رفع عیب PHP را به صورت پیچیده تر به خروجی ارسال می نماید.
Faker
https://github.com/fzaninotto/Faker
کتابخانه بسیار جالبی از اطلاعات پیش فرض که می توانید از آن استفاده نمایید — نام, آدرس و سایر موارد.
Geocoder
https://github.com/geocoder-php/Geocoder
ابزاری بسیار مناسب برای به کار گیری توابع مربوط به مکان که به مانند Google, Bing و MapQuest کار می نماید.
Directus
Directus فریم ورک مدیریت محتوا نوشته شده بر پایه PHP می باشد که به شما امکان تغییر نحوه دریافت، پردازش و نمایش محتوا را می دهد. ;کافی است دستورهای SQL خود را بنویسید تا Directus سایر کارها را برای شما انجام دهد. در حقیقت می توانید از آن به عنوان یک سیستم مدیریت محتوا استفاده نمایید.
نکاتی که شما می بایست در مورد طراحی وبسایت های ریسپانسیو بدانید
تاریخچه طراحی وب سایت ریسپانسیو به سال 2010 بر می گردد که از آن زمان این نوع سایت ها پا به عرصه ظهور نهاد. اما در طول این سه سال تغییراتی در طراحی سایتهای ریسپانسیو که توسط طراحان وب انجام میگرفت به وجود آمد. در بخش زیر می توانید مقاله به زبان اصلی را ار سایت ویکی پدیا در خصوص این نوع سایت ها مطالعه نمایید.
طراحی ریسپانسیو امروزه بسیار گسترش پیدا کرده که به دلیل استفاده بسیار و در حال افزایش کاربران از موبایل و تبلت برای رویت وب سایت می باشد. طبق این منبع در سال 2012 55% از کاربران در سال 2012 از موبایل برای مرور وب استفاده می کرده اند و 31 درصد از کاربران اذعان داشتند که وسیله پیش فرض مرور وبشان موبایل می باشد. پس در صورتی که در مورد طراحی وب سایت ریسپانسیو سوالی دارید ادامه دهید.
طراحی ریسپانسیو چیست؟
قبل از همه باید بدانید وب سایت ریسپانسیو و یا واکنش گرا چیست. وب سایت واکنش گرا وب سایتی است که خود را سازگار با سایز صفحه نمایش کاربر می سازد. به دلیل استفاده بسیار از تبلت و مرورگرهای موبایل برای مرور وب طراحان وب مجبور شدند سایت را به گونه ای طراحی نمایند که در صفحه کوچک موبایل به خوبی نمایش داده شود. به همین دلیل از media queries استفاده شد تا سایر دستگاه کاربر را مشخص نماید و از تصاویر و صفحه بندی انعطاف پذیر در سایزهای مختلف استفاده شد.
طراحی ریسپانسیو به معنی سایت نسخه موبایل نیست
برای برخی سایت ها به صورت جداگانه نسخه ای برای موبایل طراحی می گردد و زمانی که کاربر با موبایل سایت را مشاهده می نماید به آدرس دیگری هدایت می شود که نسخه مخصوص موبایل وب سایت می باشد. ولی در طراحی ریسپانسیو کاربر سایت را در همان آدرس و با ترکیب مناسب موبایل مشاهده می نماید و کاربر به آدرس دیگری ارجاع داده نمی شود. که بر طبق نظر گوگل طراحی ریسپانسیو بهترین نوع برای ایجاد نسخه سازگار با موبایل وب سایت است.
جعبه های شناور
جعبه ها و یا باکس های شناور به پیاده سازی سایت ریسپانسیو کمک می نماید. به این صورت که صفحه به ستون های مختلف شناوری تقسیم می گردد و زمانی که عرض صفحه کوچک شده ستون ها بر روی هم حرکت می نمایند و کاربر کافی است در صفحه اسکرول عمودی نماید تا کلیه مطالب را مطالع نماید. المان هایی از صفحه که در حالت عادی عرض بیشتری دارند با توجه به تغییر عرض صفحه تغییر سایز می کنند تا در عرض مورد نظر بدون نیاز به اسکرول افقی یه خوبی نمایش داده شوند.
تصاویر و فونت ها نیز می بایست ریسپانسیو باشند
استفاده از تصاویر در سایت ریسپانسیو به خودی خود آنها را ریسپانسیو نمی نماید. توسط برخی از کتابخانه ها نظیر Bootstrap می توان این کار را به صورت اتوماتیک انجام داد. برای فونت ها نیز می توان از rems به جای px استفاده نمود. با تعیین سایز فونت صفحه به صد درصد
می توانید از استفاده نمایید تا سایز فونت ها را مطابق با عرض صفحه تعیین نماید.
استفاده از فریم ورک ها همه چیز را ساده می سازد
در دنیای ریسپانسیو فریم ورک هایی وجود دارند که با استفاده از آنها می توانید لایه بندی و قالب سایت خود را طراحی نماید. در حقیقت قالب هایی هستند که موارد پیش فرض در آنها رعایت گردیده و شما مطمئن خواید بود که سایت شما با مرورگرهای مختلف سازگاری کامل دارد. برخی از این فریم ورک ها به وصورت کامل طراحی شده اند و می توانید با تغییرات کوچکی در آن قالب مورد نظر خود را پیاده سازی نمایید. در زیر چند نمونه را برای شما آورده ام:
ایمیل ها نیز می توانند ریسپانسیو باشند
با توجه به افزایش استفاده از موبایل برای چک کردن و بررسی ایمیل، ایمیل های ارسالی نیز می بایست در موبایل ظاهر مناسبی داشته باشند. می توان با استفاده از استفاده از المان های خاصی ایمیل را نیز ریسپانسیو و سازگار با عرض صفحه نمود. همچنین می توان با استفاده از امکان جعبه های شناور و بدون استفاده از کتابخانه خارجی ایمیل های ریسپانسیو طراحی نمود.
جهت هر گونه مشاوره در زمینه طراحی و ساخت وب سایت ریسپانسیو و سازگار با موبایل با دارکوب تماس حاصل فرمایید.
تخفیف ویژه به مناسبت عید نوروز 1393
با سلام و تبریک عید نوروز 1393 و فرا رسیدن سال جدید. دارکوب تخفیف ویژه 20% را از 17 اسفند 1392 لغایت 17 فروردین 1393 برای خدمات طراحی و بهینه سازی وب سایت و خدمات هاستینگ خود در نظر گرفته و در صورتی که سفارش خود را در این تاریخ ثبت نمایید 20% تخفیف برای کلیه سفارشات شما در نظر گرفته می شود.
برای ثبت سفارش طراحی سایت کلیک نمایید
برای ثبت سفارش دامنه و هاستینگ کلیک نمایید
پس از ثبت سفارش 20% تخفیف در تاریخ ذکر شده در نظر گرفته خواهد شد.
لحظه تحویل سال به ساعت رسمی جمهوری اسلامی ایران. ساعت 20 و 27 دقیقه و 7 ثانیه روز پنج شنبه 29 اسفند 92 میباشد. سال جدید سال اسب می باشد که امیدواریم سال جدید برای کلیه عزیران سالی پر از برکت و سلامتی باشد.
پیشگویی های سال 1393 :
سال 1393 هفتمین سال از دوره اثنی عشری ست که آن را به ترکی آت نامیده و معتقدند که حوادث سال با طبع اسب هماهنگی دارد. خصوصیات اسب، شخصیت ملی مردم چین است، که برای پیشرقت خود مصرانه و باپشتکار تلاش می کنند. او حیوانی پرانرژی، روشن، دلسوز، مهربان، باهوش، و توانا است.
قدرت سایت های تک صفحه ای و ریسپانسیو
در صنعت طراحی وب سایت همیشه این شک وجود دارد کاربران اسکرول می نمایند و یا خیر. قبل از این سایت ها به گونه ای طراحی میشد تا کاربر تمام موارد مورد نیاز را بدون اسکرول در صفحه نمایش ببیند بدون اینکه نیاز به اسکرول نمودن باشد و این ایده در طراحی های قدیمی مد نظر قرار داده میشد. اما امروز وضع عوض شده و سایت های تک صفحه ای به سایت های صفحه به صفحه برتری دارند.
بخش بالای روزنامه
قبلا ایده آنکه سایت ها بدون اسکرول طراحی گردند بر آن بود که بخش بالای روزنامه مهترین جای آن بود و اکثر کاربران کلیه آیتم های بالای صفحه اصلی را مطالعه می نمودند و روزنامه به صورت تا خورده بود و کاربران می بایست سایر مطالب را در صفحات بعدی مطالعه می نمودند و این قضیه باعث می شد تا در بالای صفحه روزنامه ها کلیه موارد مهم قرار گیرند. سایت ها نیز به این صورت طراحی می گردید و صفحه بدون اسکرول و یا با اسکرول کمی بسته میشد و کاربر برای رویت سایر مطالب می بایست به صفحات دیگر مراجعه می نمود. قبلا در صورتی که سایت اسکرول زیادی داشت جزو ایرادات آن به حساب می آمد و طراحان مجبور بودند صفحات خود را حتی الامکان بدون نیاز به اسکرول طراحی نمایند.
سایت های تک صفحه ای
سایت های تک صفحه ای ارتباط بهتری را با بازدید کنندگان برقرار می نمایند و آیتم ها به گونه ای بهتر با کاربر ارائه می شوند و همچنین لازم نیست کاربر برای رویت مطالب مورد نیاز خود به صفحه دیگری مراجعه نماید. در حقیقت سایت های تک صفحه ای فعالیت وب سایت را به گونه ای داستان وار به کاربر ارائه می نماید. امروزه کاربران با سایت های اسکرولی کاملا آشنا هستند و با توجه به استفاده زیاد از موبایل و تبلت برای مرور وب سایت های تک صفحه ای به نسبت سایت های صفحه به صفحه بسیار کاربر پسند تر هستند و کاربر برای رویت مطالب مورد نیاز خود کافی است در صفحه اسکرول نماید. همچنین در صورتی که سایت تک صفحه ای نسخه موبایلی و ریسپانسیو داشته باشد نیازی نیست کاربر برای رویت مطالب بزرگنمایی نماید و کافی است صفحات را به صورت عمودی اسکرول نماید. در حقیقت ایده سایت های تک صفحه ای از مرورگرهای موبایل و تبلت به وجود آمد زیرا با صفحه لمسی که دارند اسکرول کردن را برای کاربر خوشایندتر از کلیک کردن می سازد.
سایت های تک صفحه ای از نظر موتورهای جستجو نیز مزیت دارند زیر کاربر مدت زمان بیشتری را در صفحه اصلی سایت زمان صرف می نماید و این باعث بالا رفتن اعتبار صفحه می شود. امروز مدت زمانی که کاربر در صفحات سایت صرف می نماید جزو یکی از مهترین رنکینگ های موتورهای جستجو می باشد.
نمونه ای از سایت های تک صفحه ای سایت http://sitedar.com می باشد که به تازگی توسط دارکوب طراحی گردیده است. این سایت تک صفحه ای ریسپانسیو ( سازگار با موبایل ) می باشد و در صورتی که با موبایل و یا تبلت سایت مشاهده شود صفحه بندی آن برای مرورگر موبایل تغییر پیدا می نماید. سایت های تک صفحه ای ریسپانسیو ارزش بسیاری در موتورهای جستجو دارند و در صورتی که بهینه سازی سایت تک صفحه ای به درستی انجام شود سایت به سرعت در موتورهای جستجو رنک می گیرد. زیرا کاربران بسیاری از موبایل و تبلت برای رویت سایت استفاده می نمایند و با توجه به ظاهر مناسب سایت ریسپانسیو در این مرورگرها کاربران به مرور سایت ادامه می دهند.
حذف تگ از HTML توسط PHP - عملیات عکس strip_tags
$content = '';
if (!is_array($tags)) {
$tags = (strpos($str, '>') !== false ? explode('>', str_replace('<', '', $tags)) : array($tags));
if(end($tags) == '') array_pop($tags);
}
foreach($tags as $tag) {
if ($stripContent) {
$content = '(.+|\s[^>]*>)|)';
$str = preg_replace('#|\s[^>]*>)'.$content.'#is', '', $str);
}
return $str;
}
تبدیل وب سایت به برنامه و اپلیکیشن موبایل iPhone و Android
ساخت اپلیکیشن موبایل را می توانید از پایه توسط برنامه نویس اندرویید و IOS انجام دهید و اپلیکیشن خود را طراحی نمایید. اما ابزارهایی برای تبدیل وب سایت به اپلیکیشن وجود دارند که به راحتی با استفاده از آنها می توانید وب سایت خود را به اپلیکیشن تبدیل نمایید.
برای تبدیل وب سایت به برنامه موبایل مخصوص iPhone و Android ابتدا می بایست نسخه موبایلی وب سایت خود را تهیه نمایید که برای پیاده سازی نسخه موبایلی سایت به شما پیشنهاد می نمایم سایت خود را ریسپانسیو نمایید. پس از تهیه نسخه موبایلی وب سایت به سایت www.appypie.com/convert-website-to-mobile-apps مراجعه نموده و آدرس سایت موبایلی و یا ریسپانسیو خود را درج نمایید. در صورتی که سایت شما نسخه موبایلی نداشته باشد این سایت به صورت خودکار نسخه موبایلی سایت شما را تهیه می نماید که البته کیفیت مناسبی ندارد، پس بهتر است با مراجعه به متخصص طراحی نسخه موبایل سایت سازگار با موبایل طراحی شود.
به صفحه دیگری هدایت می شوید که در این بخش می بایست اطلاعات لازم در مورد برنامه و وب سایت خود را تکمیل نمایید و همچنین فایل لوگو و پس زمینه برای برنامه خود انتخاب نمایید. همچنین می توانید از تصاویر موجود در کتابخانه همین سایت استفاده نمایید.
پس از تکمیل مشخصات برنامه در مرحله اول می بایست اطلاعات مربوط به برنامه را ایجاد نمایید. در این مرحله در بخش های بالا 5 منو به صورت پیش فرض برای شما ایجاد شده اند که با کلیک بر روی هر یک می توانید بخش مورد نظر را ویرایش نمایید. بر روی هر کدام از کلیدهای بالا About , Contact , Call Us , Quote و website کلیک نموده و اطلاعات مربوط به بخش مورد نظر را تکمیل نمایید. در صورتی که قصد حذف منوی خاصی را داشته باشید می توانید بر روی علامت x بالای صفحه مورد نظر کلیک نمایید و همچنین در صورتی که قصد اضافه کردن صفحه به صفحات موجود را داشته باشید می توانید نوع بخشی که قصد ایجاد آن را دارید از بخش Choose from following pages to add to your Mobile App انتخاب نموده و سپس صفحه مورد نظر خود را تکمیل نمایید. سمت راست نیز پیش نمایش برنامه به شما نمایش داده می شود که می توانید ظاهر برنامه خود را در موبایل مشاهده نمایید.
سایر مقالاتی که ممکن است علاقه مند باشید
- طراحی سایت ریسپانسیو چیست
- در مورد طراحی وبسایت های ریسپانسیو بدانید
- طراحی نسخه ریسپانسیو سایت
- چرا باید ریسپانسیو طراحی سایت کنیم
- طراحی وب سایت ریسپانسیو برای جلب توجه بیشتر
- دلیل پذیرش طراحی سایت ریسپانسیو
- طراحی واکنشگرا
- تاریخچه طراحی سایت ریسپانسیو
- تست گوگل برای نسخه موبایلی و ریسپانسیو سایت
* دقت نمایید حداقل تعداد صفحات برنامه شما می بایست بیشتر از 4 صفحه باشد.
پس از تکمیل این مرحله می بایست در مرحبه بعدی آدرس ایمیل خود را درج نمایید تا اطلاعات مربوط به برنامه برای شما ارسال گردد.