مجله تکنولوژِی در صنعت

بوت استرپ (Bootstrap)

بوت استرپ با شروع کار خودش باعث شد که بسیاری از UI کاران و طراحان سایت از استاندارد های بوت استرپ برای CSS و جاوا اسکریپت استفاده کنند. اجازه دهید قبل از اینکه از ویژگی های بوت استرپ بیشتر سخن بگوییم به این سوال که بوت استرپ چیست پاسخ دهیم.

تعریف بوت استرپ

در سایت W3schools بوت استرپ اینگونه تعریف شده است:

بوت استرپ یک فریم ورک HTML,CSS و جاوا اسکریپ کاربرپسند است و توسط توسعه دهندگان سایت های ریسپانسیو استفاده می گردد.

اگر به سایت خود بوت استرپ برویم تعریف بوت استرپ اینگونه بیان شده است:

بوت استرپ؛ برای ساخت سایت های ریسپانسیو و سایت های بهینه شده برای موبایل است و یکی از پرکاربرد ترین کتابخانه های کامپوننت برای طراحان ظاهر سایت است.

بوت استرپ ابزاری متن باز برای توسعه HTML وCC و جاوا اسکریپت است و توسعه دهندگان وب میتوانند از این ابزار براحتی با استفاده و توسعه متغییر های موجود در نسخهSass و استفاده از سیستم شبکه بندی بوت استرپ برای طراحی ریسپانسیو و دستورات پیش ساخته جی کوئری سایت های خود را ایجاد و توسعه دهند.

اگر بخواهیم به زبان خودمان بگوییم بوت استرپ چیست باید بگوییم:

بوت استرپ ساخته شده تا طراحان سایت کارشان راحت تر شود. اگر میخواهید سایت ریسپانسیو شود کافیست CSS بوت استرپ را روی سرور خود کپی کنید و بعد هم به رفرنس بوت استرپ سری بزنید و کلاس ها و کدهایی که برای ریسپانسیو شدن سایت باید به HTML خود اضافه کنید را یاد بگیرید. این کدها اغلب ساده هستند و براحتی میتوان آنها را یاد گرفت.

تصور کنید بدنبال ایجاد یک اسلایدر هستید کافیست که فایل جاوا اسکریپت بوت استرپ را به سایت خود اضافه کنید و بعد هم کدهایی را که باید به فایل HTML اضافه کنید را کپی کنید. به همین سادگی یک اسلایدر زیبا و قابل ویرایش خواهید داشت.

بوت استرپ کار طراحی ظاهر سایت را برای ما بسیار ساده کرده است

همانطور که میدانید بسیاری کامپوننت های دیگر در سراسر وب وجود دارند که کار طراحی سایت را تسهیل می کنند. از معرف ترین جایگزین های بوت استرپ W3 است که در سایت W3schools ارائه شده است و مانند بوت استرپ نسخه CSS و جاوا اسکریپت دارد و مثال های بسیاری برای نحوه کار با این کامپوننت در سایت رسمی W3schools وجود دارد.سایتW3schools ادعا می کند که کامپوننت آنها ساده تر از بوت استرپ است . امتحان صحت و ثقم این موضوع را بخودتان واگذار میکنم ولی قبل از تصمیم گیری مطمئن شوید تمام امکانات هر دو را مقایسه کرده اید.

آموزش استفاده از بوت استرپ

برای استفاده از بوت استرپ ابتدا باید از طریق سایت getbootstrap.com آخرین نسخه این نرم افزار را دانلود کنید و در هاست خود آپلود نمایید . سایت رسمی بوت استرپ اعلام کرده است که کتابخانه های جی کوئری و Popper را برای استفاده در کنار بوت استرپ پیشنهاد میدهد. بعد از دانلود این فایل ها و بارگذاری آنها روی سرور باید آنها را در صفحه خود فراخوانی کنیم. استاندارد طراحی وب به ما میگوید که کد های جاوا اسکریپت را درست قبل از تگ بسته Body قرار دهیم این به دلیل آن است که اگر کد های جاوا به هر دلیلی دچار مشکل شود و یا بکندی اجرا شوند بر بارگذاری کل سایت ما تاثیر نگذارند. بنابراین درست قبل از تگ بسته Body این کد ها را اضافه کنید.

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

نکته : بوت استرپ با HTML5 همآهنگ شده است و اگر Doctype مربوط به HTML5 را در صفحه خود نداشته باشید ممکن است اجرای برخی کدها با مشکل مواجه شوند.

