[국비지원무료교육] 웹표준기반 웹퍼블리셔&프론트엔드 개발자 양성과정
▶ 교육개요 및 목표
♣ UX의 다양한 개발 분야의 적용 중 최근 인력수요가 가장 늘고 있는 부분은 서버 사이드단의 개발자 양성은 많은 데 UI개발을 하는 디자이너 또는 퍼블리셔 사이에서 마크업을 하고 웹표준을 준수하면서 시멘틱한 코드를 구현할 수 있는 개발자가 절실히 필요로 하고 있다. 이러한 개발자를 Front-end개발자로 칭하고 있으며 기술수요에 맞추어 HTML5, CSS3, Javascript, jQuery 등 현장실무에서 신기술을 바로 적용할 수 있는 교육을 실시하고자 한다.
♣ HTML5기반의 모바일 웹앱 콘덴츠를 기획, 분석, 설계, 구축, 테스트, 운영, 유지보수를 할 수 있는 이론적 배경 지식과 전문기술을 습득 할 수 있다.
♣ 모바일 웹앱 환경에서 제공 할 수 없는 여러 가지 콘텐츠 기능들을 HTML5기반의 하이브리드 앱으로 제작 할 수 있다.
♣ 프로젝트 실무를 통해 취업연계에 필요한 완성도 있는 포트폴리오 결과물을 도출한다.
♣ 실무에 바로 투입될 수 있는 경력 1년 수준 이상의 테크닉 및 실무능력을 갖춘 웹퍼블리셔 및 프론트엔드 개발자가 될 수 있도록 한다.
○ 교육기간 및 일정
|
교육기간(일정) |
교육시간 |
정원 |
강의실 |
|
2015.08.24 ~ 2015.11.03 (2.5개월/50일/400시간) |
09:30~18:30(1일 8시간) 주5일(월~금) |
30명 |
2강의실 |
○ 정부지원 형태 : 창조전문인력양성사업(창조아카데미) / 서울산업진흥원
○ 교 육 비 : 전액국비무료(개인부담금 없음)
○ 교육장소 : TIS정보기술교육센터 본원(2호선,9 당산역 1번출구 200m. 이화빌딩 4층)
○ 교육문의 : 1566-4628
○ 정부지원대상(지원자격)
♣ 구직자(미취업자 및 실업자)
♣ 야간대학교 및 사이버대, 방통대 재학생 및 휴학생
♣ 대학졸업예정자(2016년 2월)
♣ 기타
※ 면접(상담)후 나이/학력/전공 등 내부 선발기준에 따른 선착순 인원선발.
○ 제출서류
♣ 이력서 및 자기소개서
♣ 최종학력 졸업(예정)증명서 또는 재학증명서
♣ 고용보험 미취득(상실) 확인서
♣ 신분증
♣ 기타
※ 발급기간이 4주~6주씩 걸리는 실업자 카드(내일배움카드) 발급이 필요치 않은 국비무료 교육입니다. 면접(상담) 후 선발자는 위 서류만 제출하시면 교육등록이 완료됩니다.
○ 연수생 혜택 및 지원
♣ 채용 약정 기업체와 채용협약으로 수료 직후 취업지원 및 취업연계
♣ 취업지원센터를 통한 이력서 및 면접 스킬업 지원
♣ 현 개발 트렌드에 맞춘 현장 실무 중심의 취업교육
♣ 전액국비무료교육(개인부담금 없음)
♣ 교재 및 기자재 무상지원
♣ 정규수업후 강의실(실습실) 개방
♣ 출석률 및 교육우수자 포상
▶ 커리큘럼(교육내용)
|
교육과목 |
내용 |
세부내용 |
|
웹 기초 |
HTML |
ㅁ 개발환경 설정 및 HTML 개요ㅁ HTML Basicㅁ HTML 실전 마크업 및 레이아웃 |
|
CSS |
ㅁ CSS 기초ㅁ 주요 속성 |
|
|
Javascript |
ㅁ 자바 스크립트 기초 ㅁ 자바 스크립트 반복문, 제어문ㅁ 여러가지 객체 |
|
|
JQuery |
ㅁ JQuery 기초ㅁ JQuery Effects |
|
|
HTML5 핵심 |
웹 개발 환경 구축 |
ㅁ Aptana 3.0 설치 ㅁ Firefox, Chrome 등 최신 웹 브라우저 설치 ㅁ Firefox Add-ons 및 Chrome Extension ㅁ 명확한 정보 구조 설계ㅁ HTML 5의 요소 성격의 구분 Contents Model |
|
차세대 웹 표준(Next Web Standard) HTML5 |
ㅁ 명확한 정보 구조 설계ㅁ HTML 5의 요소 성격의 구분 ㅁ HTML 5의 DOCTYPE, 공통 속성 |
|
|
HTML 5의 요소 |
ㅁ 섹션 요소들과 아웃라인 알고리즘 : section, nav 등ㅁ 텍스트 시멘틱 요소 : mark, time 등ㅁ 멀티미디어 관련 요소 : video, audioㅁ 사용자의 입력을 검증하고 도와주는 서식 요소 : formㅁ HTML5 Markup 유효성 검사 (Validation) |
|
|
CSS3 핵심 |
정보구조를 돋보이게 하는 표현 요소 |
ㅁ CSS 3ㅁ CSS의 개념 및 적용방법ㅁ 상속, 겹칩, 개별성 규칙 |
|
CSS3 선택자 및 속성 |
ㅁ CSS3 선택자(Selector) , Box Md디ㅁ 배치에 관한 속성 (float vs position)ㅁ Border 관련 속성 , Background 관련 속성ㅁ Text Effects ㅁ User Interface 관련 속성, Animation, Transition 속성ㅁ Media Queryㅁ Multi-Column layoutㅁ Web font |
|
|
자바스크립트 핵심 |
함수기초 |
ㅁ 함수는 이럴때 사용해요ㅁ 함수 생성 방법 4가지ㅁ 지역변수 전역변수 구분하기ㅁ 함수 파라메터ㅁ 함수 리턴값ㅁ setIntervalㅁ setTimeoutㅁ clearInterval |
|
함수 중급 |
ㅁ 자바스크립트 엔진이 돼 보아요. - 실행 컨텍스트 2.활성화객체 - 변수객체화 4.스코프 체인 5.호이스팅ㅁ콜백함수ㅁ중첩함수ㅁ클로저란ㅁ함수에서의 this |
|
|
클래스 |
ㅁ클래스 기초ㅁ리터럴 방식으로 객체생성하기ㅁObject방식으로 객체생성하기ㅁprototype 방식으로 객체생성하기ㅁ클래스 상속문법ㅁ클래스 중급ㅁ패키지 |
|
|
jQuery 핵심 |
문법및 활용 |
ㅁDOM이란?ㅁ노드(Node)란?ㅁ엘리먼트(Element)란?ㅁHTML엘리먼트(HTMLElement)란?ㅁDOM과 HTML 페이지와의 관계ㅁjQuery 핵심 내용 정리ㅁjQuery 1.6.0~ 2.0.X 기능 둘러보기ㅁjQuery 1.10.X VS jQuery 2.0.X ㅁjQuery 신기능 소개ㅁjQuery 학습 방법ㅁjQuery 최적화 방법ㅁwebit 기반 inspector 사용법 |
|
jQuery 유틸리티와 플러그인 제작 |
jQuery 유틸리지 만들기 |
jQuery 유틸리란?ㅁjQuery 유틸리지 만드는 문법ㅁjQuery 유틸리티 제작 |
|
jQuery 플러그인 만들기 |
ㅁjQuery 플러그인 이란?ㅁjQuery 플러그인과 자바스크립트 prototype과의 관계ㅁjQuery 플러그인 만드는 문법 |
|
|
자바스크립트+ jQuery를 활용 |
모바일 UI 요소 만들기 |
ㅁ미디어 쿼리ㅁ반응형 이란?ㅁCSS3 transition 효과ㅁTouch Event ㅁswipe 원리 |
|
Node.JS
|
Node.JS 프로그래밍
|
ㅁnode.js 설치 및 개발환경 설정 ㅁ이벤트 기반 프로그래밍의 개요와 기법 ㅁBuffer, events, fs, os, path, process 등 기본 모듈의 활용 ㅁexpress 프레임워크 설치 및 웹서버 구축 ㅁget 방식 post 방식 요청 파라미터 추출 및 응답 ㅁ여러가지 외부모듈(ejs, mime, socket.io 등)의 설치 및 사용 ㅁejs(embeded javascript) 모듈을 활용한 동적인 웹페이지 출력하기 ㅁsocket.io 모듈을 이용한 실시간 데이터 전송 ㅁChattingㅁRoom 서비스 구현 |
|
프로젝트 |
프로젝트 기획 프로젝트 설계 프로젝트 개발 |
ㅁ주제선정, 벤치마킹, 스토리보드 ㅁ요구사항분석, 시스템 분석 및 설계, DB 모델링 ㅁ부트스트랩 템플릿을 활용한 프로젝트 UI구성 ㅁ개발환경 설정, 프로젝트개발, 테스트 및 디버깅작업, 발표 |
★국비무료★ 빅데이터/사물인터넷/자바/안드로이드개발자 취업과정...
