آموزش طراحی صفحات وب Web Design Pack

[edsanimate_start entry_animation_type= “bounceIn” entry_delay= “0” entry_duration= “0.5” entry_timing= “linear” exit_animation_type= “” exit_delay= “” exit_duration= “” exit_timing= “” animation_repeat= “1” keep= “yes” animate_on= “load” scroll_offset= “” custom_css_class= “”]آموزش طراحی صفحات وب

Web Design Pack

[edsanimate_end]

[edsanimate_start entry_animation_type= “bounceInRight” entry_delay= “0” entry_duration= “1” entry_timing= “linear” exit_animation_type= “” exit_delay= “” exit_duration= “” exit_timing= “” animation_repeat= “1” keep= “yes” animate_on= “load” scroll_offset= “” custom_css_class= “motivation_land “]

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

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

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

طراحی یک وب سایت ممکن است توسط یک طراح وب یا تیم طراحی وب انجام شود.

وب سایت عموما از دو بخش تشکیل شده اند که به آنها Frontend و Backend گفته می شود.

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

Backend بخشی از سایت است که کاربر بصورت مستقیم آن را نمی بیند اما با آن در ارتباط است. مدیریت پایگاه داده، امنیت سایت و … در این گروه قرار می گیرند.

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

 

دوره آموزشی Web Design Pack تمام مباحث مربوط به طراحی وب سایت در بخش Frontend را به شما دانشپذیران گرامی آموزش خواهد داد.

در این دوره شما مباحث زیر را خواهید آموخت

HTML5, CSS3, Dream Weaver, JavaScript, JQuery, Ajax, Bootstrap, Less & Sass

محل برگزاری دوره: مجتمع فنی تهران نمایندگی انقلاب

مدت دوره:172ساعت

پیش نیاز: آشنایی با ویندوز و اینترنت

[edsanimate_end]

سرفصل دوره

[edsanimate_start entry_animation_type= “bounceInUp” entry_delay= “0” entry_duration= “2” entry_timing= “linear” exit_animation_type= “” exit_delay= “” exit_duration= “” exit_timing= “” animation_repeat= “1” keep= “yes” animate_on= “load” scroll_offset= “” custom_css_class= “detail_landing”]

    بررسی روش استفاده از Icon ها

    بررسی روش استفاده از Helper ها

    بررسی نکات . کلاسهای مرتبط با دکمه

    بررسی ارائه مثال از موارد زیر :

        Dropdowns

        Button groups

        Button dropdowns

        Input groups

        Navs

        Navbar

        Breadcrumbs

        Pagination

        Labels

        Badges

        Jumbotron

        Page header

        Thumbnails

        Thumbnails

        Alerts

        Progress bars

        Media object

        List group

        Panels

        Wells

    بررسی روش سفارشی سازی BootStrap

    معرفی LESS و SASS و تشریح مزایای استفاده از آنها و تفاوت ها

    بررسی روش نصب و راه اندازی SASS و COMPASS

    بررسی روش ایجاد پروژه و ابزار های گرافیکی مورد استفاده در SASS مانند Scout App و CodeKit و LiveReload

    بررسی روش ایجاد و فشرده سازی یک Stylesheet

    بررسی روش ایجاد متغیر های در SASS

    بررسی روش ایجاد و استفاده از فایل های Partial

    بررسی الگوهای نوشتاری Nesting

    بررسی روش اتصال Selector ها و رابطه Parent-Child بین Selector ها

    بررسی روش استفاده از @extend برای گسترش قوانین تعریف شده

    بررسی الگوهای نوشتاری Mixins

    بررسی روش های اعمال تغییرات روی رنگ ها

    معرفی پلاگین Susy و نکات مربوطه

    بررسی روش ایجاد Media Query های پیشرفته تر با SASS و MIXINS

    پیاده سازی منطق با SASS

    بررسی روش نگارش و کامپایل LESS

    بررسی روش حل مشکل CROSS BROWSER در LESS

    بررسی Server Side Compilation

    بررسی روش استفاده از Source Map

    بررسی روش Compress و Minimize کردن

    بررسی متودولوژی های OOCSS و SMACSS و BEM

    بررسی روش استفاده از متغیر ها و MIXINS

    بررسی Nested Rule ها

    بررسی انواع عملگرها و توابع

    بررسی روش استفاده از Parent Selector

    بررسی عملیات روی رنگها

    بررسی Media Query ها در LESS

    بررسی روش استفاده از LESS در GRID

    بررسی تعاملات LESS با BOOTSTRAP

