'HTML5'에 해당되는 글 17건

  1. 2012.07.31 리눅스에서 웹킷빌드하기 (3)
  2. 2012.07.26 mimetype 목록
  3. 2012.06.12 [HTML5] Web Storage : 웹 스토리지 (1)
  4. 2011.10.26 자바스크립트 내장함수들 (1)
  5. 2010.12.15 Webkit basic (7)
  6. 2010.10.18 인터넷 에러코드 모음. (1)
  7. 2010.08.27 HTML5 소개자료. (1)
HTML52012.07.31 10:13


http://bunhere.tistory.com/81

WebKit에 대한 공부를 시작해 보려고 한다.
(last updated : 2012-02-21)

개발 환경은 우분투 11.10
gcc등은 이미 설치했다.

[WebKit 관련 모듈 설치]
(정리중 손빌드가 아닌 버전을 위해)
sudo apt-get install automake autotools libtool
 flex bison gperf
sudo apt-get install gtk-doc-tools libgpg-error-dev intltool

sudo apt-get install libsqlite3-dev libxslt-dev libxtst-dev libicu-dev libgeoclue-dev icon-naming-utils libXt-dev
 libgstreamer-plugins-base0.10-dev libgail-dev

[WebKit 다운로드]

먼저 Webkit을 하려면 소스부터 가져와야 한다.