دانلود بوت استرپ

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

یادگیری بوت استرپ

برای یادگیری نحوه بکارگیری بوت استرپ میتوانید رفرنس بوت استرپ در سایت رسمی این شرکت getbootstrap.com را مطالعه کنید . در ضمن سایت w3schools هم آموزش بوت استرپ را بطور کامل قرار داده است و سایت وب 24 هم بزودی آموزش بوت استرپ فارسی را برای شما عزیزان آماده خواهد کرد. برای ترغیب خوانندگان گرامی به یادگیری بوت استرپ در این قسمت از مقاله چند مثال از کاربردهای بوت استرپ را ذکر خواهیم کرد. قبل هر کاری سند HTML خود را با نسخه HTML5 ایجاد کنید. سپس با توجه به اینکه بوت استرپ برای ارائه سایت برروی موبایل بهینه شده است . برای استفاده بهینه از بوت استرپ کد زیر را به بخش Head سایت خود اضافه کنید.

همانطور که قبلا گفته ایم فایل های جاوا اسکریپت لازم را هم دانلود و در سرور بارگذاری کرده و کد مربوطه را که چند خط بالاتر توضیح دادیم به فایل HTML خود بیافزایید.

نکته: بوت استرپ دو نسخه از فایل های خود ارائه میدهد: نسخه ای برای کسانی که فقط قصد استفاده از بوت استرپ را دارند و نسخه ای برای توسعه دهندگان و کسانی که میخواهند کد های بوت استرپ را ویرایش کنند. نسخه قابل ویرایش بوت استرپ با Sass نوشته شده است . برای کار با Sass میتوانید از Ruby یا استفاده کنید. خود Sass با زبان Ruby نوشته شده است ولی این موضوع باعث نمیشود که Libsass که با زبان C و C++ نوشته شده است مشکلی با ایجاد کد های Sass و یا کمپایل کردن آنها داشته باشد.

اگر بخواهیم بطور خلاصهSass را تعریف کنیم باید بگوییم که:Sass به شما امکان میدهد که با اصول و قواعد برنامه نویسی مانند تعریف متغییر یک فایلCss ایجاد کنید و در انتها آن را مانند هر فایلCss معمولی ذخیره کنید. سایت رسمیSass به آدرس http://sass-lang.com در تعریف زبان برنامه نویسیSass نوشته است : با پیچیده تر شدن کدهایCss استفاده از این کد ها دیگر برایمان جذاب نبود ، بنابراین دست به کار شدیم و زبانی ایجاد کردیم که دوباره کد نویسیCss را برای ما جذاب کند . و حقیقتا هم همینطور است کافیست در یک خط کد متغییرهای رنگ و غیره را تعریف کرده و بعد در سراسر فایلCss به آن کد رنگ دسترسی دارید و نیازی به کپی کردن مجدد خود کد رنگ نیستید. این روش کد نویسی برایCss باعث شده که توسعه کامپوننت هایی مانند بوت استرپ بسیار ساده شود زیرا شما بجای اینکه کل یک فایل پیچیدهCSS را بدنبال کد مد نظر بالا و پایین کنید کافیست متغییر را در ابتدای فایل ویرایش کنید و تمام کلاس ها وID هایی که از آن متغییر استفاده می کنند ویرایش می شوند.

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

صد صفحه کتاب به اندازه یک مثال نمیتواند مطلبی را توضیح دهد.

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

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

<thead>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>john@example.com</td>

</tr>

<tr>

<td>mary@example.com</td>

</tr>

<tr>

<td>Dooley</td>

<td>july@example.com</td>

</tr>

</tbody>

</table>

آیا بنظرتان این جدول کمی کسل کننده نیست ؟ اگر هست کافیست که کلاس آن را به table-hover تغییر دهید تا این بار با هاور شدن موس روی آن استایل هر سطر تغییر کند.

مثال دوم : کد زیر را در فایل HTML خود قرار دهید.

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>

</body>

</html>

توضیح کد :

در ابتدا ما فایل های CSS و Js مورد نیاز برای کار با بوت استرپ را فراخوانی کرده ایم. سپس در اولین خط بعد از تگ شروع Body یک تگ Div ایجاد کرده ایم که دارای یک کلاس به نام container-fluid است . این کلاس باعث میشود که محتوای این تگ Div کل عرض صفحه را اشغال کند.

