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

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

WEB_APP/Sencha_Touch

Sencha Touch Road Show 를 다녀와서....

2011. 12. 14. 09:02 | Posted by 솔웅


반응형
안녕하세요?

오늘은 맨하튼에서 있었던 Sencha Touch Road Show를 다녀왔습니다.
9시30분부터 1시 30분까지 4시간 동안 진행 됐는데요.

중간에 샌드위치 스낵 커피 음료 등을 마음껏 먹을 수 있어서 좋았어요.
강의가 3개 있었는데 일반적인 HTML5 관련한 강의와 Sencha Touch 전반적인 사항 그리고 개발자가 나와서 예제 프로그램 설명하는 시간을 가졌었습니다.

자세히 필기하지 않아서 꼼꼼하게 정리는 못하지만 그나마 생각나는것들은 정리해 두는게 나중에라도 참고할 수 있고 더 좋을 것 같네요.

sencha 회사 홈페이지는 http://www.sencha.com/ 입니다.
products - sencha touch 메뉴로 가면 sencha touch를 다운 받을 수 있는데요.
지금은 1.0 버전과 1.1.1 버전이 다운 가능합니다.

이번에 참가자들에게 아직 공개 되지 않은 sencha touch 2.0 을 소개해 줬습니다.
위에 링크를 따라 가시면 다운 받으실 수 있을 겁니다.

그리고 조만간 Sencha Designer 도 개발 할 예정이라고 합니다.
Sencha Designer는 드림위버나 비쥬얼 베이직 같이 쉽게 개발할 수 있는 툴입니다.
Sencha 는 ExtJS 도 만들어 낸 회사인데요. 이미 ExtJS는 Ext Designer 가 나와 있습니다.

Sencha Designer가 궁금하시면 이 Ext Designer를 보시면 될겁니다. 같은 회사인데 비슷한 UI 일것 같네요.

오늘은 한 50여명이 참가했는데요. 강의마다 질문들이 꼬리를 이어서 이곳 개발자들의 열정을 느낄 수 있더라구요.

HTML- JAVA Script 관련 디버깅 툴을 누군가가 질문을 했는데 개발자가 Phantom JS 가 좋은 것 같다면서 추천해 주더라구요.
관심 있으신 분들은 가서 살펴 보세요.

예제를 다뤄준 마지막 강좌 파워포인트는 아래 올려 놓을 께요.

thecitybarsapp-111202102713-phpapp01.pdf


yelp.com 이란 곳에서 샌프란시스코의 store 정보를 얻어와서 보여주는 웹앱입니다.
그 contents는 한국에서는 별로 쓸모가 없었지만 개발 소스나 방법등을 배우기에는 좋을 것 같습니다.

앞으로 Corona SDK 와 HTML 5 , Sencha Touch 로 이 블로그를 채워 나갈 것 같습니다.
그리고 추가한다면 Phonegap이 있을 수 있겠구요.
좀 바쁘겠네요..

컨퍼런스가 증권거래소 근처에서 열렸었거든요.
끝나고 나오니까 증권거래소 앞 크리스마스 트리가 멋있게 서 있어서 한 카트 찍었습니다.

질문이나 의견 제안 어떤 것이든 댓글 달아 주세요. 저도 배우는 과정이니까 같이 알아보면 서로 도움이 될 것 같아요..

그럼..
반응형
저작자표시 비영리 동일조건 (새창열림)

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

Sencha Touch 2 Tutorial - Controllers -  (2) 2012.03.06
Sencha Touch 2 Application에 대한 전반적인 이해  (0) 2012.03.04
Sencha Touch 2.0 Beta Tutorial 첫번째 앱 -2-  (4) 2012.02.26
Sencha Touch 2.0 Beta Tutorial 첫번째 앱 -1-  (6) 2012.02.25
Sencha Touch Tutorial 1 Getting Started  (0) 2012.02.22
Sencha Touch 로 첫번째 앱 만들기 -4-  (1) 2012.02.21
Sencha Touch 로 첫번째 앱 만들기 -3-  (0) 2012.02.20
Sencha Touch 로 첫번째 앱 만들기 -2-  (6) 2012.02.17
Sencha Touch 로 첫번째 앱 만들기 -1-  (6) 2012.02.14
Sencha Touch getting started - 설치 및 예제 실행 -  (2) 2011.12.16
WEB_APP/HTML5

