طراحی ساده یک وب سایت نمونه کار با Bootstrap

طراحی ساده یک وب سایت نمونه کار با Bootstrap

اگر پست طراحی ساده یک وب سایت نمونه کار بر اساس اینستاگرم در فتوشاپ دیده باشید، در آن آموزش ما طریقه ایجاد یک طرح ساده و شیک با استفاده از فتوشاپ را دیدیم. در این پست می خواهیم قالب ساخته شده را به HTML و CSS تبدیل کنیم و با InstafeedJS کارهای جذابی انجام دهیم.

 

[button type=”info” size=”lg” link=”http://source.baboon.ir/portfolio_instagram/index.html”] نمایش [fa type=”eye”] [/button]

[button type=”success” size=”lg” link=”http://source.baboon.ir/portfolio_instagram.zip”] دانلود [fa type=”download”] [/button]

 


 

 

در این آموزش می خواهیم یک وب سایت برای نمونه کارهای خود با بوت سترپ درست کنیم. چند چیز قبل از شروع به آنها نیاز داریم:

 

 

اول از همه نیاز داریم که Sass را بر روی سیستم خود راه اندازی کنیم. آسانترین راه برای انجام این کار انتخاب یک آپ عالی برای زیر نظر گرفتن (watch) کدها و کامپایل آنها است. در این آموزش از Koala استفاده شده است به خاطر اینکه مجانی و در تمام پلتفرم ها قابل استفاده است و بهترین گزینه برای نصب و راه اندازی است. جایگزین هایی مثل Scout، Prepros و Compass وجود دارد. تمام اینها به اندازه کافی قابلیت های مشابه فراهم می کنند، بنابراین انتخاب با شماست!

 

قدم بعدی Bootstrap است. ما می خواهیم از بوت سترپ در سطح ابتدایی استفاده کنیم، که مسئولیت رسیدگی به بعضی از عناصر ریسپانسیو کردن صفحه بر عهده دارد. ما به طور خاص می خواهیم نسخه Sass را دانلود کنیم، بنابراین می توانیم آن را به صفحه خود اضافه کنیم و از متغیرهای قابل دسترس استفاده کنیم. به وب سایت Twitter Bootstrap رفته و آخرین نسخه از آن را دانلود کنید. (نسخه Sass)

 

حال نیاز به دریافت Instafeed.js داریم که تمام کار به دست آوردن عکس ها از اینستاگرم را انجام می دهد. توجه داشته باشید که برای کار با هر چیز در اینستاگرم نیاز client ID داریم، این کار را با ثبت نام در Instagram و پر کردن اطلاعات در بخش developer امکان پذیر می شود.

 

حال که موارد خواسته شده را داریم، پس اجازه دهید که ساخت و ساز را شروع کنیم!

 

ساختار فایل ها و پوشه ها

 

ما نیاز به ایجاد تعدادی فایل و پوشه در پروژه خود هستیم، پس کار را با ساخت پوشه های زیر در دایرکتوری پروژه خود ادامه دهید:

 

  • /css
  • /images
  • /js
  • index.html

 

در ادامه، فایل فشرده Bootstrap را که قبلا دانلود کرده اید از حالت فشرده در آورید و آن را جایی بزارید که به آسانی پیدا کنید. داخل پوشه ای که از حالت فشرده در آمده است باید پوشه ای به نام assets وجود داشته باشد. آن پوشه را باز کنید تا محتوای آن را به صورت زیر مشاهده کنید:

 

 

 

دایرکتوری fonts را در ریشه پروژه خود کپی کنید. javascripts را باز کرده و bootstrap.min.js را در داخل پوشه js پروژه خود کپی کنید. در آخر، دایرکتوری stylesheets را باز کرده و فایل bootstrap.min.js را در پوشه css کپی کنید. فایل ها و پوشه های ما باید به صورت زیر باشد:

 

 

 

خوب، حالا فایل های instafeed.min.js و Modernizr را که قبلا دانلود کرده اید در در پوشه js قرار دهید. ما فقط نیاز به راه اندازی چند چیز کوچک قبل از شروع به ساخت طرخ خود داریم.

 

راه اندازی Sass 

 

حال زمان آن است که پزوژه خود را در برنامه Sass راه اندازی کنیم. برای وارد کردن پروزه ما به Koala می توان پوشه پروژه را درون Koala درگ کرد. به اعتقاد من این فرایند مشابه با دیگر برنامه ها است بنابراین شما با هر برنامه ای که دوست دارید می توانید کار کنید.

 

اضافه کردن فایل ها

 

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

ابتدا در دایرکتوری css فایلی به نام style.scss ایجاد کنید. آنگاه در پوشه js فایل به نام app.js ایجاد کنید.

مطمئن شوید که برنامه Sass خود را refresh کرده باشید تا فایل های جدید را شناسایی کند. گاهی اوقات این کار را برنامه Sass انجام می دهد، اما بهترین کار این است که به طور دستی انجام دهید.

 

koala

 

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

 

شروع ساخت

 

فایل index.html را باز کرده و HTML های زیر را به فایل اضافه کنید:

 

 

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

 

تگ <head> شامل تگ ضروری viewport است تا نمایش داده ها به درستی انجام شود. در ادامه با تگ <title> به صفحه عنوان داده ایم و از تگ <link> برای مشخص کردن یک فونت خوشکل استفاده کرده ایم. خط بعدی شاید کمی عجیب به نظر برسد چون ما بطور مستقیم فایل style.css را ایجاد نکرده ایم. اما نگران نباشید این فایل با استفاده از کامپایلر Sass ایجاد می شود. در آخر هم Modernizr را اضافه کرده ایم.

 

تگ <body> شامل چهار عنصر دیگر است که هر کدام از بخش های طرح ما را نشان می دهند.

 

مرجع فایل های جاوا اسکریپت

 

تکه کدهای زیر را در تگ section با کلاس footer-bottom قرار دهید:

 

 

این تگ های <script> اشاره به کتابخانه های جاوا سکریپت مختلف از جمله جی کوئری از CDN گوگل که ضروری برای استفاده از بوت سترپ است.

 

Styles

 

ما بلوک های سفارشی خود را داریم بنابراین بیایید با اضافه کردن اینها به فایل style.scss کار را ادامه دهیم:

 

 

در بالا تعدادی متغیر تعریف کرده ایم که بعدا بتوانیم از آنها در stylesheet خود استفاده کنیم. ابتدا تعدادی فونت دلخواه را به متغیرها اختصاص داده ایم.

در ادامه مقداری رنگ دلخواه به متغیرها اختصاص دادیم. این یکی از دلایلی است که Sass را دوست دارم که می توانیم رنگ هایی که با مقدار HEX قابل فراموشی هستند با استفاده از نام های متغیر جایگزین کنیم.

در آخر، برای متغیرهای سفارشی، ما تعدادی margin و padding ساده در نظر می گیریم. من دوست دارم اینها را هم اضافه کنم با اینکه همیشه از آنها استفاده نخواهیم کرد.

در بخش بعدی ما Bootstrap را اضافه کرده ایم، اما قبل از آن باید فونت اصلی خود را به متغیر font-family-sans-serif$ اختصاص دهیم تا برابر با مقدار متغیر main-font که قبلا ساختیم شود. به این خاطر که وقتی Bootstrap کامپایل می شود از فونت اصلی ما به عنوان فونت خودش استفاده کند.

 

Styleهای بیشتر

 

بیایید تعدای style جدید اضافه کنیم:

 

 

در اینجا ما از یک انتخابگر کلی * استفاده کرده ایم تا همه چیز position: relative باشد تا با اختصاص position: absolute به عناصر متعجب نشویم. همچنین به طور کلی ویژگی box-sizing را با مقدار border-box قرار داده ام به طوری که بشود از عرض های درصدی استفاده کنیم و نگران این نباشیم که به هر عنصری که ویژگی padding دادیم طرح به هم بریزد.

 

بعد از آنکه فونت و رنگ و اندازه پیشفرض خود را مشخص کردیم بیایید به عنصر <header> ارتفاع بدهیم.

 

خوب تا اینجا با فایل Sass کار کردیم، حال فعلا به فایل index.html سویچ کنید تا بر روی سر سفحه یا header کار کنیم.

 

هدری که برای این طرح تعیین شده است بسیار ساده و شیک است، که کار را برای ساختش بسیار آسان می کند. markup یا نشانه گذاری های ما به صورت زیر خواهد بود:

 

 

کدهای بالا باید بین تگ <header> قرار گیرند. توجه داشته باشید آدرس عکسی که در تگ <img> مشخص کرده ایم وجود ندارد. شما می توانید عکس هایی با کیفیت بالا را از unsplash.com دانلود کنید. بقیه کد شامل سه تگ div است که شامل نام، عنوان , لینک شبکه های اجتماعی است. من برخی از کلاس هایی که می شد در فایل Sass استفاده کنیم را قرار داده ام.

 

Header Style

 

بیایید تعدادی خط کد درون header که اعلان کرده ایم قرار دهیم:

 

 

این باید به صورت تو در تو در بخش header فایل Sass قرار گیرد.

 

تصویر ثابت

 

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

 

 

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

 

حال سعی کنید برای اولین بار نگاهی به کار خود در مرورگر بیندازید!

 

 

در اینجا ما به عناصر name و titles ویژگی position و font را می دهیم. ما نیاز داریم که از media query در titles استفاده کنیم تا آن را در صفحه نمایش های بزرگ مقداری به سمت بالا هل دهیم. حال مرورگر خود را refresh کنید.

 

حال بهتر به نظر می رسد. اجازه دهید عنوان را کمی مرتب کنیم.

 

 

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

 

فونت

 

style بعدی که می خواهیم سریع اضافه کنیم مربوط به نامی است که در گوشه سمت چپ قرار دارد. کد زیر را درست در آخر فایل Sass خود قرار دهید. (خارج از بلوک header).

 

 

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

 

آیکن های شبکه اجتماعی با Font Awesome

 

از آنجایی که می خواهیم کیفیت کار خود را بالا نگه داریم، از آیکون های عکس استفاده نمی کنیم. در این پروژه می خواهیم font-awesome را به کار خود اضافه کنیم، با مشاهده لیست آیکون های font awesome متوجه می شوید که هر نوع آیکونی که فکرش را کنید در آنجا وجود دارد، و البته از همه مهمتر اینکه آیکون های SVG هستند و با زوم کردن کیفیت آیکون از بین نمی رود.

 

در اینجا از سریع ترین روش یعنی CDN برای وارد کردن فایل font awesome به پروژه خود اضافه استفاده می کنیم (شما می توانید بعدا با مراجعه به مستندات Font Awesome روش وارد کردن فایل sass را یاد بگیرید).

 

برای انجام این کار CDN زیر را به تگ <head> اضافه کنید:

 

 

حال تگ های a را در فایل index.html به صورت زیر ویرایش کنید:

 

 

کدهای زیر را داخل بلاک header از فایل sass درست بعد از استایل های h1 و h2 قرار دهید:

 

 

واو، بنظر پیچیده می آید، اما نگران نباشد! برای شروع ما موقعیت عنصر social. را به گوشه سمت راست منتقل کرده ایم.

 

در ادامه، مقداری استایل به تگ های <a> اختصاص داده ایم تا هر کدام عرض و ارتفاع داشته باشند. ما همچنین ویژگی opacity را با مقدار 0.8 مقداردهی کرده ایم که با رویداد hover به مقدار 1.0 تغییر می یابد. این کار باعث می شود یک rollover ساده ایجاد شود.

 

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

 

همانطور که می بینید فونت fancy-font به درستی برای نام وب سایت ما کار می کند و آیکون های شبکه اجتماعی دوست داشتنی به نشر می آیند، خسته نباشید کارتان تا اینجا خوب بوده است 🙂

 

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


 

خوراک اینستاگرم

 

ما کار را اضافه کردن تعدادی HTML به فایل index.html شروع می کنیم، بنابراین آن را باز کرده و کدهای زیر را داخل تگ <"section class="instagram-wrap> قرار دهید:

 

 

در اینجا می بینید که من بخش های مورد نظر را با HTML نشانه گذاری کرده ام، حال ما نیاز به تصاویر اینستاگرم داریم.

 

شبکه بوت استرپ

 

چیزی که شاید توجه کرده باشید، اگر قبلا از Bootstrap استفاده کرده باشید، این است که ما از برخی کلاس های Bootstrap در ابتدا استفاده کرده یم. ما از کلاس ها col-xs-xx ، col-sm-xx و col-md-xx و col-lg-xx برای تنظیم عناصر در اندازه های مختلف صفحه استفاده کرده ایم. به طور خلاصه سیستم شبکه Bootstrap از طریق containers و rows و columns کار می کند. هر row باید داخل یک container قرار گیرد و هر column باید در row قرار گیرد. در مجموع باید 12 ستون در هر row باشد. اینجاست که کلاس هایی مثل col-xs-12 وارد می شوند.

 

از طرفی اگر کلاس های col-xs-12 col-sm-6 col-md-3 به یک عنصر اضافه کنیم باعث می شود در اندازه های xs طرح ما تمام صفحه شود، 2 ستون در اندازه های sm و 4 ستون در اندازه های md شاید در ابتدا گیج شوید، اما اگر از ابتدا بدانید با این کلاس ها چطور باید کار کرد، می بینید که به آن سختی که فکرش را می کردید نیست.

 

Bootstrap32

 

نکته دیگری که باید توجه داشته باشید این است که test_img.jpg در واقع وجود ندارد. شما می توانید هر عکسی که دوست دارد را با این نام در پوشه images قرار دهید.

 

استایل های اینستاگرم

 

حال که markup های خود را اضافه کرده ایم بیایید مقداری style به فایل sass اضافه کنیم:

 

 

شما نیاز دارید که این کدها را بعد از بلاک header از فایل Sass قرار دهید. باعث می شود مقداری رنگ به پسزمینه و سبک فونت اضافه شود. فایل Sass را ذخیره کنید و نگاهی به مرورگر خود بیندارید.

 

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

 

 

این کدها را درست بعد از h3 داخل بلاک instagram-content. قرار دهید. ما در کد بالل به photo-box. مقداری margin-bottom داده ایم تا به هر کدام فاصله مناسب داده شود. ما نیازی نداریم که نگران فاصله چپ و راست باشیم، اینها به وسیله Bootstrap هندل می شوند. پس از آن باید مطمئن شویم هر عکس داخل image-wrap. عرض %100 دارد. عنصر likes. با استفاده از موقعیت absolute به گوشه سمت چپ عکس منتقل می شود.

 

حال دوباره مرورگر خود را تازه سازی کنید تا تغییرات را احساس کنید.

 

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

 

استفاده از Instafeed.js

 

جالبی ایم افزونه این است که هر کسی می تواند یک خوراک Instagram به وب سایت خود اضافه کند. اما، برای این کار به Client ID از Instagram لازم است. شما می توانید این آی دی را با ثبت نام در اینستاگرم و در بخش developer به دست آورید.

 

وقتی این کار را انجام دادید، تمام کاری که لازم است انجام دهید اضافه کردن کد زیر به فایل app.js است:

 

 

اگر فایل را ذخیره و مرورگر خود را refresh کنید باید تصاویر اینستاگرم شخصی من را مشاهده کنید. البته که با کمی دستکاری کد می توانید اینستاگرام خود را سینک کنید.

 

مرتب کردن

 

می دانیم که برای مرتب کردن HTML خود هنوز قالب اولیه خود را که در ابتدا درست کرده ایم را داریم، بنابراین دیگر به آن احتیاج نداریم، کد زیر را پیدا کنید و آن را پاک کنید:

 

 

پاورقی یا Footer

 

به فایل index.html بازگردید و کدهای زیر را به تگ footer اضافه کنید:

 

 

همانطور که می بینید ما از کلاس های آماده Bootstrap استفاده کرده ایم. این بار می خواهیم 12 ستون داشته باشیم.

 

Footer Style

 

استایل های زیر را نیز به Sass خود اضافه کنید.

 

 

شاید استایل های بالا ترسناک به نظر برسد ولی قول می دهم با کمی دقت به سادگی آنها پی ببرید.

 

حال بیایید آخرین بخش یعنی footer-bottom. را به اتمام برسانیم.

 

 

 

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

 

 

توجه داشته باشید که این کدها بعد از استایل های footer اضافه می شوند. ما از letter-spacing برای فاصله بین حرف ها استفاده کرده ایم.

 

bootstrap-footer

 

تبریک می گویم، ما توانستیم یک نمونه کار خیلی ساده و شیک و مدرن درست کنیم. امیدوارم توانسته باشم اندکی از دانسته های خودم را با شما به اشتراک گذاشته باشم 🙂


 

  • علی اصغر کریمی

    سلام من دقیقا چیزی که شما گفتین ساختم اما عکس ها رو نشون نمیده , clientID خودمم زدم , همراه با tokken خودم اما نشون نمیده و عکسا لود نمیشن
    کمک کنید
    احتیاجش دارم

    • پاتریک

      سلام، به احتمال زیاد مشکل از userid و accessToken. با استفاده از لینک های زیر هر کدومو جنریت کنید.
      userid – http://jelled.com/instagram/lookup-user-id
      accessToken – http://instagram.pixelunion.net

      توجه کنید که clientid هم از پروفایل خود جنریت کنید. 😉

      • علی اصغر کریمی

        توو قسمت manage clients قسمت security دو تا گزینه هست , کدوم رو باید تیک بزنم ؟
        در ضمن من همین کار ها رو کردم , متن زیر هر عکس لود میشه همراه با تعداد لایک ها اما خود عکس نمیاد
        و در آخر باید بگم که با و…پ….ن که وصل میشم عکس ها لود میشن
        خواهش میکنم کمک کنید ممنون میشم

        • پاتریک

          منظور شما از manage client دقیقا در کجاست!!؟؟ پیشنهاد می کنم فایل دمو را دانلود کنید و آی دی های خود را درون آن جای گذاری کنید، فایل دمو تست شده و هیچ مشکلی نمی بینم. بله گاهی اوقات نیاز است از vpn استفاده کرد، مشکل نمی دونم از کجاست. ولی الان با یک جستجو کوچیک به دو تا لینک برخوردم که شاید به شما کمک کند.

          http://stackoverflow.com/questions/24152544/trouble-with-instafeed-js
          http://stackoverflow.com/questions/25332677/broken-image-path-instafeed-js

          شاید بهتر باشد useHttp: true هم به فایل app.js اضافه کنید. پیشنهاد می کنم درباره این در مستندات http://instafeedjs.com مطالعه کنید.