کلاس آموزش طراحی سایت و سئو

نویسنده ۱۸ خرداد

چرا تیم وب یار با این همه مشغله و سفارشات و مشتریان و کارآموزان … باز هم برای علاقه مندان دوره یادگیری طراحی سایت برگزار می کند؟

نظر مدیر مجموعه وب یار:

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

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

“چون به این جمله ایمان داریم که زکات علممان نشر آن است”

کلاس طراحی سایت اختصاصی وردپرس از صفر تا صد واقعی  شروع از 1 آبان

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

“طراحی سایت یک مسیر پیچیده و دشوار را به دنبال دارد”

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

بهانه های ورود به بازار کار:

1- توی دانشگاه به ما چیزی یاد ندادند که…

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

2- ریاضیم ضعیفه نمیتونم دوره طراحی سایت شرکت کنم.

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

3- به زبان انگلیسی مسلط نیستم.

-زبان انگلیسی در دنیای برنامه نویسی در هر شاخه ای چه وب چه هوش مصنوعی یک امتیاز محسوب می شود. بلد بودن زبان انگلیسی می تواند منابع گسترده تر و رایگانی را در اختیار شما بگذارد. اما بدون بلد بودن زبان انگلیسی هم می شود برنامه نویس شد.

اما با گذشت زمان علاقه شما به یادگیری زبان بیشتر خواهد شد.

ما در دوره طراحی سایت وب یار چه چیزهایی یاد میگیریم؟

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

اکنون سرفصل ها را یکی یکی بررسی میکنیم.

آشنایی با مبانی کامپیوتر

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

1.اینترنت چیست؟ (what is Internet)

  1. سرور چیست؟ (what is Server)
  2. هاست چیست؟ (what is Host)
  3. دامین چیست؟ (what is Domain)
  4. زون چیست؟ (what is Zone)
  5. لینک چیست؟ (what is Link)
  6. آی پی چیست؟ (what is IP)
  7. مرورگر چیست؟ (what is Browser)
  8. ایمیل چیست؟ (what is eMail)
  9. برنامه نویسی استاتیک (Static Programming)
  10. برنامه نویسی داینامیک (Dynamic Programming)
  11. زبان HTML و CSS چیست؟ (what are HTML and CSS)
  12. مقایسه ویندوز و لینوکس (Comparison Windows with Linux)
  13. زبان پی اچ پی و زبان ای اس پی کدام است؟ (what are PHP and ASP)
  14. معرفی وب سرور Apache و IIS

تحلیل وب سایت ها و پیدا کردن نیاز مشتری

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

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

وایر فریمینگ

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

کشیدن وایرفریم چه کمکی به ما میکند؟

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

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

  1. 1. کانفیگ فتوشاپ

2.طراحی وایرفریم در محیط فتوشاپ

  1. آموزش سایزها و استاندارد سایز
  2. معرفی رنگ ها و استاندارد رنگ در مبحث روانشناسی رنگ ها
  3. فونت ها و استاندارد فونت  در طراحی وب
  4. فونت های وب
  5. معرفی اجزای سایت . آیکن ها . فونت ها . تصاویر متون . تیترها . ریبون ها . منو ها . فیلدها
  6. آشنایی کامل با ابزارها در فتوشاپ برای طراحی سایت
  7. آموزش افکت ها در فتوشاپ
  8. آموزش اف ایکس ها FX در فتوشاپ
  9. کد رنگ ، استاندارد های رنگ مادر- فرزند
  10. آموزش پالت رنگ ها و انتخاب از میان آنها
  11. رسم تمام اجزای سایت اجزای هدر . فوتر . سایدبار . کانتنت . پست پیج در فتوشاپ
  12. اسلایس بخش های مختلف و شروع به تبدیل سایت
  13. آموزش ذخیره سازی تصاویر با پسوند jpg . png . gif . svg  و تفاوت میان آن ها در طراحی وب سایت
  14. آموزش مقدماتی فیگما

دیزاین کردن یک سایت شرکتی

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

برنامه نویسی استاتیک نظیر HTML/CSS

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

سر فصل های این بخش عبارتند از:

سرفصل های HTML:

Head .1

Link relltype .2

Meta .3

Keywords – description – author .4

  1. meta http-equiv

Title .6

Body .7

Div id .8

Div class .9

  1. < ! – help — >
  2. / * help * /

Style .12

H1- H6 .13

P .14

Pre .15

  1. “a id=” tips
  2. <a heref=” #tips”></a>
  3. a heref

Img .19

Br .20

Hr .21

Strong .22

Span .23

Li & ul .24

Form .25

  1. <“input type = “ text “ name = “ male >

27.<input type = “ checkbox” name= “vehic “ value = “ bike “ >I have a bike <br>

  1. <“input type = “ submit “ value = “ submit >
  2. <table> < tr> <td>

30.تگ های فرمت بندی شامل <b>، <i>، <del>، <sub>، <mark> مدل های رنگ دهی RGB , HEX, HSL

سرفصل های CSS :

Style .css .1

  1. انتخابگرها :کلاس و آی دی ، تگ های تو در تو

Tags .3

P , a , img , #id , .class, b#strong .4

Address .5

Blockquote .6 نقل از دیگران

Width .7

Height .8

Float .9

Background .10

Font .11

Margin .12

Padding .13

List .14

Display .15

Clear .16

Border .17

Background .18

Font .19

Margin .20

Padding .21

List .22

Display .23

Clear .24

Border .25

Text – align .26

  1. :hover

Text – decoration .28

z- index .29

position .30

css- reset .31

css- sprite .32

direction .33

p:first-line .34

first- child: .35

  1. فاصله میان حروف( letter – spacing )
  2. فاصله میان لغات ( word – spacing )
  3. ظاهر متن ( text – spacing )
  4. تراز عمودی ( vertical – align )
  5. ارتفاع خط ( line – height  )

P:: first-letter .41.

  1. :: before
  2. :: after

فریم ورک بوت استرپ

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

کد نویسی استاتیک یک سایت شرکتی

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

آموزش نصب وردپرس و مدیریت یک سایت

در این مرحله ابتدا با CMS وردپرس آشنا می شوید.به ترتیب موارد زیر را یاد خواهید گرفت.

  1. نصب یک محیط توسعه پی اچ پی XAMPP
  2. نصب وردپرس
  3. آموزش کار با پنل وردپرس
  4. نصب پوسته
  5. نصب افزونه
  6. معرفی افزونه های پر کاربرد

پی اچ پی  برای کد نویسی وردپرس

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

تبدیل قالب استاتیک به داینامیک سایت شرکتی html to wp

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

index.php .1

Style.css .2

Screenshot.png .3

Header.php .4

Side-bar.php .5

Footer.php .6

Single.php .7

Functions.php .8

Comment.php .9

Seo .10

Secure .11

Contact us .12

forms .13

  1. 404.php

15.category

16.archive

17.tag

18.author

افزودن فروشگاه به قالب شرکتی

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

بهینه سازی پوسته های وردپرسی

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

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

لطفا برای تکمیل این فرم، جاوا اسکریپت را در مرورگر خود فعال کنید.
جنسیت

مثلا روزهای زوج یا فرد ، صبح ها یا عصر ها یا کل هفته و ساعات آن (کلاس ها معمولا بعد از ظهر ها در ساعات 1 الی 5 برگزار می گردد.)

با کدامیک از موارد زیر آشنایی دارید: