반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

HTML5 CSS3 Animation and Adobe Dreamweaver

2012. 1. 30. 03:47 | Posted by 솔웅


반응형
In HTML5, Actually in CSS3, you can use animation effects with out Javascript.
Use -webkit-animation .. that's all. Too simple to make Animation effects.
Unfortunately it is working on Google Chrome and Safari browsers only.

오늘 소개해 드릴 기능은 CSS3의 animation 기능입니다.
복잡하게 자바 스크립트를 사용하지 않아도 간단하게 CSS3의 webkit 을 사용해서 애니메이션 효과를 내실 수 있습니다.



CSS

Animations

@-webkit-keyframes pulse {
 from {
   opacity: 0.0;
   font-size: 100%;
 }
 to {
   opacity: 1.0;
   font-size: 200%;
 }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

*Please make a better use of it. We don't want a new blink tag ;)

Pulse!


You can check it out with only Google Chrome and Apple Safari.
이 기능은 아래 O표한 브라우저들에서 작동합니다.

Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not working (X)
Opera 11.60                            - Not working (X)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Not working (X)

Download below source code.
아래 소스코드 파일을 받으실 수 있습니다.



Hey guys I'd like to introduce Adobe DreamWeaver CS5 for Phone,Tablet and  PC.
Adobe DreamWeaver CS5 support 3 kine of preview screen for Phone, Tablet and PC. So you can develop web site for those 3 devices at once.
And it support hints of CSS3 functions to make easy development.
As You know HTML5,CSS3 is not Standard Skill Yet so each browsers has some of their own CSS function.
Adobe Dreamweaver provide all of the functions.

아래 하나만 더 소개 할 께요.
요즘은 홈페이지를 볼 수 있는 장치들이 컴퓨터 뿐만 아나라 전화기 그리고 태블릿에서도 볼 수가 있습니다.
그래서 앞으로는 이 3가지 장치들에서 모두 볼 수 있도록 디자인된 웹페이지를 만들어야 합니다.
어도비의 드림위버 CS5에서 이것을 지원하는 기능을 소개하고 있네요.
또 아직 표준으로 확립되지 않은 각 브라우저들만의 여러 CSS3 기능들도 코딩시 hints로 지원하고 있구요.


Click here to see more details.
여기를 클릭 하시면 좀 더 자세한 내용을 보실 수 있습니다.

반응형

HTML5 CSS Columns Google

2012. 1. 27. 21:47 | Posted by 솔웅


반응형
Hey today I introduce Columns in CSS3.
You can just move below slider then the number of columns will be changed.
If you use Firefox then type number in TextBox then hit the enter key.
(It is not working on Internet Explorer and Opera Web browser.)

오늘은 CSS3의 Columns 나누기에 대해 소개해 드리겠습니다.
일단 이 기능은 인터넷 익스플로어랑 오페라 웹 브라우저에서는 작동하지 않습니다.
테스트 하시려면 FireFox나 Google Chrome 혹은 Sapari 브라우저를 사용하셔야 합니다.
구글 크롬이나 사파리의 경우 아래 슬라이드바를 움직이시면 Column 들이 변할겁니다. 2단이었던 것이 3,4,5,6 단 등으로 바뀔겁니다.
파이어폭스일 경우는요 슬라이드바가 안 나타나고 텍스트박스가 나올겁니다.
여기에 숫자를 입력하고 엔터키를 치시면 됩니다.

Columns

-webkit-column-count: 2; 
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

In March 1936, an unusual confluence of forces occurred in Santa Clara County.

A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.

Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Uncounted bees and yellow jackets, newly born, raced out of their hives and holes, overwhelmed by this impossible banquet.

Then came the wind.

It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. A tidal bore of warm air, it tore along the columns of trees, ripped the blossoms apart and carried them off in a fluttering flood of petals like foam rolling up a beach.

This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley. It froze traffic, as drivers found themselves lost in a soft, muted whiteout. Only the streetcar, its path predetermined, passed on...


Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not working (X)
Opera 11.60                            - Not working (X)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Working Well? Well.... (O)

You can down load sample source file below.
소스를 분석하시려면 아래 샘플파일을 받아서 보시면 됩니다.



반응형

HTML5 CSS Transform (Google)

2012. 1. 26. 21:18 | Posted by 솔웅


반응형
Today I am going to introduce transform effect of CSS3.
just mouse over below box then it will rotate smoothly.

오늘 보실 효과는 css3의 transform 효과 입니다.
-webkit-transform 을 이용해서 구현하시면 됩니다.

이 기능은 인터넷 익스플로어와 오페라에서는 작동하지 않네요.

Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not working (X)
Opera 11.60                            - Not working (X)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Working well (O)


HTML5 Presentation
CSS

Transforms

Hover over me:



You can download the Sample source code below.
아래 샘플 파일을 다운로드 받으세요.



See you again.

반응형

HTML5 Transitions (-webkit-transition)

2012. 1. 20. 11:15 | Posted by 솔웅


반응형
Basically JavaScript is for dynamic display in Web Programming.
In HTML5 Not only JavaScript but also CSS has excellent dynamic display functions.

One of the Thing is below webkit-transition.
-webkit-transition

HTML5 는 JavaScript와 CSS와 협력해서 여러 효과를 냅니다.
주로 JavaScript 가 동적인 효과를 주는데 사용되는데요. 이제 CSS에서도 이런 동적인 효과를 줄 수 있습니다. webkit 중에 transition을 사용하시면 됩니다.

Just Click the Right and Left Button then you can see it.
왼쪽 오른쪽 버튼을 눌러보세요.


HTML5 Presentation
CSS

Transitions


Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not working (X)
Opera 11.60                            - Working well (O)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Working well (O)


The Red rectangle below is moving smoothly with using webkit-transition.
아래 사각형은 아주 자연스럽게 움직이죠?
Animation 효과도 줄수 있고 게임에서도 이용할 수 있지 않을까요?

아래 소스코드가 있습니다. 다운 받아 가세요.
Download the source code below.


반응형


반응형
One of the fabulous service from Google is Google map.
You can put the google map on your Web page with HTML5 geolocation.

HTML5를 이용하면 PC나 모바일용 웹페이지에 구글 맵을 서비스 할 수 있습니다.
아래 예제는 샘플인데요.
Show Position 버튼을 누르면 현재 위치가 지도에 표시됩니다.
(위치정보는 사용자가 공유를 허락해야 합니다.)

Click the Show Position button then your location will be displayed on the map.
(You need to allow share your location on your browser)
HTML5 Presentation
JS

Geolocation

Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Working well (O)
Opera 11.60                            - Working well (O)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Working well (O)

It is working well on all browsers in my Laptop.
You can download sample file below.
인터넷 익스플로러에서도 잘 작동을 하네요.
아래 샘플 파일 올립니다.


블로그 폭이 좁아서 MAP/Satelate 를 선택하는 버튼이 가려졌습니다.
위 파일을 다운 받으시면 전체 화면을 보실 수 있습니다.
지도 화면과 위성화면 둘 다 선택해서 보실 수 있어요.
반응형

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 CSS3 Flexible Box Model  (0) 2012.02.02
HTML5 CSS3 Animation and Adobe Dreamweaver  (0) 2012.01.30
HTML5 CSS Columns Google  (0) 2012.01.27
HTML5 CSS Transform (Google)  (0) 2012.01.26
HTML5 Transitions (-webkit-transition)  (0) 2012.01.20
HTML5 Better semantic tags  (0) 2012.01.18
HTML5 Speech Input (음성인식) API  (0) 2012.01.16
HTML5 Storage 4 - Application Cache -  (0) 2012.01.11
HTML5 Storage 3 - IndexedDB -  (0) 2012.01.10
HTML5 Storage 2 - Web SQL DB -  (7) 2012.01.10

HTML5 Better semantic tags

2012. 1. 18. 22:01 | Posted by 솔웅


반응형
Hey guys welcome to HTML5 tutorial of Google Presentation.
Today I am going to show you Sample codes of HTML5 Tags.
You can see 10 tags (the red tags below) and how to use those tags. 

아래 코드는 HTML5 에서 사용하는 Tag들에 대한 사용예를 보여주는 코드입니다.<header>,<hgroup>,<nav>,<section>,<article>,<aside>,<figure>,<figcaption>,<footer>,<time datetime="">이렇게 10개의 코드를 가지고 만들었습니다.

header는 제목을 나타낼 때 사용하고 한 페이지에서 여러번 사용할 수 있습니다.
nav는 메뉴이고 section은 범위를 구분지을 때 사용합니다.
article은 내용 aside는 옆쪽에 표시되는 내용에 사용합니다.
figure는 image를 표시할 때사용하고 figcaption은 그 이미지에 대한 설명(제목)을 나타냅니다.
그리고 footer는 꼬리글이구요. time datetime은 날짜를 나타낼때 사용합니다


HTML5 Presentation
HTML

Better semantic tags

<body>
  <header>
    <hgroup>
      <h1>Page title</h1>
      <h2>Page subtitle</h2>
    </hgroup>
  </header>

  <nav>
   <ul>
     Navigation...
   </ul>
  </nav>
  <section>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
  </section>

  <aside>
   Top links...
  </aside>

  <figure>
    <img src="..."/>
    <figcaption>Chart 1.1</figcaption>
  </figure>

  <footer>
   Copyright ©
<time datetime="2010-11-08">2010</time>. </footer> </body>

You can download sample html file below.
아래 소스 파일 올립니다.



반응형

HTML5 Speech Input (음성인식) API

2012. 1. 16. 09:05 | Posted by 솔웅


반응형
Google provide excellent stuffs for HTML5 developer and one of the thing is that Speech Input API.
Just Click the microphone image and speak out any word then Google get and display the word in the text field.
One and big limitation is that it is working only on Google Chrome browser.

iPhone 의 Siri 가 나오는 바람에 그 신선함이 팍 꺾였지만 처음 이 기능을 보고 전 아주 신선한 충격을 받았어요.
이제 조만간 터치가 아니라 음성으로 기기를 제어할 수 있는 프로그램을 나도 만들 수가 있겠구나......
아래 텍스트 필드 옆에 있는 마이크 이미지를 클릭하고 말을 하면(아직 영어만 지원) 구글에서 그 말을 알아듣고 텍스트 필드에 추가 합니다.
지금은 오직 구글 크롬 브라우저에서만 작동합니다.


HTML5 Presentation
HTML

Speech Input

<input type="text" x-webkit-speech />

Speech input is not enabled in your browser.
Try running Google Chrome with the --enable-speech-input flag.

Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not Working (X)
Opera 11.60                            -  Not Working (X) 
Safari 5.1.2                             -  Not Working (X) 
FireFox 9.0.1                          - Not Working (X)

Fore more Details Click it. 
좀더 자세한 사항은 여기를 클릭 하세요. 

You can get sample source code here.
샘플 코드 입니다. 다운 받아서 사용하시면 됩니다.

 

반응형

HTML5 Storage 4 - Application Cache -

2012. 1. 11. 00:13 | Posted by 솔웅


반응형
Let's see.... just imagine... If you can open any web pages with out internet connection.. Wow.. You don't need 3G,4G, WiFi and Internet connection though. You don't need to spend your money for internet service. That's cool..

Unfortunately there is no way to access remote web pages with out internet connection but I have a good news that you can open any web pages what you've opened before without Internet Connection. That is Application Cache.

If you use WiFi with your mobile. just open web pages what you want to see then you can reopen the pages out of the WiFi range.

Yes, It's becoming increasingly important for web-based applications to be accessible offline. Yes, all browsers have caching mechanisms, but they're unreliable and don't always work as you might expect. HTML5 addresses some of the annoyances of being offline with the ApplicationCache interface.

Using the cache interface gives your application three advantages:

    Offline browsing - users can navigate your full site when they're offline
    Speed - cached resources are local, and therefore load faster.
    Reduced server load - the browser will only download resources from the server that have changed.

The Application Cache (or AppCache) allows a developer to specify which files the browser should cache and make available to offline users. Your app will load and work correctly, even if the user presses the refresh button while they're offline.

영어로 조금 길게 썼네요. HTML5에서 제공하는 Application Cache 기능은 오프라인 환경에서도 웹 페이지를 열어 볼 수 있도록 도와 줍니다.
물론 아무 페이지나 열어볼 수 있는 건 아니구요. 한번은 오픈해서 Application Cache에 저장이 된 웹 페이지에 한정 되겠죠.
이 기능은 Manifest file과 javaScript 인터페이스 두 부분에서 설정해 주시면 됩니다.

테스트하기가 조금 힘들긴 할텐데요.. 왜냐하면 HTML을 서버에 올려놓고 브라우저로 오픈하고, 인터넷이 안되는 환경에서 다시 열어보고 해야 되니까......

하여간 아래 제가 조금 수정한 HTML 파일 올립니다.
You can download below html file.


HTML5 Presentation

JS

Application Cache


cache.appcache:

Turn off your internet connection and refresh this page!


 as you can see above, you need include the manifest attribute on the document's html tag and javascript.
Click this if you want to know more details.

좀 더 자세한 사용법을 보시려면 여기를 클릭 하세요.


반응형

HTML5 Storage 3 - IndexedDB -

2012. 1. 10. 06:15 | Posted by 솔웅


반응형
Today's Topic is Indexed Database of HTML5.

Indexed DB 도 Web Storage 중 하나인데요. Key-value 조합으로 데이터를 관리 할 수 있도록 해 줍니다.

아래 파일을 다운 받아서 브라우저에서 테스트 해 보세요.
Download below file and open it with latest Google Chrome Browser.


Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not Working (X)
Opera 11.60                            - Not Working (X)
Safari 5.1.2                             - Not Working (X)
FireFox 9.0.1                          - Not Working (X)

This is only working on my Google Chrome browser as above.
이 기능은 구글 크롬 브라우저에서만 동작이 제대로 됩니다.


HTML5 Presentation
JS

IndexedDB

1.  "create objectStore" ->2.  Input key and value -> 3.  click "set" -> 4. do 2 and 3  as many as you want -> 5. you can see new key and value -> 6. You can delete it -> 7. you can remove objectStore

먼저 objectStore 를 create 하고 키와 밸류를 넣은 다음 set 버튼을 누릅니다.
그러면 데이터가 브라우저에 저장이 됩니다.
데이터를 여러개 생성할 수 있습니다. 하지만 key 값은 중복 될 수 없습니다.
생성된 데이터 옆에 Delete 버튼을 누르면 데이터가 지워집니다.
remove objectStore 버튼을 누르면 전체 objectStore 가 delete 됩니다.

오직 구글 크롬 브라우저에서만 실행 되더라구요.
혹시 다른데서 실행 되시는 분은 알려 주세요.

It works on Google Chrome browser only.
Please let me know if it works on any other browser.

그럼....

Thanks
반응형

HTML5 Storage 2 - Web SQL DB -

2012. 1. 10. 04:05 | Posted by 솔웅


반응형
Hi! This is the second tutorial of HTML5.
I am going to show you Web SQL DB of HTML5.

오늘 볼 기능은 Web SQL DB 입니다.
예전엔 PHP, ASP, JSP 같은 서버 사이드 스크립트 언어로 디비서버에 연결해서 테이블에 자료를 저장하고 불러오고 수정하고 했었습니다.
물론 HTML5에서도 그 기능이 가능한데요.
거기에다가 브라우저 내에도 테이블을 만들어서 SQL 쿼리로 테이블을 만들고 저장하고 지우고 할 수 있습니다.
물론 이 Data 는  Client side 의 Browser 에 저장이 됩니다.
Client side 에서 이 Browser 를 껐다 켜도, 그리고 컴퓨터를 껐다 켜도 그 데이터는 브라우저내에 그대로 있습니다. (서버에 있는 것이 아닙니다.)

이 기능을 살펴 보겠습니다.

- This function is not working on this blog so download below source code file and open the file with your browser (Google Chrome,Opera or Safari)
이 기능은 이 블로그에서는 실행이 안 되네요.
아래 업로드한 파일 다운 받으셔서 여러분 브라우저에서 실행해 보세요. -


HTML5 Presentation
JS

Web SQL Database

See the generated database: Developer > Developer Tools > Storage

1. Click Create Table Button -> The table will be created
2. Type Anything in Text field and click new to do item button. (You can make data as many as you want)
3. You can delete the data. (click the line Delete)
4. You can drop the table (Click the drop table button)

1. 먼저 create Table Button을 click 하셔서 table을 생성합니다. (Table1Test 테이블이 생성될 겁니다.)
2. text field 에 원하는 글자를 넣고 new to do item 버튼을 누르세요. 그러면 생성된 테이블에 그 데이터가 들어갑니다. 여러분이 원하는 만큼 만드세요.
3. 만들어진 데이터는 밑에 보여지게 됩니다. 여기서 Delete 링크를 누르면 해당 데이터는 지워지게 됩니다.
4. Drop table 버튼을 누르면 이 테이블 전체가 지워지게 됩니다.

사용법은 위에 있고 전체 소스는 아래에 업로드 하겠습니다.
You can download the source code below.

Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not Working (X)
Opera 11.60                            - Working Well (O)
Safari 5.1.2                             - Working Well (O)
FireFox 9.0.1                          - Not Working (X)

이 기능은 제가 가지고 있는 인터넷 익스플로어 하고 파이어폭스에서 작동하지 않네요.

Please let us know (Leave a comment) whether it is working on your browser (PC,Mobile) or not please.
여러분 브라우저에서 제대로 작동하는지 댓글에 달아 주시면 아주 고맙겠습니다.
모바일 브라우저에서의 동작 여부도요.

그럼...
thanks..


반응형