CSS3 Rounded Corner, 그림자 효과 사용하기

2011. 12. 12. 23:37 | Posted by 솔웅


반응형
요즘 계속 공부 하고 있는 부분이 CSS3 입니다.
정확히 HTML5는 아니지만 HTML은 CSS와 자바스크립트와 더불어서 더 잘 사용 될 수 있기 때문에 CSS와 자바스크립트도 반드시 알아야 할 기술입니다.
CSS3 는 2005년 이후 부터 지금까지 계속 개발 되고 있다고 합니다. 아직 완료되거나 공식적으로 표준으로 인정되거나 뭐 그런건 아니라서 모든 브라우저에서 다 지원하는 것은 아닙니다.
대개 크롬에서 많은 기능을 지원하고 있습니다.

지난 시간에 이어서 계속 CSS3를 공부 하겠습니다.
우선 아래와 같이 HTML파일을 만드세요.
(제 파일 이름은 6th.html 하고 main03.css 입니다.)
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
    <link rel="stylesheet" href="main03.css">
</head>
<body>
    <div id="box">
        <p id="text"> Text Test. </p>
    </div>
</body>
</html>

그리고 main03.css를 아래와 같이 만듭니다.

body{
    text-align:center;
}
#box{
    display:block;
    width:500px;
    margin:50px auto;
    padding:15px;
    text-align:center;
    border:1px solid blue;
    background:orange;
}
#text{
    font:bold 30px Century Gothic;
}


그럼 이와 같은 모습이 나옵니다.
이제 이 네모 박스를 좀 꾸며 보겠습니다.

#box 안에 아래 코드를 추가해 보세요.
-webkit-border-radius:25px;
그리고 재실행 하시면 사각형 모서리가 곡선으로 처리됩니다.
한가지만 더 해 볼까요?
-webkit-box-shadow:rgb(110,110,110) 8px 8px;
이것은 그림자 효과인데요 그림자 색은 rgb로 표현됩니다. 그 다음은 오런쪽으로 8픽셀 아래로 8픽셀 더 가서 그리라는 의미 입니다.


아주 보기 좋은 박스가 그려졌습니다.
그림자 효과를 아래처럼 줘 보세요.
    -webkit-box-shadow:rgb(110,110,110) 10px 10px 10px;

shadow 효과의 3번째 인수는 blur 효과를 주는 기능입니다.

맨 마지막에 inset을 추가해 보세요.

    -webkit-box-shadow:rgb(110,110,110) 10px 10px 10px inset;



그러면 그림자 효과가 박스 안쪽으로 나타나게 됩니다.

오늘은 간단히 여기까지 하구요.
다음 글에선 박스 안에 그라데이션 효과를 주는 법을 공부 하겠습니다.
반응형
저작자표시 비영리 동일조건 (새창열림)

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

HTML5로 나만의 비디오 플레이어 스킨 만들기 -1- CSS  (0) 2011.12.17
HTML5로 비디오 보여주기 Video Tag  (0) 2011.12.17
JavaScript 맛보기  (0) 2011.12.16
HTML5 CSS Animation 효과  (5) 2011.12.15
HTML5 CSS Text shadow, translate 효과 등등  (0) 2011.12.14
webkit-box 좀 더 알아보기 (Flexible Box Model)  (6) 2011.12.10
HTML5 화면 Layout 잡기 -2 (Flexible Box Model)  (2) 2011.12.09
HTML5 화면 Layout 잡기 -1  (6) 2011.12.09
HTML5 CSS 이해하기  (0) 2011.12.08
HTML5 두번째 CSS 이해하기 (pseudo-class)  (2) 2011.12.07
WEB_APP/TIPs

웹앱 (WEB APP) 관련 메모 정리

2011. 12. 11. 02:21 | Posted by 솔웅


반응형
웹 앱을 공부하려고 했는데 파고 들면 들수록 이쪽도 알아야 될게 아주 많고 생각보다 분야가 다양하네요.
일단 잊어버리기 전에 관련 용어와 개념들을 정리한 다음에 차근차근 공부해 나가야 겠어요.

모바일 웹 , 앱, 하이브리드 앱에 대해 메모 해 둬야 겠습니다.