بررسی مفهوم Client Side کد و لزوم وجود امکان برنامه نویسی سمت کلاینت

    معرفی زبان برنامه نویسی Java Script و روش استفاده از آن در یک سند HTML

    بررسی نکات مربوط به تگ Script و محل نوشتن دستورات

    معرفی مفهوم متغیر و ارائه نکات مربوط به متغیر ها در Java Script

    بررسی متغیر های Local و Global

    بررسی مفهوم Notation و روش رعایت آن در Java Script

    بررسی فایل های .js و روش استفاده از آنها

    بررسی انواع عملگرها

    معرفی مفهوم شرط و ساختارهای بررسی شرط

    بررسی دستور switch

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

    بررسی انواع حلقه های تکرار

    بررسی حلقه های while و for و …

    بررسی روش تعریف تابع و نکات مربوطه

    بررسی مفهوم رویداد و روش اداره آن

    بررسی تنوع رویداد های المانها

    بررسی تفاوت انواع رویداد های کلید مانند keyup و …

    معرفی مفهوم Anonymous Function و نقش آن در مدیریت رویداد

    معرفی DOM و اجزاء آن و روش دسترسی به آنها

    بررسی انواع روشهای دسترسی به المانها مانند دسترسی بر اساس id و …

    بررسی روش درج،حذف و ویرایش المانها و Node ها

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

    معرفی innerText و innerHTML

    معرفی Framework و مفهوم آن و انواع Framework های Java Scrip

    معرفی jQuery و مزایای استفاده از آن

    بررسی روش استفاده از jQuery در یک سند HTML

    بررسی و مقایسه عملیات مختلف مانند اداره رویداد،فراخوانی توابع،مقداردهی به مشخصه ها در jQuery و Java Script

    معرفی Selector های jQuery و نکات مربوطه

    آشنايی با jQuery

    آموزش نصب jQuery

    چگونگي شيوه کار jQuery

    آموزش قواعد نوشتاری در jQuery

    آموزش دسترسی به المان های html در jQuery

    Select to Every Things آموزش دسترسی به تمام المان ها

    ID Selector آموزش دسترسی به وسيله شناسه

    Tag Name Selector آموزش دسترسی به وسيله ی نام تگ

    Class Selector آموزش دسترسی به وسيله ی کلاس

    Attribute Selector آموزش دسترسی به وسيله ی Attribute

    Selecting Visibility آموزش دسترسی توسط نمايش و عدم نمايش

    Selecting Parents and Children آموزش دسترسی توسط فرزند و پدر

    آموزش رويداد ها در jQuery

    معرفی Effect ها در jQuery

    معرفی مفهوم AJAX و بررسی روش پیاده سازی آن در Java Script و jQuery

    بررسی مزایای AJAX

    معرفی jQuery UI

    بررسی روش استقرار jQuery UI در سند

    بررسی انواع المانهای jQuery UI

[edsanimate_end]

[edsanimate_start entry_animation_type= “bounceInUp” entry_delay= “0” entry_duration= “1.5” entry_timing= “linear” exit_animation_type= “” exit_delay= “” exit_duration= “” exit_timing= “” animation_repeat= “1” keep= “yes” animate_on= “load” scroll_offset= “” custom_css_class= “detail_landing”]

