html5 6

HTML5 PhoneGap ๊ฐ•์ขŒ #5 (20120330)

PhoneGap ํฐ๊ฐญ : ํ•˜์ด๋ธŒ๋ฆฌ๋“œ WebApp (Webapp + NativeApp) ํฐ๊ฐญ์„ ์ด์šฉํ•œ ๋ฐ”์ด๋ธŒ๋ ˆ์ด์…˜ ๋ชจ๋“œ ๊ฒฐ๊ณผ ํฐ๊ฐญ + JQM ์„ ์ด์šฉํ•œ ์•ˆ๋“œ๋กœ์ด๋“œ ํ…Œ์ŠคํŠธ (์ฃผ์†Œ๋ก ๊ฐ€์ ธ์˜ค๊ธฐ) ๊ฒฐ๊ณผ ํฐ๊ฐญ์„ ์ด์šฉํ•œ ์•ˆ๋“œ๋กœ์ด๋“œ ํ…Œ์ŠคํŠธ (์นด๋ฉ”๋ผ๋กœ ์‚ฌ์ง„์ฐ๊ณ  ์—…๋กœ๋“œ ํ•˜์—ฌ ๋ณด์—ฌ์ฃผ๊ธฐ) ๋จผ์ € SpringUploadTest ๋ฅผ ๊ธฐ๋™์‹œ๊ณ  ๊ฒฐ๊ณผ ์‹ค๊ธฐ๊ธฐ๋กœ ํ•ด์•ผํ•จ

HTML5 Sencha ๊ฐ•์ขŒ #4 (20120329)