کد بعدی یک هدینک ساده است و بعد از آن ما محتوای خود را در دو ستون قرار داده ایم برای اینکار دو تگ Div با کلاس col-sm-6 ایجاد کرده ایم . این کلاس به این صورت کار میکند: سیستم Grid بوت استرپ عرض صفحه را به 12 قسمت تقسیم میکند و ما میتوانیم تعیین کنیم هر کدام از تگ های ما چند ستون از این 12 ستون را اشغال می کنند ، به این ترتیب دو تگ که هر کدام 6 ستون را اشغال می کنند عرضی برابر خواهند داشت . قسمت sm در این کلاس مشخص می کند که این کد برای مونیتور های با عرض 567 پیکسل و بزرگتر بهینه شده است.

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

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

کامبیز یکشنبه 18 خرداد 1399 ساعت 06:37

0 نظر

پربازدیدترین و کاربردی ترین مطالب طراحی و سئو سایت در سال 98

کامبیز شنبه 10 خرداد 1399 ساعت 11:07

0 نظر

تفاوت SEO و SEM

هدف SEO اصلاح کدها و ساختار سایت برای بالا بردن شانس آن در کسب رتبه های بالا در نتایج جستجو است. SEO در حقیقت پروسه ای است که کمک می کند محتوای یک سایت ساده تر، راحتتر وبه دفعات در اختیار موتورهای جستجوگر قرار گیرد. SEO اصلاح تمام کدها، حذف کدهای زاید، کاهش حجم صفحات، تنظیم چگونگی نمایش متن صفحه، نحوه لینک دادن صفحات به یکدیگر، چگالی کلمات درصفحه،مطابقت کدهای سایت با استانداردهای موجود و تمام آنچه که به خود سایت مرتبط است را به عهده می گیرد. SEM مخفف Search Engine Marketing و به معنای بازاریابی با موتورهای جستجوگر است. SEM به تمام پروسه افزایش بینندگان سایت و بالا بردن فروش آن به کمک موتورهای جستجوگر گفته می شود. در حقیقف SEO بخشی از SEM است.

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

SEM مخفف Search Engine Marketing و به معنای بازاریابی با موتورهای جستجوگر است. SEM به تمام پروسه افزایش بینندگان سایت و بالا بردن فروش آن به کمک موتورهای جستجوگر گفته می شود. در حقیقف SEO بخشی از SEM است. نمونه کارهایی که در SEM انجام می شود عبارتست از:

انتخاب کلمات کلیدی
بررسی وضعیت فعلی سایت و رقبای آن
اصلاح ساختار سایت
تنظیم متاها و عناوین سایت
بهینه سازی سایر پارامترهای سایت
معرفی سایت به موتورهای جستجوگر
افزایش محبوبیت و پیوندهای سایت و مدیریت این پروسه
شرکت در برنامه های PFI
تحلیل آمار سایت
بالا بردن رتبه ها (کنترل رتبه ها و اعمال تغییرات مورد نیاز)
انتخاب موتورهای جستجوگر برای سرمایه گذاری بر آنها
بهینه سازی اخبار و Press Release

کامبیز سه‌شنبه 6 خرداد 1399 ساعت 04:39

0 نظر

تفاوت الگوریتم های گوگل

الگوریتم های گوگل پاندا و گوگل پنگوئن تمرکز خود را بر روی روش های شناسایی اسپم گذاشته بودند، گوگل پاندا وظیفه شناسایی محتوای نامناسب و کپی شده از سایت های دیگر، روش های متقلبانه در داخل سایت مانند کلوکینگ و... را به عهده دارد و گوگل پنگوئن وظیفه شناسایی لینکهای اسپم و سایت های اقدام به خریداری لینک برای بهبود رنکینگ خود می کنند را عهده دار است. الگوریتم جدید گوگل - مرغ مگس خوار بر خلاف این دو الگوریتم یک افزونه ضد اسپم نیست بلکه افزونه ای برای تجزیه و تحلیل عباراتی است که کاربر برای جستجو وارد کرده.

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

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

منبع : طراحی سایت

کامبیز سه‌شنبه 6 خرداد 1399 ساعت 04:38

0 نظر

نحوه رتبه بندی وب سایت ها

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

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

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

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

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

منبع : وبلاگ 7010

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

2. طراحی سایت شرکتی

3. طراحی سایت فروشگاهی