무엇을 어떻게 할까 ?What and How

발표자 소개

• 안병욱 elaborate

세미나 목적

• 여러분께 질문을 던지기 위한 세미나

• 모르셔도 이제 공부하면 된다

발표 순서

• 우리가 만들 것

• 우리가 알아야 할 것

• 우리가 준비 할 것

우리가 만들 것

• 설마 모르지는 않겠죠 ?– 모바일 페이지

– 일반 웹페이지와 다른 점은 ?– 만드는 이유는 ?– 고려할 점은 ?

• http://www.drostdesigns.com/mobile-web-design-principles-to-consider-top-7/

• http://naradesign.net/wp/2011/05/27/1483/

우리가 알아야 할 것

• 웹 페이지의 구성 (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)• http://osan.kaist.ac.kr/~elaborate/seminar_ready/form_and_lin

k.php

– 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 Mobile 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 BrowserWeb 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, like Gecko) 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: [value was stripped]

click

중간점검Server

Request

DB

Django

Check ID and PWPage Generate - HTML - CSS - Javascript

query

Web Server

Handler

ResponseSession saveData Save ……

Project Management &Bug/Issue Track

• 목표가 무엇인지

• 무엇을 구현할지

• 어떻게 구현할지

• 임무를 부여하고 , 상태를 보고 하고 , 개발상황을 점검한다

VCS• Version Control System

– 프로그램 개발을 하면서 중간중간 단계를 저장하는 것

• This will be covered by someone• There are good maxims

– 커밋은 저장이 아니다 . ( 기능의 단위 , 생각의 단위로 커밋을

하여 후에 되돌릴 수 있도록 한다 )– 커밋하기 전에 생각하자 (3 번 , 나중에 후회하지 않도록 )– 설명은 명확하고 플젝하는 사람이면 이해할 수 있게

TDD

• Test Driven Development• Software Development Process • 심플하게 표현하면

–테스트를 만족시키는 걸 짜니 프로그램이

완성이 되더이다 허허……

다시 점검

테스트 코드 작성

실행결과 확인

구현

TDD 도 나중에 더 자세히

시작

저장소PushPull

VCS 에서 더 자세히 다룰 것이다

여러분 개발 공간

우리가 준비할 것

• 환경구축

– Vim, mercurial, etc… – Don’t waste your type!

• 코드를 분석하기

– Get what they have done!

• 잡다한 공부하기

– Please know as much as possible

끝

• 질문 있으신가요 ?• Programming ≠ coding