IT Lab

• http://html5doctor.com/

웹 클립 아이콘

• 사파리에서 특정 페이지를 홈 스크린으로 만들때 모바일 사파리는 아이콘으로 만들 웹 클립 파일을 해당 웹페이지에서 찾는다.
• 파일명: apple-touch-icon-precomposed.png
• 다른 곳에 파일을 두고 있다면 link 태그로 지정하면 된다.

<link rel="apple-touch-icon" href="gilbird.png" />
<link rel="apple-touch-icon-precomposed" href="gilbird.png" />

풀 스크린

• 다음 태그를 넣어두고 페이지를 홈 스크린으로 등록 하면 모바일 사파리는 풀 스크린으로 시작한다.

<meta name="apple-mobile-web-app-capable" content="yes" />

상태바 없애기

• 풀 스크린 모드로 동작하는 경우 아래 메타 태그로 상태바도 조정할 수 있다.

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

시작 화면

• 풀스크린 모드로 시작할 때 다음 메타 태그로 시작화면을 띄울 수 있다.

<link rel="apple-touch-startup-image" href="loading.png" />

HTML5에서는 데이터 저장 관련하여 몇가지 기능을 추가 제공한다.

• localStorage
• sessionStorage
• client-side DB

localStorage

• 웹브라우저를 종료해도 데이터가 남는다.
• 동일한 소스(도메인, 프로토콜, 포트)로부터 데이터를 쓸 수 있다.
• 웹 애플리케이션에 유용
• 예)
• 키/값 저장
• localStorage.setItem( ‘gilbird’, 2010);
• 키/값 로드
• var year = localStorage.getItem( ‘gilbird’);
• 키/값 모두 삭제
• localStorage.clear();

sessionStorage

• 데이터는 윈도우 객체에 저장
• 해당 윈도우만 인식
• 예)
• 위 localStorage 예에서 sessionStorage라고 바꿔 쓸 수 있음

Client-Side DB

• 자바스크립트 DB API
• INSERT, UPDATE, SELECT, DELETE 지원
• 트랜젝션 지원
• DB 접속
• db = openDatabase( shortName, version, displayName, maxSize);
• 사파리의 경우 maxSize를 5MB 기본 지원(용량초과시 5MB 추가됨 - 확인필요)
• 브라우저 설정에서 로컬 DB 크기를 볼 수 있음
• DB 생성
• db.transaction(
      function(transaction) {
          transaction.executeSql(
              'CREATE TABLE IF NOT EXISTS 테이블명 (컬럼_리스트);'
          );
      }
  );
• INSERT
db.transaction(
    function(transaction) {
        transaction.executeSql(
            'INSERT INTO 테이블명 (컬럼_리스트) VALUES (?);',
            [값_리스트],
            function() {
                // INSERT후 실행문

            },
            transactionErrorHandler,       // SQL 실패시 실행
            transactionSuccessHandler  // SQL 성공시 실행
        ); } );
• 에러 처리
• function transactionErrorHandler( transaction, error) {
      alert( error.message + “:” + error.code);
      return true;
  }
• 리턴값
• true – 치명적 오류. 진행 중단
• false – 계속 진행
• SELECT
• db.transaction(
      function(transaction) {
          transaction.executeSql(
              'SELECT * FROM 테이블명 WHERE 컬럼=?;',
   [값_리스트],
   function( transaction, result) {
       for (var i=0; i < result.rows.length; i++) {
           var row = result.rows.item(i);
           // row 처리
       }

   },
   transactionErrorHandler,       // SQL 실패시 실행
   transactionSuccessHandler  // SQL 성공시 실행
); } );
• DELETE
• db.transaction(
       function(transaction) {
           transaction.executeSql('DELETE FROM 테이블명 WHERE id=?;',
           [값], null, transactionErrorHandler);
        }
  )
  

이제 대세는 HTML 5이다.

물론 새로운 요구사항이 생겨서 플래시같은 또다른 플러그인이 안나오라는 보장은 없지만 이렇게 새로운 스펙으로 합쳐지고 쪼개지는 현상이 계속 반복될 것이다.

이제는 다시 통합 스펙으로 나올 시기인데 그 결과물은 바로 HTML 5가 될 것이다.

• 웹 플랫폼에 대해서 강조
  • iPhone
  • Opera
  • Safari
  • Android
  • Chrome
• 자바스크립트 속도 향상
• HTML 5
  • 킬러앱을 만들 절호의 기회
  • 웹을 더 빠르게~
• HTML 5 특징
• 캔버스
  • <canvas> 태그 사용
  • 실버라이트 플래시 없이 사용가능
  • 플러그인 없음!
  • 자바스크립트, DOM, CSS로만 가능
  • 픽셀 단위로 제어
• 3D 그래픽
  • 자바스크립트 API
  • 데모
    • 파이어폭스, IE, 크롬에서 동작
• 비디오
  • <video> 태그 사용
  • 유튜브에서 사용
• 지역 위치 30:00
  • Geo Location API
  • 구글 맵에서 지원
  • 웹은 개발 플랫폼이다!
  • 로컬에서 자바스크립트 사용 가능
• 웹 앱스 44:00
• App Cache
• 오프라인모드
• Palm webOS 48:00
• HTML, CSS, JavaScript
• 백그라운드 프로세싱 53:00
• 자바스크립트를 백그라운드로 처리
• UI 반응성 향상
• Google App Engine for Java 56:00
• 구글에서 웹 인프라 제공
• memcache APi
• SSL 지원
• 백그라운드 프로세싱
• 자바 언어 지원
• 다른 동적 자바 언어 지원
• 데모 1:00:00
• Google Web Toolkit 1:05:00
• 구글 앱 엔진의 프론트 엔드
• CSS는 디버깅하기 힘듬
• GWT는 그점을 커버함
• GWT는 브라우저에서 바로 디버깅 가능
• 디버깅 데모 1:06:50
• 자바스크립트 파일이 크면 로딩타임이 오래 걸림
• 따라서 파일을 조각내야함
• runAsync() split 포인트 지정으로 부하 조정가능
• runAsync()를 쓰면 최대 7배 대기시간이 줄어듬
• Google Web Elements 1:12:10
• 검색, 뉴스, 지도, 채팅 등
• 자신의 페이지에 내장할 수 있음
• 안드로이드 1:17:30
• 차기버전 도넛
• 질의 하나로 웹, 연락처 등 모든 것을 검색
• 사용자 행동 빈도에 따라 맞춰 동작
• 스피치 컨트롤 API
• TTS API (텍스트를 읽어줌)
• SVOX 오픈 소스