SENCHA - Panel ๊ณต๋ถ€ - index.html index.js var myHandler = function(container, newCard, oldCard, index) { alert("[" + container.id + "/" + newCard.id + "/" + oldCard.id + "/" + index + "]"); } doc.js var docked = new Ext.Panel({ fullscreen : true, title : 'dock', // ํ•ด๋‹น panel์ด mainPanel์˜ item์œผ๋กœ ๋“ค์–ด๊ฐ€๋Š”๋ฐ mainPanel์ด // TabPanel์ด๋‹ค. ์ž๋™ ํ™”๋ฉด๊ณผ ๋ฒ„ํŠผ์ด ์ƒ๊น€, ๋ฒ„ํŠผ์˜ ๋ฌธ์ž์—ด iconCls : 'info', // ๋ฒ„ํŠผ์˜ iconcss class ๋ช… badgeText ..

HTML5 jQuery ๊ฐ•์ขŒ #3 (20120328)

Geolocation ํ™œ์šฉ 01. ๋‹จ์ˆœ ์œ„๋„ ๊ฒฝ๋„ ์ฐพ์•„๋‚ด๊ธฐ ์ง€๋„ ์„œ๋น„์Šค์˜ ํ™œ์šฉ ์š”์†Œ - ํŠน์ •์œ„์น˜ ์œ„๊ฒฝ๋„ - Maker : ์ง€๋„์— ๊ทธ๋ ค์•ผ ๋˜๋Š” ์•„์ด์ฝ˜ ์ด๋ฏธ์ง€ (Zoom in out ์ด ์•ˆ๋จ) - geocoder (reverse geocoder) : ์ฃผ์†Œ๊ฐ’๊ณผ ์œ„๊ฒฝ๋„ ๋งตํ•‘ - overlay : ์ง€๋„ ์œ„์˜ ๊ทธ๋ฆผ Layer (Zoom in out ์ด ๊ฐ€๋Šฅ) 02. ์ง€๋„์œ„์˜ ์œ„๋„ ๊ฒฝ๋„ ์ฐพ์•„๋‚ด๊ธฐ 03. ์ง€๋„์œ„์˜ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - WEBKIT ๊ธฐ๋ฐ˜์˜ ์›น๋ธŒ๋ผ์šฐ์ ธ - SMART TV ๊ฐ€ ๊ตฌ๋™๊ฐ€๋Šฅ - ..

HTML5 jQuery ๊ฐ•์ขŒ #2 (20120328)

Cookie -> WEB Storage (client side data ์ €์žฅ (key-value)) ์ฟ ํ‚ค์˜ ๋Œ€์ฒด๋Š” ์•„๋‹Œ ์ƒˆ๋กœ์šด ๊ธฐ์ˆ  HTTP์˜ ํŠน์ง•(stateless) - ํด๋ผ์ด์–ธํŠธ์˜ ์ปค๋„ฅ์…˜์„ ์„œ๋ฒ„์— ํ•œ๋ฒˆ ์š”์ฒญ์„ ํ•˜๋ฉด ์‘๋‹ต์„ ์ฃผ๊ณ  ๋Š์–ด๋ฒ„๋ฆฐ๋‹ค - ํด๋ผ์ด์–ธํŠธ๋Š” ์„œ๋ฒ„์— ์ ‘์†์‹œ ๋งˆ๋‹ค ์„œ๋ฒ„๋Š” ์ƒˆ๋กœ์šด ์ปค๋„ฅ์…˜์œผ๋กœ ์ธ์‹ํ•˜๋ฏ€๋กœ ๋™์ผ ํด๋ผ์ด์–ธํŠธ์—์„œ ์ ‘์†ํ•˜๋”๋ผ๋„ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์—†๋‹ค. - ๋Œ€์•ˆ : session(์„œ๋ฒ„side์— ํด๋ผ์ด์–ธํŠธ์ •๋ณด ์ €์žฅ) cookie(ํด๋ผ์ด์–ธํŠธ์˜ ์ƒํƒœ์ •๋ณด ์ €์žฅ)์˜ ํ™œ์šฉ - request ์— cookie ๋ฐ์ดํ„ฐ๋ฅผ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์•Œ์•„์„œ ํ•ด๋‹น ๋„๋ฉ”์ธ์„ responseํ• ๋•Œ head์— ๋ถ™์—ฌ ์„œ๋ฒ„๋กœ ๋„˜๊ฒจ์ฃผ๋Š” ํ˜•ํƒœ (์„œ๋ฒ„๊ฐ€ ํ•„์š”์—†๋Š” ์ฟ ํ‚ค์ •๋ณด๋ฅผ ๋ชจ๋‘ ๋„˜๊ฒจ์ฃผ๋Š” ํ˜•ํƒœ์ž„) ------------------------------..

HTML5 jQuery ๊ฐ•์ขŒ #1 (20120327)

HTML5๋Š” W3C์—์„œ๋Š” 2014๋…„ 10์›”์— ํ‘œ์ค€์•ˆ์ด ์™„์„ฑ๋  ๊ณ„ํš์ด๋ฏ€๋กœ ๊ด€๋ จ๋œ ๋ฉ”์†Œ๋“œ๊ฐ€ drop ๋  ์ˆ˜ ๋„ ์žˆ๋‹ค + APP - ๊ฐœ๋ฐœ์ƒ์‚ฐ์„ฑ - Android - java | ์œ ์ง€๋ณด์ˆ˜์„ฑ iDS - object C | Bada - C++ | Window Phone - C# | + WEB - ์žฅ์  - ์œ ์ง€๋ณด์ˆ˜์„ฑ(OK) (HTML4) ๋‹จ์  - Network Traffic, ์†๋„, UI, ๊ธฐ๋Šฅ HTML5 - ํ…Œ์ŠคํŠธ ์‚ฌ์ดํŠธ - www.html5test.com , gs.statcounter.com ๋ฐ๋ชจ ์‚ฌ์ดํŠธ - http://html5demos.com/dnd-upload ์œ ์šฉํ•œ ์‚ฌ์ดํŠธ - www.w3.org , caniuse.com (canvas, socket ๋“ฑ๊ณผ ๊ฐ™์ด ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ง€์›๋˜๋Š” ๋ธŒ๋ผ์šฐ์ ธ ๊ฒ€์ƒ‰) Androi..

HTML5๋กœ ActiveX๋ฅผ ์—†์• ์ž

http://web.kisa.or.kr/02/b/activeX_content02_a.jsp HTML 4.X ๋ฐ XHTML 1.X ๊ธฐ์ˆ  ์‚ฌ์–‘์€ ์ •์ ์ธ ์›น ํŽ˜์ด์ง€๋ฅผ ์ œ์ž‘ํ•˜๋Š”๋ฐ ์ค‘์ ์„ ๋‘๋‹ค๋ณด๋‹ˆ, ์‚ฌ์šฉ์ž์™€ ์ƒํ˜ธ ์ž‘์šฉํ•˜๋Š”๋ฐ ์ค‘์š”ํ•œ ์›น ํผ(form)์˜ ๊ธฐ๋Šฅ์ด ์ƒ๋‹นํžˆ ๋นˆ์•ฝํ•˜๋‹ค. ํŠนํžˆ, ๋‹ค์ค‘ ํŒŒ์ผ์„ ์—…๋กœ๋“œํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์ง€์›ํ•˜์ง€ ์•Š๊ณ , ํ•˜๋‚˜์˜ ํผ์— ํ•˜๋‚˜์˜ ํŒŒ์ผ๋งŒ ์—…๋กœ๋“œํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ธฐ๋Šฅ ์ œ์•ฝ์€ ๋‹ค์ˆ˜์˜ ํŒŒ์ผ์„ ์ฒจ๋ถ€ํ•˜๋Š” ์ด๋ฉ”์ผ ์„œ๋น„์Šค ๋ฐ ์›นํ•˜๋“œ ์„œ๋น„์Šค๋ฅผ ๊ตฌํ˜„ํ•˜๋Š”๋ฐ ์žฅ์• ๋ฌผ์ด๋‹ค. ์‚ฌ์šฉ์ž๋“ค์ด ๋งค๋ฒˆ ํŒŒ์ผ์„ ์—…๋กœ๋“œํ•ด์•ผ ํ•˜๋Š” ๋ถˆํŽธํ•จ์„ ๋œ์–ด์ฃผ๊ธฐ ์œ„ํ•ด์„œ, ๊ฐœ๋ฐœ์ž๋“ค์€ ์•กํ‹ฐ๋ธŒX ํ™•์žฅ๊ธฐ๋Šฅ์œผ๋กœ ๋‹ค์ค‘ ํŒŒ์ผ ์—…๋กœ๋“œ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๊ณ , ๊ทธ ๊ฒฐ๊ณผ ๊ตญ๋‚ด ๋‹ค์ˆ˜์˜ ์›น ๋ฉ”์ผ ์„œ๋น„์Šค๋‚˜ ์›นํ•˜๋“œ ์„œ๋น„์Šค๋Š” ๋ฌผ๋ก ์ด๊ณ , ๋‹ค์ˆ˜์˜ ์‚ฌ์ง„์ด๋‚˜ ํŒŒ์ผ์„ ์—…๋กœ๋“œ ํ•˜๋Š” ..