WebKit 소스는 webkit.org(http://webkit.org/)의 svn 저장소에서 가져오거나 Nightly Build(http://nightly.webkit.org/)를 가져올 수 있다.

svn을 이용해 가져오는 법.(http://webkit.org/building/checkout.html)
svn checkout http://svn.webkit.org/repository/webkit/trunk WebKit

실행하면 약간의 시간이 걸려서 소스를 받을 수 있다.

소스를 받고 나면 필요한 모듈들을 설치해야 한다.
automake, autotools, libtool등을 apt-get install로 설치한다.
설치하는 김에 apt-get install gtk-doc-tools도 설치했다.

[WebKit 인스톨]
아래 명령을 실행한다.
/Scripts/Tools/build-webkit --gtk --release
패키지 의존성 등의 문제가 없다면 WebKitBuild/Release 아래에 설치가 완료된다.

(끝)
-----------------------------------------------------------------------------
* jhbuild 관련.
./autogen.sh --prefix /home/ryuan/workspace/webkit/webkit/WebKitBuild/Dependencies/Root --libdir '/home/ryuan/workspace/webkit/webkit/WebKitBuild/Dependencies/Root/lib'

WebKit 손(?) 인스톨 (옛날 자료)
(현재 폴더에서 Make를 실행할 수도 있다. 하지만 추천하지 않는다. clean 하는 작업이 꼬일 수 있다.)
설치하고 autogen.sh를 열어서 제일 아래 configure 명령을 주석(#) 처리했다.
이제부터 설치할때마다 나오는 많은 패키지 의존성 문제를 해결하고자 -_-;;

아래 두 명령을 수행후, 에러가 날때마다 적절한 패키지를 설치하고 다시 ./configure를 수행했다.
./autogen.sh
./configure

먼저 bison부터 문제 발생;;
apt-get install bison
그 다음엔 flex가 필요하다고 한다;;
apt-get install flex
다음엔 gperf
apt-get install gperf
이제 glib, gobject-2.0, gthread가 없단다.
귀찮아서 libgtk2.0-dev설치
apt-get install libgtk2.0-dev
다음 icu
apt-get install libicu-dev
다음 libxml
apt-get install libxml2-dev
다음 enchant
apt-get install libenchant-dev
다음 gail
apt-get install libgail-dev
다음 libXt
apt-get install libXt-dev
다음 libsoup
apt-get install libsoup2.4-dev

크, 여기서 문제 발생.. 최신 패키지로 설치할 때 웹킷이 요구하는 libsoup2.4-dev의 버전이 아직 우분투에 데비안화되어있지 않은 것 같다.

어쩔수 없이 libsoup은 소스 설치해야 할듯 ㅠ_ㅠ

내일 계속 해야겠다.

[LIBSOUP 설치]
libsoup을 설치하기 위해 tar를 가져올까 하다가, 어차피 버전이 뭔지 고민하고 할 필요 없어서 그냥 git에서 직접 가져오기로 했다. (http://live.gnome.org/LibSoup)

당연히 git는 설치되어 있어야 한다.
apt-get install git-core
git clone git://git.gnome.org/libsoup
이제 libsoup폴더에서 ./autogen.sh를 하니 또 에러 ;; 이번에는 GNOME_KEYRING이 문제다.
어차피 /usr 밑에 설치할 생각이었으니
./configure --prefix=/usr --without-gnome 
make install

[WEBKIT 설치 계속]
다시 webkit을 빌드하니 이젠 sqlite3이 문제네 -_-
apt-get install libsqlite3-dev
다음엔 libxslt
apt-get install libxslt-dev
그 다음엔 gstreamer 씨리즈들 -_-
apt-cache search gstreamer*해도 너무 많이 나와서 뭐가 필요한지 잘 모르겠다
일단 dev인걸 검색해서
apt-get install libgstreamer0.10-dev
apt-get install libgstreamer-plugins-base0.10-dev (이건거 같다)
휴... 겨유 configure가 끝났다.


make install 
이제 진짜 빌드 시작;;
근데 소스 코드부터 다시 땡겨와야 하나 -_-;



Posted by 삼스
HTML52012.07.26 16:09


.* application/octet-stream
.323 text/h323
.acx application/internet-property-stream
.ai application/postscript
.aif audio/x-aiff
.aifc audio/aiff
.aiff audio/aiff
.asf video/x-ms-asf
.asr video/x-ms-asf
.asx video/x-ms-asf
.au audio/basic
.avi video/x-msvideo
.axs application/olescript
.bas text/plain
.bcpio application/x-bcpio
.bin application/octet-stream
.bmp image/bmp
.c text/plain
.cat application/vndms-pkiseccat
.cdf application/x-cdf
.cer application/x-x509-ca-cert
.clp application/x-msclip
.cmx image/x-cmx
.cod image/cis-cod
.cpio application/x-cpio
.crd application/x-mscardfile
.crl application/pkix-crl
.crt application/x-x509-ca-cert
.csh application/x-csh
.css text/css
.dcr application/x-director
.der application/x-x509-ca-cert
.dib image/bmp
.dir application/x-director
.dll application/x-msdownload
.doc application/msword
.dot application/msword
.dvi application/x-dvi
.dxr application/x-director
.eml message/rfc822
.eps application/postscript
.etx text/x-setext
.evy application/envoy
.exe application/octet-stream
.fif application/fractals
.flr x-world/x-vrml
.gif image/gif
.gtar application/x-gtar
.gz application/x-gzip
.h text/plain
.hdf application/x-hdf
.hlp application/winhlp
.hqx application/mac-binhex40
.hta application/hta
.htc text/x-component
.htm text/html
.html text/html
.htt text/webviewhtml
.ico image/x-icon
.ief image/ief
.iii application/x-iphone
.ins application/x-internet-signup
.isp application/x-internet-signup
.IVF video/x-ivf
.jfif image/pjpeg
.jpe image/jpeg
.jpeg image/jpeg
.jpg image/jpeg
.js application/x-javascript
.latex application/x-latex
.lsf video/x-la-asf
.lsx video/x-la-asf
.m13 application/x-msmediaview
.m14 application/x-msmediaview
.m1v video/mpeg
.m3u audio/x-mpegurl
.man application/x-troff-man
.mdb application/x-msaccess
.me application/x-troff-me
.mht message/rfc822
.mhtml message/rfc822
.mid audio/mid
.mny application/x-msmoney
.mov video/quicktime
.movie video/x-sgi-movie
.mp2 video/mpeg
.mp3 audio/mpeg
.mpa video/mpeg
.mpe video/mpeg
.mpeg video/mpeg
.mpg video/mpeg
.mpp application/vnd.ms-project
.mpv2 video/mpeg
.ms application/x-troff-ms
.mvb application/x-msmediaview
.nc application/x-netcdf
.nws message/rfc822
.oda application/oda
.ods application/oleobject
.p10 application/pkcs10
.p12 application/x-pkcs12
.p7b application/x-pkcs7-certificates
.p7c application/pkcs7-mime
.p7m application/pkcs7-mime
.p7r application/x-pkcs7-certreqresp
.p7s application/pkcs7-signature
.pbm image/x-portable-bitmap
.pdf application/pdf
.pfx application/x-pkcs12
.pgm image/x-portable-graymap
.pko application/vndms-pkipko
.pma application/x-perfmon
.pmc application/x-perfmon
.pml application/x-perfmon
.pmr application/x-perfmon
.pmw application/x-perfmon
.pnm image/x-portable-anymap
.pot application/vnd.ms-powerpoint
.ppm image/x-portable-pixmap
.pps application/vnd.ms-powerpoint
.ppt application/vnd.ms-powerpoint
.prf application/pics-rules
.ps application/postscript
.pub application/x-mspublisher
.qt video/quicktime
.ra audio/x-pn-realaudio
.ram audio/x-pn-realaudio
.ras image/x-cmu-raster
.rgb image/x-rgb
.rmi audio/mid
.roff application/x-troff
.rtf application/rtf
.rtx text/richtext
.scd application/x-msschedule
.sct text/scriptlet
.setpay application/set-payment-initiation
.setreg application/set-registration-initiation
.sh application/x-sh
.shar application/x-shar
.sit application/x-stuffit
.snd audio/basic
.spc application/x-pkcs7-certificates
.spl application/futuresplash
.src application/x-wais-source
.sst application/vndms-pkicertstore
.stl application/vndms-pkistl
.stm text/html
.sv4cpio application/x-sv4cpio
.sv4crc application/x-sv4crc
.t application/x-troff
.tar application/x-tar
.tcl application/x-tcl
.tex application/x-tex
.texi application/x-texinfo
.texinfo application/x-texinfo
.tgz application/x-compressed
.tif image/tiff
.tiff image/tiff
.tr application/x-troff
.trm application/x-msterminal
.tsv text/tab-separated-values
.txt text/plain
.uls text/iuls
.ustar application/x-ustar
.vcf text/x-vcard
.wav audio/wav
.wcm application/vnd.ms-works
.wdb application/vnd.ms-works
.wks application/vnd.ms-works
.wmf application/x-msmetafile
.wps application/vnd.ms-works
.wri application/x-mswrite
.wrl x-world/x-vrml
.wrz x-world/x-vrml
.xaf x-world/x-vrml
.xbm image/x-xbitmap
.xla application/vnd.ms-excel
.xlc application/vnd.ms-excel
.xlm application/vnd.ms-excel
.xls application/vnd.ms-excel
.xlt application/vnd.ms-excel
.xlw application/vnd.ms-excel
.xml text/xml
.xof x-world/x-vrml
.xpm image/x-xpixmap
.xsl text/xml
.xwd image/x-xwindowdump
.z application/x-compress
.zip application/x-zip-compressed



Posted by 삼스
HTML52012.06.12 09:04


출처: http://croute.me/419


Web Storage란?
웹 스토리지란 클라이언트쪽에 소량의 데이터를 저장해 두기 위한 스토리지입니다.


웹 스토리지를 다룰때는 그동안 일반적으로 사용되던 쿠키와 많이 비교를 하게 되는데요, 
간단하게 한번 보도록 하겠습니다.

쿠키

 4KB의 저장 용량, 크기가 작다. 
 같은 사이트내에서 둘 이상의 탭을 열었을 때, 둘 이상의 트랜젝션 추적에 어려움이 있다.
 이 외에도 여러 보안문제가 있다. 
 
웹 스토리지
 사양에 따르면 크기 제한이 없다.
 서버로 보내지 않는다.(원하면 명시적으로 보낼 수 있다.)
 유효기간이 없다.
 JavaScript 객체를 저장할 수 있다.(정확하게는 객체의 복사본이 저장된다.)
 웹 스토리지에는 Session Storage와 Local Storage가 있다.



 키와 값

Web Storage는 간단하게 키와 값으로 데이터를 저장할 수 있습니다.
또한 해당하는 키를 통해 값을 꺼낼 수 있습니다.





 웹 스토리지의 유효 범위

웹 스토리지의 유효범위는 Session Storage와 Local Storage에 약간 차이가 있습니다.
먼저 그림으로 살펴보고 아래의 내용을 읽어보면 쉽게 이해할 수 있습니다.


Session Storage
- 도메인마다 따로 생성된다.
- 윈도우(window 객체)와 같은 유효범위와 생존기간을 가진다. (같은 도메인이라도 윈도우마다 따로 생성된다.)
- 윈도우 복제로 생성된 경우, 스크립트를 이용해 새 창을 연 경우 같은 값을 가진 세션 스토리지가 "복제"된다.
- 새로 생성된 윈도우와 기존 윈도우의 세션 스토리지는 서로 영향을 주지 않는다.

Local Storage
- 도메인마다 따로 생성된다.
- 지속기간에 제한이 없다. 사용자가 명시적으로 지우지 않는 한 영구적으로 저장된다.
- 도메인이 다르면 서로의 로컬 스토리지에 접근할 수 없다. (hi.croute.me와 hello.croute.me는 다른 로컬 스토리지)
- 같은 도메인, 예를들면 croute.me에 소속된 웹페이지는 모두 같은 로컬 스토리지를 가진다.(접근한다.)
- Cookie를 이용한 사이트 고유 설정 정보등을 대신하기에 적당하다.

세션과 로컬의 차이점은 로컬은 지속성(보존)을 가지기 때문에 여러 창을 켜도 같은 도메인이라면, 같은 스토리지를 사용하는 것입니다.
세션 스토리지는 각 세션마다 새로운 스토리지를 사용하고 폐기합니다.




 웹 스토리지 메소드

스토리지의 메소드는 세션 스토리지와 로컬 스토리지의 메소드가 같습니다.

 메소드 설명
 length 스토리지에 저장된 데이터의 수를 반환
 key(index) 지정된 인덱스의 키를 반환하고 키가 없다면 null 반환
 getItem(key) 지정된 키에 대응하는 데이터를 반환
 setItem(key, data) 지정된 키로 스토리지에 데이터를 저장
 removeItem(key) 지정된 키에 대응하는 데이터를 삭제
 clear() 모든 데이터를 스토리지에서 삭제


아래는 로컬 스토리지를 통해 알아본 저장/읽기/삭제에 대한 사용 예입니다.
메소드를 통하지 않은 키를 통한 직접적인 접근도 할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 저장
localStorage.croute = "good job";
localStorage["croute"] = "good job";
localStorage.setItem("croute", "good job");
 
// 읽기
var croute = localStorage.croute;
var croute = localStorage["croute"];
var croute = localStorage.getItem["croute"];
 
// 삭제
delete localStorage.croute;
delete localStorage["croute"];
localStorage.removeItem("croute");



아래는 for loop를 사용해서 storage에 저장된 모든 값을 가져오는 코드입니다.

1
2
3
4
5
for(var i = 0; i < localStorage.length; i++)
{
    var key = localStorage.key(i);
    var value = localStorage[key];
}




아래는 웹 스토리지(Web Storage)를 공부하며 참고, 작성한 코드입니다.(HTML5&API 입문 Chap.12)
세션 스토리지 예제 코드


로컬 스토리지 예제 코드


로컬 스토리지(eventListener를 사용한) 예제 코드



local_storage_addEventListener.html 같은 경우에는 제대로 실행되지 않습니다.

Posted by 삼스
HTML52011.10.26 15:58

alert  경고나 확인메세지등을 사용할 때 사용 확인 단추가있는 메시지 창이 나온다.
 confirm  [확인]과 [취소]단추가있는 메시지 창이 나타난다.
 prompt  입력 상자가 있는 메시지창이 나타난다.
 eval  수식으로 입력한 문자열을 계산하여 출력한다.
 parselnt  문자열을 정수로 바꿔준다.
 parseFloat  문자열을  부동 소수점으로 바꿔준다.
 isFinite  유한수인지 판별한다.
 isNaN  숫자인지 문자열인지를 구분하여 출력. 
 Number  숫자인지를 판별
 String  값을 문자열로 바꿔준다.

alert
<title>alert 함수</title>
<script type="text/javascript">
alert("경고나 확인 메세지를 출력")
</script>

confirm
<title>confirm 함수</title>
<script type="text/javascript">
var ans = confirm("[확인], [취소]")
if(ans == true)
document.write("확인")
else
document.write("취소")
</script>

prompt
<title>prompt 함수</title>
<script type="text/javascript">
var name
name = prompt("방문자의 이름은?")
document.write(name+"이시군요 반갑습니다.")
</script>

eval
<title>confirm 함수</title>
<script type="text/javascript">
var num
num = prompt("2개 이상의 수식을 입력하세요")
document.write("입력한 수식 : "+num)
document.write("결과 값"+eval(num))
Posted by 삼스
HTML52010.12.15 20:04

Mac OS X에서 
개발 툴 설치
1. Xcode tool package 설치
2. Subversion client설치
3. Python 2.5이후 버전 설치
 http://www.python.org/download/  
4. Java for Mac OS X developer package설치
  http://connect.apple.com -> Downloads -> Java

5. GTK 
 http://trac.webkit.org/wiki/BuildingGtk

6. QT
 http://trac.webkit.org/wiki/QtWebKit 

웹킷 소스 얻기
svn checkout http://svn.webkit.org/repository/webkit/trunk WebKit
subversion아니라 아래 링크로 다운받을 수 있다. 이 링크는 매 6시간마다 업데이트 된다.



Posted by 삼스
TAG webkit
HTML52010.10.18 13:18


100 : Continue(계속) 
101 : Switching protocols (통신규약 전환)
200 : OK, 에러없이 전송 성공 
201 : Created, POST 명령 실행 및 성공 
202 : Accepted, 서버가 클라이언트 명령을 받음 
203 : Non-authoritative information, 서버가 클라이언트 요구중 일부만 전송
204 : No content, 클라언트 요구을 처리했으나 전송할 데이터가 없음
205 : Reset content (내용 원위치)
206 : Partial content (부분내용)
300 : Multiple choices, 최근에 옮겨진 데이터를 요청 
301 : Moved permanently, 요구한 데이터를 변경된 임시 URL에서 찾았음 
302 : Moved temporarily, 요구한 데이터가 변경된 URL에 있음을 명시
303 : See other, 요구한 데이터를 변경하지 않았기 때문에 문제가 있음 
304 : Not modified (수정안됨)
305 : Use proxy (프록시 사용)
400 : Bad request, 클라이언트의 잘못된 요청으로 처리할 수 없음 
401 : Unauthorized, 클라이언트의 인증 실패 
402 : Payment required, 예약됨 
403 : Forbidden, 접근이 거부된 문서를 요청함 
404 : Not found, 문서를 찾을 수 없음 (특히 이게 많죠.)
405 : Method not allowed, 리소스를 허용안함 
406 : Not acceptable, 허용할 수 없음 
407 : Proxy authentication required, 프록시 인증 필요 
408 : Request timeout, 요청시간이 지남 
409 : Conflict (충돌)
410 : Gone, 영구적으로 사용할 수 없음 
411 : Length required (필요조건 너무 김)
412 : Precondition failed, 전체조건 실패 
413 : Request entity too large, (본건 요구사항 너무 큼)
414 : Request-URI too long, URL이 너무 김 
415 : Unsupported media type (인증 안된 미디어 유형)
500 : Internal server error, 내부서버 오류(잘못된 스크립트 실행시) 
501 : Not implemented, 클라이언트에서 서버가 수행할 수 없는 행동을 요구함 
502 : Bad gateway, 서버의 과부하 상태 
503 : Service unavailable, 외부 서비스가 죽었거나 현재 멈춤 상태 
504 : Gateway timeout (접속장치 설정시간지남
505 : HTTP version not supported (http 버전 지원않됨)
Posted by 삼스
HTML52010.08.27 11:36
ETRI 표준연구센터 이원석 선임연구원의 HTML5소개 자료임.
Posted by 삼스
TAG Bondi, dap, html5