'html5'에 해당하는 글 7건

Google Web Designer

html5 2013.10.01 15:48

구글에서 Web Designer 어플리케이션을 내놓았다.


방금 설치 해서 잠깐 사용해보니 예전 나모 웹에디터로 웹 페이지를 뚝딱 생성해냈을 때의 놀라움을 느끼고 있다. ㅋ

유저 인터페이스는 포토샵과 유사(?)하고 몇번 클릭만 해보면 쉽게 사용 가능할 것 같다.


현재는 베타 버전으로 Window, Mac을 지원하며 아쉽게도 Linux는 지원하지 않는다.


Google Web Designer 도움말

Google Web Designer 다운로드


저작자 표시
신고

'html5' 카테고리의 다른 글

Google Web Designer  (0) 2013.10.01
[30회 정기세미나] HTML5 실무적용 전략 발표자료  (0) 2011.07.07
HTML5 Video  (0) 2011.05.12
HTML5 Canvas Shapes 2  (1) 2011.04.21

WRITTEN BY
빵군
Web Programmer HOONS닷넷(http://www.hoons.kr) 2011 ASP.NET 시삽 http://about.me/y2kpooh

받은 트랙백이 없고 , 댓글이 없습니다.
secret
7월 6일(수) 포스코 센터 마이크로소프트 5층에서 진행된 Hoons 닷넷 세미나 자료를 공유합니다.

에어콘문제와 인터넷 문제로 조금 아쉬운 세미나였지만... 많은 분들이 오셨고 호응이 좋아서 기분 좋은 세미나였습니다. ^^

저작자 표시
신고

'html5' 카테고리의 다른 글

Google Web Designer  (0) 2013.10.01
[30회 정기세미나] HTML5 실무적용 전략 발표자료  (0) 2011.07.07
HTML5 Video  (0) 2011.05.12
HTML5 Canvas Shapes 2  (1) 2011.04.21

WRITTEN BY
빵군
Web Programmer HOONS닷넷(http://www.hoons.kr) 2011 ASP.NET 시삽 http://about.me/y2kpooh

받은 트랙백이 없고 , 댓글이 없습니다.
secret

HTML5 Video

html5 2011.05.12 20:58


유튜브의 등장으로 웹을 통한 동영상 서비스를 진행하는 기업들이 전세계적으로 많이 늘어났다. 국내에서도 대부분의 포털 기업들이 앞다투어 동영상 서비스를 선보였다.
웹을 통한 동영상 서비스 제공을 위해서는 순수 브라우저 환경에서는 불가능하며, 별도의 플러그인(Plug In)을 설치해야 한다. 대표적으로 어도비의 플래시 플레이어(Flash Player)와 마이크로소프트 실버라이트를 들 수 있다.
앞서 언급된 기업들도 마찬가지로 플래시와 같은 별도의 플러그인을 설치해야만 한다. 하지만 HTML5의 등장으로 더 이상 별도의 플러그인의 설치 없이도 동영상 서비스가 가능하게 되었다. HTML5에서 새롭게 추가된 비디오 마크업 태그만으로 말이다.

HTML5 Video 브라우저별 지원현황
아래표와 같이 최신 브라우저에서는 모두 Video태그가 지원이 되며 모바일의 경우는 거의
100% 지원된다고 보면 된다. 브라우저별 Video태그 지원현황은 아래와 같다.

(출처 : http://www.findmebyip.com/litmus)

HTML5 Video Codecs 브라우저별 지원현황
대부분의 최신 브라우저에서 Video 태그가 지원이 되지만 브라우저 별로 지원되는 코덱은 다르다.
현재까지는 코덱 관련한 표준이 정해지지 않았기에 Video태그를 사용하기 위해서는 브라우저별 코덱 지원사항을
파악할 필요가 있다.
(출처 : http://www.findmebyip.com/litmus)

HTML5 Video 브라우저 지원유무 확인
대부분의 최신 브라우저는 Video 태그를 지원하지만 오래된 브라우저를 사용하는 고객이 존재하기 마련이다.
아래 코드를 사용하여 현재 브라우저가 Video 태그를 지원하는지의 여부를 알 수 있다.

function supports_video(){     return !!document.createElement("video").canPlayType;}
브라우저가 HTML5 Video를 지원한다면 Video 엘리먼트 DOM 객체가 canPlayType() 메소드를 가지게 되며 지원되지 않는 브라우저는 해당 메소드가 존재하지 않는다.

더 쉬운 방법으로는 Modernizr 라이브러리를 사용하는 방법이다.
Modernizr는 HTML5의 다양한 기능을 지원하는지 확인하는 자바스크립트 라이브러리로 위와 같은 코드를 작성하는 수고를 덜어준다.(Modernizr download http://www.modernizr.com/)

if(Modernizr.video){
    alert("동영상 지원이 된다.");
}else{   
    alert("동영상 지원이 되지 않는다.");
}
HTML5 Video 태그 사용
Video 태그를 사용하기 위해서는 아래와 같이 코딩하면 된다.
Video 태그를 지원하는 브라우저는 source 엘리먼트를 읽어 각 브라우저별 지원 코덱일 경우 동영상 Play하게 된다.
Video 태그를 지원하지 않는 브라우저의 경우는 아래소스와 같이 대체 텍스트를 출력된다.

아이폰 Video태그 구동화면





Video 태그 주요 속성

속성 설명
audio muted 오디오 소리유무, 음소거
autoplay autoplay 로딩시 비디오 자동 재생 설정
controls controls 재생 컨트롤 표시
height pixels 동영상 높이 값
loop loop 동영상 자동 재시작
poster url 동영상 스틸컷 이미지
preload preload 페이지 로딩과 동시에 브라우저는 비디오 다운로드
src url 동영상 경로
width pixels 동영상 가로 값
(출처 : http://w3schools.com/html5/html5_video.asp)


Video 태그 미지원 브라우저 처리
대표적으로 Video.JS, JW Player, Mediaelement.JS 등이 있으며 해당 라이브러리를 사용하면 Video 태그가 지원되지 않는 브라우저의 경우 Flash FallBack을 이용하여 동영상 서비스를 제공하게 된다.
20종의 HTML5 Video Player : http://praegnanz.de/html5video/


안드로이드 Tip
안드로이드 웹 브라우저에서는 HTML5 Video를 제대로 실행하기 위해서는 source의 type을 지정하면 안된다.
또한 Play의 경우도 자바스크립트를 사용해야한다. 아래와 같이 말이다.


var video = document.getElementById('video'); video.addEventListener('click',function(){ document.play();} ,false);

(출처 : http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/)

HTML5 Video
웹에서 img태그를 사용하여 이미지를 보여주듯이 동영상도 비디오 태그만 잘 알고 있다면 별도의 플러그인 없이도 웹 표준 기술인 HTML만으로 동영상 서비스가 가능해진다.
HTML5는 2014년 최종 권고화 예정인 기술로 아직 표준화 작업이 진행 중이지만, 현재 HTML5 관련 기술을 접목한 많은 서비스가 등장하고 있으며 다양한 개발시도가 이뤄지고 있다.
특히 유튜브, 비메오와 같은 업체들의 경우 HTML5 동영상 서비스를 시범적으로 제공하고 있으며, HTML5의 브라우저 호환성과 관련해서도 자바스크립트 라이브러리를 사용한 해결방법 등을 찾아내고자 노력하고 있다.

HTML5 Video Demo 및 자세한 사항을 확인하고 싶다면 아래 사이트를 참고하길 바란다.
http://www.html5video.org/demos/
http://diveintohtml5.org/video.html

저작자 표시
신고

'html5' 카테고리의 다른 글

[30회 정기세미나] HTML5 실무적용 전략 발표자료  (0) 2011.07.07
HTML5 Video  (0) 2011.05.12
HTML5 Canvas Shapes 2  (1) 2011.04.21
HTML5 Canvas Shapes 1  (0) 2011.04.20

WRITTEN BY
빵군
Web Programmer HOONS닷넷(http://www.hoons.kr) 2011 ASP.NET 시삽 http://about.me/y2kpooh

받은 트랙백이 없고 , 댓글이 없습니다.
secret

HTML5 Canvas Shapes 2

html5 2011.04.21 21:32

아래와 같은 모서리가 둥근 사각형을 그려보자.

 


위 도형을 모서리를 처리하기 위하여 quadraticCurveTo 메서드에 대해서 먼저 알아야 한다.

context.quadraticCurveTo(controlX, controlY, endX, endY);

quadraticCurveTo 메서드 동작원리

(출처 : html5canvastutorials)
context point로 moveTo 메서드를 사용하여 point를 이동 후 control point 좌표를 quadraticCurveTo 메서드 인자 controlX, controlY에 지정한다. endX, endY 인자는 곡선의 끝 점을 지정한다.







    



quadraticCurveTo 메서드를 이용하여 모서리가 둥근 사각형을 그려보자.


위 소스의 도형 그리기 순서는 아래 표와 같다.
ⓛ 15라인
 ② 16라인
 ③ 17라인
④ 18라인
⑤ 19라인
  ⑥ 20라인
 ⑦ 21라인
 ⑧ 22라인



위 소스를 이용하여 개인적으로 활동하는 커뮤니티 사이트 로고를 한번 만들어보겠다.
위 도형에 텍스트와 이미지를 추가하는 수준이다. 소스는 별다를게 없다.



위 소스에서 새롭게 등장한 text관련 메서드와 이미지 관련 메서드는 다음 강좌에서...-_-;
저작자 표시
신고

'html5' 카테고리의 다른 글

HTML5 Video  (0) 2011.05.12
HTML5 Canvas Shapes 2  (1) 2011.04.21
HTML5 Canvas Shapes 1  (0) 2011.04.20
HTML5 Canvas Line2  (0) 2011.04.19

WRITTEN BY
빵군
Web Programmer HOONS닷넷(http://www.hoons.kr) 2011 ASP.NET 시삽 http://about.me/y2kpooh

받은 트랙백이 없고 , 댓글 하나 달렸습니다.
  1. 잘 보구 가영^^짱짱 도움됬어여!
secret

HTML5 Canvas Shapes 1

html5 2011.04.20 20:42

오늘은 Canvas를 이용하여 각종 도형을 그려보자.

우선 아래와 같은 사각형을 그려보자.

Canvas는 사격형을 그리기 위한 rect 메서드를 지원한다.
context.rect(topLeftCornerX,topLeftCornerY,width,height);

 

rect 메서드를 이용하여 사각형을 그린 소스는 아래와 같다.


6번라인은 rect 메서드를 이용하여 위 그림과 같이 X, Y좌표로 이동하여 width, height 각각 100px의 사각형을 그리게 된다. 7번 라인은 사각형의 배경색을 지정하기 위한 fillStyle 프로퍼티이다. fileStyle에 #000의 배경색을 지정하였다. 8번 라인은 fillStyle로 지정된 배경색을 채우기 위한 명령어 fill 메서드이다. stroke 메서드와 마찬가지로 이 명령어를 작성하지 않으면 배경색이 지정되지 않으니 꼭 명심해야 한다.
9번라인은 라인두께를 지정하고 10번 라인은 선의 색깔지정한다. 11번 라인은 stroke 메서드로 선을 그리게 된다.


다음은 아래와 같은 원을 그려보자.


Canvas는 원을 그리기 위한 몇가지 메서드를 지원하고 있다.
오늘은 arc 메서드를 사용해보겠다.
context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);

arc 메서드의 인자에 대해서 간략히 설명하면 centerX, centerY는 그리기 위한 원의 center point이다.
redius는 반지름이며, startingAngle은 원을 그리기 위한 시작점이며 endingAngle 원의 끝점이다.
antiClockwise는 boolean타입이며 true일 경우 시계방향으로 원을 그리고 false일 경우 시계반대 방향으로 그리게 된다.

 

6번 라인의 arc 메서드를 사용한 부분을 제외하고는 사각형 그리기와 동일하다.
arc 메서드를 이용하여 원의 중앙 점 좌표 70,70를 찾아 간 후 반지름 50의 원을 시작점 0에서 끝점은 360도의 원형을 그리기 위하여 Math.PI를 사용하였다.
 

이젠 사각형도 그렸고 원도 그렸으니 삼각형도 한번 그려보자.
Canvas는 삼각형을 지원하는 메서드는 존재하지 않는다.
하지만 moveTo, lineTo 메서드만 알면 못 그릴게 없으니.. 아래와 같은 삼각형을 그려보자.





6번 라인부터 8번 라인까지 라인을 그린 후 9번 라인에 처음 보는 녀석이 있다. closePath 메서드이다.
이 녀석은 마지막 선에서 시작 점으로 돌아간다.
위 소스를 유심히 보면 마지막 선에 대한 lineTo 메서드 대신 closePath 메서드를 사용한 걸 알 수 있다.
저작자 표시
신고

'html5' 카테고리의 다른 글

HTML5 Canvas Shapes 2  (1) 2011.04.21
HTML5 Canvas Shapes 1  (0) 2011.04.20
HTML5 Canvas Line2  (0) 2011.04.19
HTML5 Canvas Line1  (0) 2011.04.19

WRITTEN BY
빵군
Web Programmer HOONS닷넷(http://www.hoons.kr) 2011 ASP.NET 시삽 http://about.me/y2kpooh

받은 트랙백이 없고 , 댓글이 없습니다.
secret

HTML5 Canvas Line2

html5 2011.04.19 20:38


오늘은 Line 굵기를 조절하는 방법과 선의 색깔, 그리고 선의 끝 맺음 처리를 다양하게 시도해 보겠다.

선의 굵기를 지정하는 lineWidth가 존재한다.

context.lineWidth=[value];

선의 굴기를 지정해보자.





위 소스의 실행 결과는 아래와 같다.

선의 색상을 지정해보자. 위 소스 코드에 아래 소스를 추가한다.

context.strokeStyle="#fff000";

실행 결과는 아래와 같다.


이제 선 lineCap을 사용한 예제를 확인 해보자.










실행 결과는 아래와 같다.

저작자 표시
신고

'html5' 카테고리의 다른 글

HTML5 Canvas Shapes 2  (1) 2011.04.21
HTML5 Canvas Shapes 1  (0) 2011.04.20
HTML5 Canvas Line2  (0) 2011.04.19
HTML5 Canvas Line1  (0) 2011.04.19

WRITTEN BY
빵군
Web Programmer HOONS닷넷(http://www.hoons.kr) 2011 ASP.NET 시삽 http://about.me/y2kpooh

받은 트랙백이 없고 , 댓글이 없습니다.
secret

HTML5 Canvas Line1

html5 2011.04.19 20:14

HTML5 Canvas 강좌를 시작해보고자 한다.

첫 번째 주제는 Canvas Line이다.

Canvas 브라우저 지원 현황

(출처 : http://www.findmebyip.com/litmus)



우선 Line을 그리기 위하여 Canvas 엘리먼트를 만들자.











9라인은 Canvas 엘리먼트의 마크업 형식이며 초기에는 아무 내용도 없고 경계선도 없다.
Canvas에 접근하기 위한 id속성과 Canvas크기를 width와 height를 각각 지정하였다.
5번라인은 DOM에서 Canvas 엘리먼트를 찾게 되며 모든 Canvas는 드로잉 컨텍스트를 갖으며
6번라인은 Canvas에 대해 getContext() 메소드를 호출할 수 있다. 이때 "2d"라는 문자열을 getContext()
메소드에 넘겨줘야 한다.

여기까지가 앞으로 모든 Canvas 예제를 하기 위한 준비과정이다.
이제 오늘의 주제인 Line을 한번 그려보자.

HTML5에서는 Line을 그리기 위하여 lineTo, moveTo, stroke 메서드를 지원한다. 각 메서드에 대한 설명을 아래와 같다.


context.moveTo(x,y); //x,y좌표로 이동
context.lineTo(x,y); //x,y좌표까지 선을 이동
context.stroke(); //선을 그려라

위 메서드를 이용하여 선을 그려보자.








위 소스를 실행항 브라우저는 아래와 같은 실행화면이다.



실행순서는 아래 이미지와 같다.
moveTo메서드를 이용하여 30,50좌표로 이동한 후 lineTo메서드를 이용하여 400,50좌표, 30,100좌표를
순차적으로 이동한다. 그리고 stroke메서드를 이용하여 선을 그리게 된다.
여기서 중요한 점은 stroke메서드를 사용하지 않으면 Canvas는 선이 나타나지 않는 점이다.


그렇다면 별을 한번 그려보자.






 

조금 엉성한 별 모양이기는 하지만 위 소스의 결과물은 아래와 같다.

저작자 표시
신고

'html5' 카테고리의 다른 글

HTML5 Canvas Shapes 2  (1) 2011.04.21
HTML5 Canvas Shapes 1  (0) 2011.04.20
HTML5 Canvas Line2  (0) 2011.04.19
HTML5 Canvas Line1  (0) 2011.04.19

WRITTEN BY
빵군
Web Programmer HOONS닷넷(http://www.hoons.kr) 2011 ASP.NET 시삽 http://about.me/y2kpooh

받은 트랙백이 없고 , 댓글이 없습니다.
secret