- 모바일 웹
   : 일반 브라우저를 통한 서비스
  장점
  : 기존 HTML을 그대로 사용할 수 있다.
  : 개발, 유지보수가 용이하다.
  : 개발비용이 일반 앱개발보다 저렴하다.
  단점
  : 폰의 다양한 센서, 기능을 활용하기 어렵다.
  관련 툴
  : JQTouch
    - 가볍고 빠른 기본 프레임웍, iOS에 최적화된 프레임웍
    - 확장 플러그인, 네이티브 웹킷 애니메이션, 간단한 테마 지원
  : JQueryMobile
    - JQuery 팀이 개발, 다양한 브라우저 호환성 지원, 멀티 스크린 지원
    - 많은 수의 UX 컨트롤 지원
    - 자동화된 프레임웍 구조
    - 모바일 웹서비스에 최적화
    - ARIA 표준지원
  : SenchaTouch
    - 강력한 라이브러리 제공, Sencha 스타일 컨트롤 제공
    - 자바스크립트 API 기반 개발, 모델 뷰 컨트롤러 구현(MVC)
    - iOS,Android,BlackBerry 6, 스마트폰과 타블렛 레이아웃 자동변환

- 앱
  : 일반적인 앱, 즉 Objective-C, JAVA, C#의 네이티브 프로그래밍 언어와 각 OS별 SDK 를 이용해서 개발
  장점
  - 폰의 다양한 센서, 기능을 활용할 수 있다.
  - 모바일웹에 비해 실행, 페이지 로딩 속도가 빠르다.
  단점
  - 개발 비용이 높다.

- 하이브리드 앱
  : 내부 콘텐츠를 HTML로 개발 (일반적으로 외부의 서버와 연동)
  : 외부 프레임은 네이티브 언어로 개발
   장점
   - OS별로 개발, 유지보수 부담이 작다.
   - 기존 HTML 형태의 콘텐츠를 사용할 수 있다.
   단점
   - 폰의 다양한 센서, 기능의 활용이 어렵다.
   특징
    - DB, 콘텐츠 중심의 서비스에 적합
    - 게임, 앱내 결제에는 부적합
    관련 툴
     - PhoneGap
       : 오픈소스 프레임웍, 플랫폼별 개발 탬플릿 제공
       : 6개의 모바일 플랫폼 지원, 네이티브 API 접근 지원, 플러그인 확정 지언
    - Appcelerator Titanium
       : 오픈소스 프레임웍, 대부분의 네이티브 API지원
       : 모바일, 데스크탑 앱 빌드, 웹 표준 기술 사용
       : 네이티브앱 빌드 (모바일), 통합 IDE 제공, Titanium Studio
    - Appspresso
       : 통합 개발환경 지원, Eclipse IDE, 향상된 네이티브 API 제공
       : iOS, Android, W3C Widget, JS frameworks 포함
       : WAC/Waikiki API, On The Fly Development
       : Plug-in Development Kit (PDK)

이런 구분과 특성과 개념과 용어와 관련 툴들이 있네요.
기본적으로 HTML5를 공부하고 다음에 웹앱 그리고 하이브리드 앱을 공부해 볼 생각입니다.

다음주 화요일(12월 13일 2011) 맨하튼에서 Sencha Touch 관련 컨퍼런스가 있습니다.
참가 신청해서 초청장 받았습니다.
무료이고 가면 커피도 주고 음식도 주고 관련 기술도 알려 준다고 합니다.


다녀와서 후기 올릴께요.

그럼...
반응형
저작자표시 비영리 동일조건 (새창열림)

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

JSON 파일 만드는데 도움 주는 툴  (0) 2012.08.20
iOS 웹클립에 관한 팁  (0) 2012.06.25
Data Architect와 Data Modeling Architect 에 대한 메모  (0) 2012.06.25
Responsive WEB (반응형 웹) 맛보기  (1) 2012.06.13
User Agent Switcher 소개  (0) 2012.06.12
Entity Relationship Modeling  (0) 2012.06.10
3D 관련 툴 블랜더(blender)  (0) 2012.02.01
HTML5, JavaScript 관련 툴들 소개  (0) 2012.01.31
브라우저가 캔버스 지원 유무 판단하기  (0) 2011.12.30
WEB APP 시작하기...  (0) 2011.12.05

티스토리툴바