모바일 홈페이지 제작 발 표 일 : 2012년 11월 28일 발 표 자 : 07’ 김 동 희
대목차 Mobile Homepage, Div tag, Canvas, QR code p3 ~ p15 동영상 재생, 기술소개 추가, Mobile CG Home – 고려사항, CG Home – 경량화, CG Home – 확대화 p16 ~ p29
목차 Moblie Homepage 4p ~ 5p Div tag 6p ~ 7p Canvas 8p ~ 10p QR code 11p
Mobile Homepage Html(Hyper Text Markup Language)5 - 어떠한 브라우저에서도 최대한 공통적으로 보여 질 수 있도록 하기 위한 웹 표준 CSS(Cascading Style Sheets) - 웹 문서의 전반적인 스타일을 미리 저장해 두어서 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였음
Mobile Homepage PC Mobile http://cglab.hs.ac.kr http://cglab.hs.ac.kr http://cglab.hs.ac.kr/m/index.html
Div tag Div(Division Marker) - 기본적으로 영역을 구분해주는 역할 - 세세한 디자인적 사항은 Div로 CSS에 설정한 디자인을 가져옴
Div tag Hearder Section Footer
Canvas Canvas - 캔버스 요소는 HTML5의 일부이며 2D 형태와 비트 맵 이미지의 동적인 스크립트 렌더링 할 수 있음
Canvas 좌표계 (0, 0) X y
Canvas Image class와 drawImage() 메소드를 이용하여 원하는 지점에 이미지 삽입
QR code Naver에서 QR code 생성 QR코드 scan 어플로 QR코드를 scan하여 모바일 홈페이지에 접속
문제점 웹에선 동영상이 재생이 되지만, 스마트폰에선 재생이 안됨
앞으로의 계획 스마트폰에서도 동영상 재생 할 수 있도록 구현
구현화면
참고문헌 롭 호크스 저 “HTML5 Canvas” , 에이콘 25p ~ 29p, 113p ~ 125p, 203p ~ 245p
목차 문제해결(동영상 재생) 17p ~ 19p 기술소개 추가 20p ~ 21p Mobile CG Home – 고려사항 22p Mobile CG Home - 경량화 23p ~ 24p Mobile CG Home – 확대화 25p ~ 26p
문제해결(동영상 재생) <script language="javascript"> var MyVideo = document.getElementByld('MyVideo'); MyVideo.addEventListener('click',function(){MyVideo.play();},false); </script> <video id="MyVideo" width="600" height="520" controls> <source src="images/ar.mp4" /> </video>
문제해결(동영상 재생) IIS 웹서버에서 지원하는 확장자가 아닐경우 별도로 추가해줘야함 -> IIS 웹서버에서 MIME 형식에 mp4 확장자를 추가해줌
문제해결(동영상 재생)
기술소개 추가
기술소개 추가
Mobile CG Home - 고려사항 고려사항 1. CG Homepage 경량화 -> 불필요한 메뉴 생략 -> 불필요한 image, flash 생략 2. CG Homepage 확대화 -> 모든 text, image등의 사이즈 확대
Mobile CG Home - 경량화 CG Homepage 경량화 – PC CG Home
Mobile CG Home - 경량화 CG Homepage 경량화 – Mobile CG Home
Mobile CG Home - 확대화 CG Homepage 확대화 – PC CG Home
Mobile CG Home - 확대화 CG Homepage 확대화 – Mobile CG Home
문제점 Mobile 마다 해상도가 다르기 때문에 기준을 맞출 해상도가 필요함
문제점 GalaxyS2 NexusS
참고문헌 없음