آشنایی با مفهوم و تاریخچه وب و زیرساختهای نرم افزاری و سخت افزاری لازم برای ایجاد ،استقرار و نگهداری وب سایت ها

    معرفی مفاهیم شبکه ای مرتبط با وب مانند Domain،Host،Web Server،DNS Server

    معرفی مفاهیم نرم افزاری مرتبط با طراحی وب مانند HTML و CSS

    بررسی مفهوم Markup Language

    بررسی مفهوم Cascading Style Sheet

    تشریح نحوه عملکرد Web Browser ها

    بررسی مفهوم Search Engine

    بررسی مفهوم SEO

    بررسی مفهوم UI

    بررسی مفهوم   UX

    بررسی مفهوم واکنش گرا  (Responsive)

    بررسی عبارت های مصطلح روز وب مانند Single Page،Parallax و …

    بررسی مفهوم Tag و ساختار یک سند HTML استاندارد

    بررسی نسخه های HTML و ویژگی ها HTML 5

    معرفی DOCTYPE

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

    معرفی Project Structure در طراحی وب

    ارائه طبقه بندی تگ ها مانند Text Level و Block Level،List و …

    بررسی نکات مربوط به List ها

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

    معرفی مفهوم Attribute

    معرفی مفهوم Comment و دلائل استفاده از آن

    معرفی و ارائه مثال از تگ های مربوط به هر طبقه

    بررسی استاندارد های نامگذاری المانها

    بررسی مفهوم Validation در اسناد HTML

    معرفی CSS

    بررسی نقش CSS در آرایش تگ ها

    معرفی قابلیت های Design Environment مانند منو ها و قسمت های مختلف Dream Weaver

    بررسی روشهای مختلف اعمال Style روی تگها مانند Inline،Internal،External

    معرفی انواع Selector ها در CSS

    بررسی نحوه استفاده از تصاویر در سند HTML

    بررسی انواع File Path

    بررسی مفهوم Save/Export For Web

    بررسی نحوه Load شدن تصاویر

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

    بررسی تصاویر PNG و مشکلات نمایشی مرورگرها

    بررسی نکات مربوط به تصاویر مانند Transparency و …

    بررسی Image Map

    بررسی نحوه ویرایش و بهینه سازی تصاویر برای وب با نرم افزار های مربوطه

    بررسی نحوه استفاده از تصاویر در Background

    بررسی نکات مربوط به استفاده از تصاویر در Background مانند Repeat و …

    بررسی نحوه استفاده از صدا و تصویر در Background

    معرفی IFrame و روش استفاده از آن

    بررسی روش استفاده از Google Map و سایر موارد مرتبط با IFrame

    ایجاد انیمیشن با تصاویر و ابزار های مربوطه

    بررسی نحوه استفاده از رنگ

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

    بررسی نکات مربوط به فونت مانند Size و Weight و …

    معرفی انواع فونت ها و پسوندهای مربوطه

    بررسی Icon ها و فونت های گوگل

    بررسی روش استفاده از کاراکترهای خاص در سند HTML

    معرفی مفهوم Hyper Link و نکات مربوط به Navigation

    آشنایی با مفهوم Anchor و Hash

    ایجاد Shortcut برای لینک ها

    بررسی Site Map و روش ایجاد آن

    بررسی روش ایجاد منو و انواع آن

    بررسی روشهای مختلف آدرس دهی لینکها مثلا Internal و External

    بررسی نکات جدید HTML 5 در مورد لینک­ها مانند download

    بررسی تگ Table و اجزاء مختلف آن

    بررسی معایب و مزایای Table

    بررسی نحوه استفاده از Table برای چیدمان

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

    بررسی نکات مربوط به Formatting در Table

    بررسی نکات جدید HTML 5 در جداول

    بررسی مفهوم Layout های Tableless

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

    بررسی روش های تقسیم بندی صفحه

    بررسی مفاهیم Margin و Padding

    بررسی Border و نکات مربوطه

    بررسی نکات مربوط به Text مانند Direction ،Decoration،Align و …

    بررسی نکات مربوط به Positioning در CSS 3

    بررسی نکات حرفه ای تر در CSS 3 مانند Animation و Transition Bottom of Form

    بررسی انواع Effect ها در CSS 3

    بررسی نکات مربوط به Transform در CSS 3

    بررسی انواع Layout ها

    بررسی Localization برای زبانهای RTL

    معرفی مفهوم Float و Absolute و …

    معرفی مفاهیم مرتبط با Boxing

    بررسی Form و انواع Input ها

    معرفی تگ های مفهومی HTML 5 و بررسی نقش هر یک

    بررسی امکانات مرتبط با شبکه های اجتماعی

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

    بررسی Drag & Drop

    بررسی Canvas و نحوه استفاده از آن

    بررسی SVG و نحوه استفاده از آن

    معرفی Edge و Illustrator و کاربرد آنها –

    معرفی Muse و کاربرد آن

