درباره دوره
دوره ویژه Front End همراه با تخصص UI/UX
برنامه نویسی Front End چیست و به چه کسی برنامه نویس فرانت اند میگویند ؟
Front end developer به کسی گفته می شود که کدهای سمت فرانت یا UI را می نویسد. آنچه کاربر می بیند و با آن تعامل دارد مربوط به بخش فرانت اند می باشد. برنامه نویس فرانت اند داده هایی که از سمت سرور فراخوانی می شود را برای کاربر به شکل تعاملی و با سرعت بالا به نمایش می گذارد. فرانت اند این کار را با طراحی یک قالب قابل تعامل با کاربر انجام می دهد.
برنامه نویس فرانت اند با تکنولوژی هایی مانند HTML ،CSS ،jQuery و JavaScript و فریم ورک های پیشرفته ای نظیر React JS و Angular JS و Vue.JS کار می کند.
برنامه نویس فرانت اند در واقع طراح قسمت های ظاهری وب سایت است. در واقع، وقتی شما وارد یک وب سایت می‌شوید، تمام چیزی که با چشم می‌بینید شامل طراحی های یک برنامه نویس فرانت اند است.
PWA یا (Progressive web application) این امکان را فراهم می‌کند تا شما بتوانید اپلیکیشن‌هایی که طراحی می‌شود را در مرورگرها مانند گوگل کروم یا فایرفاکس اجرا کنید.
نوعی نرم افزار کاربردی است که از طریق وب ارائه می‌شود و با استفاده از فناوری های رایج وب از جمله HTML ،CSS، جاوا اسکریپت و WebAssembly ساخته شده است.
وب اپلیکیشن پیش رونده می‌تواند بسیاری از کارهایی را که قبلا منحصر به اپلیکیشن‌های بومی بود، انجام دهد. این شامل دسترسی به قابلیت‌های سخت‌افزاری مانند استفاده از دوربین و میکروفون، GPS، حالت آفلاین، دسترسی به فایل‌ها و بسیاری موارد دیگر است. اما اشتباه نکنید، وب اپلیکیشن پیش رونده، وبسایت محسوب می‌شوند. آنها فقط به لطف فناوریهای مدرن وب، شبیه یک اپلیکیشن هستند. این به این معناست که کاربران وب اپلیکیشن‌های پیش رونده را در مرورگر خود با یک URL جستجو می‌کنند، درست مانند هر وب‌سایتی، اما بلافاصله پس از ورود به PWA، تجربه استفاده از یک «اپلیکیشن» را مستقیما در مرورگر خود، بدون نیاز به دانلود و نصب یک نرم‌افزار، تجربه می‌کنند.
اعتقاد ما بر این است که نرم افزارهای تحت وب پیش رونده PWA آینده طراحی سایت می باشند.
نکته: فرق وب سایت و وب اپلیکیشن در آن است که وب اپلیکیشن مانند همه نرم افزارهای دیگری است که شما بر روی گوشی موبایل خود نصب کرده اید
وب اپلیکیشن های پیش رونده PWA نسل جدیدی از وب اپلیکیشن ها هستند که با کمک امکانات جدید دستگاه های هوشمند بیشتر به یک نرم افزار شبیه شده اند. برای مثال در یک وب اپلیکیشن پیش رونده درست مانند هر نرم افزار موبایلی دیگری، شما میتوانید از دوربین، چراغ قوه و… استفاده کنید. این امکانات در کنار قابلیت مشاهده اطلاعات کش شده از سایت بصورت Offline تفاوت چشمگیری میان این نرم افزارها و نرم افزارهای نسل قبل ایجاد کرده است.
PWA چه مزایایی برای سایت شما به همراه دارد؟
تحقیقات نشان می دهد که وب اپلیکیشن شدن سایت ها، مزایای متعددی را برای شرکت ها به همراه دارد:
- 68 درصد افزایش ترافیک تلفن همراه
- بهبود چشمگیر سرعت سایت
- 52 درصد افزایش نرخ تبدیل
- 78 درصد افزایش تعداد بازدید های سایت
- 137 درصد افزایش در مشارکت و تعامل کاربران
- 133 درصد افزایش در page views
- 42 درصد کاهش نرخ پرش (بانس ریت) سایت
- و…
پیش نیازه های دوره
آشنایی حرفه ای با کامپیوتر
داشتن مدرک ICDL
دستاورد های شما پس از گذراندن دوره
در این دوره آموزشی جامع، کلیه مهارت های مورد نیاز در بخش فرانت اند بر اساس جدیدترین نیازهای بازار کار در کشورهای اروپایی بلاخص آلمان و بازار کار شرکت های تاپ داخلی طراحی و تدوین شده است.
مخاطب هدف دوره
صاحبان مشاغل جدید یا تاسیس شده که می خواهند سود بیشتری کسب کنند
طراحان وب سایت که می خواهند مهارت خود را ارتقا دهند
علاقه مندان به یادگیری دوره طراحی وب
سوالات متداول
مدت این دوره چند ساعت است ؟
آیا پس از گذراندن دوره مدرکی دریافت میکنم؟
سرفصل های دوره
MODULE 1: HTML
1. Introduction to HTML2. Html DocType
3. Head & body
4. Heading & Paragraphs
5. Attributes & Comments
6. Formatting Tags & iframe
7. Links in Html
8. Images & image map in Html
9. Picture Tags
10. Favicon
11. Tables
12. List in Html
13. Inline & Block Elements
14. Span & Div Tags
15. Id & Class Property
16. Layout & Semantic Tags
17. Entities & Computer Code Elements
18. Forms in Html
19. Form Attributes
20. Svg & Canvas
21. Audio & Video
MODULE 2: CSS
1. Introduction CSS2. Applying CSS to HTML
3. Selectors
4. Color, gradient Property
5. Background Property
6. Border Property
7. Margin Property
8. Padding Property
9. CSS Units, Width, Height Property
10. Max/Min – Widht/Height
11. BoxModel, BoxSizing Property
12. Outline Property
13. Alignment Text Property
14. Transformation, Decoration Property
15. Text Spacing Property
16. Text Shadow
17. Font, FontFace Rule
18. PseudoClasses, PseudoElements
19. List Style Property
20. Display Property
21. Flow
22. Position Property
23. Z index Property
24. Overflow Property
25. FlexBox
26. Opacity, Visibility Property
27. Attribute Selectors
28. Specificity & Priority
29. Functional Mathematics
30. Box Shadow Property
31. Text Effects
32. Transitions
33. KeyFrames
34. After, Before Property
35. Responsive, Media Queries
36. Float Property
37. Overlay Property
MODULE 3: UI/UX
1.ترسیم نقشه راه طراح شدن Roadmap2.مبانی تجربه طراحی کاربر Fundamentals of UX Design
3.کاربر پژوهشی User Research (UR)
4.روان شناسی شناختی Cognitive psychology
5.اصول گشتالت Gestalt
6.مدل های ذهنی Mental Models
7.بار شناختی Cognitive Load
8.الگوهای شناختی Cognitive patterns
9.سلسله مراتب بصری Visual hierarchy
10.ناوبری Navigation
11.طراحی تعاملInteraction Design (IxD)
12.کاربرد پذیری Usability
13.دسترسی پذیری Accessibility
14.بریف پروژهProject brief
15.طراحی رابط کاربری UI Design(UID)
16.روانشناسی رنگ ها
17. روانشناسی متن ها
18.wireframe وایرفریم
19.مبانی طراحی رابط کاربر Fundamentals of UI Design
20.ابزار طراحی رابط کاربری Design tools
21.فیگما Figma
22.فریمر Framer
23.افزونه های کاربری Plugins
24.الگوهای طراحیDesign patterns & Trends
25.طراحی بصری visual design
26.نسخه اولیه prototype
27.انتقال طرح HandOff
28.معرفی ابزار Tools
29.محدودیت ها و پیاده سازی Limitation & Implementation
30.راهنمای مسیر شغلی Business tipes
31.ارائه پروژه نهایی Final project
MODULE 4: JAVASCRIPT
1. Introduction to JavaScript2. Concept and variable defining
3. DataType in Javascript
4. Comment
5. Data Transfer User
6. Convert data types
7. Logical operators
8. Concat in strings
9. NaN Method
10. Comparison Operators
11. If, And, Switch Case, Ternary, for, While, map
12. Functional declaration, expressions
13. Property in string
14. Assignment Operators
15. Arrays
16. Objects
17. Includes method
18. Between data types Primitive and Reference
19. Functional Anonymous and IIFE
20. SetInterval, SetTimeout
21. Flag in Programming
22. DOM
23. Append Element in DOM
24. Event in JS
25. Dataset in DOM
26. Error Handling in JS
27. BOM
28. ECM
29. Memory Heep, Call Stack
30. Event delegation, event bubbling, event capturing
31. Composition in Function and High Order
32. Strict Mode
33. Arrow Function
34. Spread Syntax
35. Rest Operator
36. Destructuring in Arrays
37. Template in Literal
38. String Padding
39. Get Trap, Set Trap in Proxy
40. ASI in JS
41. API in JS
42. Mutate and Immutate
43. Ajax
44. HTTP Methods
45. SPA in JS
46. Asyns, Await, Promise
MODULE 5: JQUERY
Selectors inEvents in jQuery
Familiarity with the DOM
model and its methods in jQuery
Remove and add elements
Delete and add classes and style to HTML and css elements
Familiarity with dimension methods
Jquery effects
Traversing in Jquery
JQueryUI effects
JQuery filters
Executable functions in jQuery
MODULE 6: AJAX
Full knowledge of how tosend requests to the server
Familiarity with JSON in
sending and receiving information
Http Request
Get Http
Post Http
Send data using Ajax
Fetch-method Axios
Axios-put-delete
MODULE 7: BOOTSTRAP
1. To use Bootstrap's predefined classes and Bootstrap's grid system2. To create responsive navbars
3. To style typography, tables, and forms with Bootstrap
4. To use the most popular Bootstrap components
5. To use an array of Bootstrap Utilities
MODULE 8: Sass
Setting up and working with Sassv compilation toolsFamiliarity with different features of Sass
Familiarity with how variables work in Sass
Introduction to nesting in Sass
Introduction to parcels in Sass
Introduction to mixins in Sass
Getting to know and working with the extend method in Sass
Referencing the parent element using & in Sass Getting to know the types of comments in Sass Working with math operators in Sass Working with colors and their associated functions in Sass Introduction to lists in Sass Working with @content in Sass Getting to know the list of arguments and the if conditional command Introduction to loops in Sass
MODULE 9:TypeScript
IntroductionBasic Data Types
Destructuring & Spread
Working With Classes
Classes & Interface
Advanced Types
Generics
Decorators
Modules
Namespaces
Ambients
MODULE 10: Git and GitHUB
What is Git and GitHUBInstalling Git
Branching
Pull Requests
Common Workflows
Advanced Topics
Config – push – commit – add – clone – status - Do and Don’t
MODULE 11:Angular
IntroductionArchitecture
Directives and Templates
Data Binding
Working with CSS Styles
Advance Components
Features
Template Driven Forms
Model Driven Forms
Working with Pipes
Custome Attribute and
Validators
Dependency Injection
Services
Routing
Modules
CRUD Operations using http Service
MODULE 12:React
1. Introduction2. Templating using JSX
3. Components
4. State and Props
5. Lifecycle of Components
6. Rendering List
7. Portals
8. Error Handling
9. Routers
10. Redux
11. Immutable.js
12. Redux Saga
13. Service side rendering
14. Unit testing
15. Web Pack
اساتید دوره :
با C# Asp.Net
مدت زمان
100 ساعتتاریخ شروع
1403/03/20محل برگزاری
لابراتوار A
بصورت پک ویژه
مدت زمان
240 ساعتتاریخ شروع
1403/02/22محل برگزاری
لابراتوار B
در شبکه های کامپیوتری
مدت زمان
45 ساعتتاریخ شروع
1403/02/17محل برگزاری
لابراتوار Bدرخواست مشاوره ثبت نام
درصورت نیاز به مشاوره برای ثبت نام فرم درخواست زیر را تکمیل فرمایید.