Download
1 / 20
200 likes | 440 Views
무엇을 어떻게 할까 ?. What and How. 발표자 소개. 안병욱 elaborate 2009 년 휠장 매우 많은 별명이 있음. 세미나 목적. 여러분께 질문을 던지기 위한 세미나 모르셔도 이제 공부하면 된다. 발표 순서. 우리가 만들 것 우리가 알아야 할 것 우리가 준비 할 것. 우리가 만들 것. 설마 모르지는 않겠죠 ? 모바일 페이지 일반 웹페이지와 다른 점은 ? 만드는 이유는 ?. 우리가 알아야 할 것. 웹 페이지의 구성 (HTML, CSS, Javascript )
E N D
무엇을 어떻게 할까? What and How
발표자 소개 • 안병욱 elaborate • 2009년 휠장 • 매우 많은 별명이 있음
세미나 목적 • 여러분께 질문을 던지기 위한 세미나 • 모르셔도 이제 공부하면 된다
발표 순서 • 우리가 만들 것 • 우리가 알아야 할 것 • 우리가 준비 할 것
우리가 만들 것 • 설마 모르지는 않겠죠? • 모바일 페이지 • 일반 웹페이지와 다른 점은? • 만드는 이유는?
우리가 알아야 할 것 • 웹 페이지의 구성 (HTML, CSS, Javascript) • 서버와 클라이언트 (HTTP) • DB • VCS (esp. mercurial) • TDD • Other useful Keywords
Web Page(HTML) • HTML • HTML version (4.0, 5.0) • Markup Language • Tags, attributes • Right thing to right use (ex. Submit and Link) • Use Standard • http://www.w3.org/MarkUp/ • http://validator.w3.org/
Web Page(CSS) • CSS • CSS2, CSS3 • #id .class (usually) • Overriding property • Browser dependency • Also use standard • http://www.w3.org/Style/CSS/ • http://jigsaw.w3.org/css-validator/
Web Page (Javascript) • JavaScript • It has nothing to JAVA (ex. Car & Carpet) • Easy to use, Easy to be wrong • Please do little tutorial • http://www.w3schools.com/js/default.asp • Don’t make it HEAVY • Browser Dependency • Different API, Different performance • Lots of Library - Jquery, Prototype, mootools… • Most things happens in Web Browser • Please use standard • http://www.jslint.com/
Server • What is it? • Generates and give page (response) • Save your state (session) • Data (DB) • Python(Django), PHP(PHPCake), other framework can be used • It has webserver (ex. Apache, LightHttpd…)
Client • In your project • Your web browser in Mobile • A thing that requests • Limited Cache • Limited session • Slower than other Desktop Web Browser • A variety of Web Browsers Engine • IE, FF, Opera, Chrome …
HTTP • It is a protocol • POST and GET • Request(Client Action – What page?) • Response (Server Action – Webpage) • You should understand how it works • Or you will make foolish webpage
DB • That saves data • SQL • In Django, it uses ORM(What is it?) • ARA may not use this, but it is better to know this • DBMS - MySQL, SQLite, PostgreSQL … • Server gets Data from DB and use it for Page generation
중간점검 Server Client Request Web Browser Web Page HTML, CSS, JavaScript --> POST /account/login/ HTTP/1.1 Host: ara.kaist.ac.kr Connection: keep-alive Referer: http://ara.kaist.ac.kr/ Content-Length: 33 Cache-Control: max-age=0 Origin: http://ara.kaist.ac.kr User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7) AppleWebKit/534.24 (KHTML, likeGecko) Chrome/11.0.696.71 Safari/534.24 Content-Type: application/x-www-form-urlencoded Accept: application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5 Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8 Accept-Charset: UTF-8,*;q=0.5 Cookie: [valuewasstripped] click
중간점검 Server Web Server Django Handler Check ID and PW Request Page Generate - HTML - CSS - Javascript Response query Session save Data Save …… DB
VCS • Version Control System • 프로그램 개발을 하면서 중간중간 단계를 저장하는 것 • This will be covered by someone • There are good maxims • 커밋은 저장이 아니다.(기능의 단위, 생각의 단위로 커밋을 하여 후에 되돌릴 수 있도록 한다) • 커밋하기 전에 생각하자 (3번, 나중에 후회하지 않도록) • 설명은 명확하고 플젝하는 사람이면 이해할 수 있게
TDD • Test Driven Development • Software Development Process • 심플하게 표현하면 • 테스트를 만족시키는 걸 짜니 프로그램이 완성이 되더이다 허허……
다시 점검 VCS에서 더 자세히 다룰 것이다 저장소 여러분 개발 공간 Push Pull 시작 TDD 도 나중에 더 자세히
우리가 준비할 것 • 환경구축 • Vim, mercurial, etc… • Don’t waste your type! • 코드를 분석하기 • Get what they have done! • 잡다한 공부하기 • Please know as much as possible
끝 • 뭐 질문 있으신가요? • Programming ≠ coding