بررسی مفهوم Responsive

    معرفی مفهوم CSS Framework

    معرفی و بررسی تاریخچه BootStrap

    بررسی روش استفاده از BootStrap در یک سند HTML

    معرفی Grid System

    معرفی Media Query

    معرفی انواع سایزها و کلاسهای مرتبط و روش تشخیص Resolution کاربر

    معرفی انواع Layout ها و کلاسهای مرتبط مانند Fluid Layout

    معرفی Fixed Layout

    معرفی Responsive Layout

    بررسی Typography با BootStrap

    بررسی روش ایجاد فرم و کلاسهای مرتبط

    بررسی روش پنهان سازی بخش هایی از سند

    بررسی نکات و کلاسهای مرتبط با جدول

    بررسی نکات و کلاسهای مرتبط با تصاویر

[edsanimate_end]

[edsanimate_start entry_animation_type= “bounceInLeft” entry_delay= “0” entry_duration= “1” entry_timing= “linear” exit_animation_type= “” exit_delay= “” exit_duration= “” exit_timing= “” animation_repeat= “1” keep= “yes” animate_on= “scroll” scroll_offset= “75” custom_css_class= “back_row”]

:مخاطبان دوره

مهندسين و دانشجويان کامپیوتر و علاقه مندان به برنامه نویسی  [edsanimate_end]

[edsanimate_start entry_animation_type= “bounceInRight” entry_delay= “0” entry_duration= “1.5” entry_timing= “linear” exit_animation_type= “” exit_delay= “” exit_duration= “” exit_timing= “” animation_repeat= “1” keep= “yes” animate_on= “scroll” scroll_offset= “75” custom_css_class= “”]چرا این دوره با ما[edsanimate_end]

[edsanimate_start entry_animation_type= “zoomIn” entry_delay= “1” entry_duration= “0.5” entry_timing= “linear” exit_animation_type= “” exit_delay= “” exit_duration= “” exit_timing= “” animation_repeat= “1” keep= “yes” animate_on= “scroll” scroll_offset= “75” custom_css_class= “”][edsanimate_end]فضای آموزشی مناسب

[edsanimate_start entry_animation_type= “zoomIn” entry_delay= “1” entry_duration= “0.5” entry_timing= “linear” exit_animation_type= “” exit_delay= “” exit_duration= “” exit_timing= “” animation_repeat= “1” keep= “yes” animate_on= “scroll” scroll_offset= “75” custom_css_class= “”][edsanimate_end]تالار افتخارات

[edsanimate_start entry_animation_type= “zoomIn” entry_delay= “1” entry_duration= “0.5” entry_timing= “linear” exit_animation_type= “” exit_delay= “” exit_duration= “” exit_timing= “” animation_repeat= “1” keep= “yes” animate_on= “scroll” scroll_offset= “75” custom_css_class= “”][edsanimate_end]اساتید مجرب

[edsanimate_start entry_animation_type= “zoomIn” entry_delay= “1” entry_duration= “0.5” entry_timing= “linear” exit_animation_type= “” exit_delay= “” exit_duration= “” exit_timing= “” animation_repeat= “1” keep= “yes” animate_on= “scroll” scroll_offset= “75” custom_css_class= “”][edsanimate_end]
سابقه و مدارک معتبر

[edsanimate_start entry_animation_type= “bounceInLeft” entry_delay= “0” entry_duration= “1” entry_timing= “linear” exit_animation_type= “” exit_delay= “” exit_duration= “” exit_timing= “” animation_repeat= “1” keep= “yes” animate_on= “scroll” scroll_offset= “75” custom_css_class= “”]میخواهم ثبت نام کنم         نیاز به مشاوره دارم[edsanimate_end]