본문 바로가기

HTML5_JS_CSS

모바일 웹에서 iOS 6 아이폰으로 사진 올리기 iOS 6에서는 모바일 사파리에서도 드디어 사진을 찍어 올릴 수 있게 됐다. 이제까지는 모바일 웹에서 사진이나 카메라를 활용할 수 없어 사진이나 카메라를 사용해야 하는 경우 네이티브 앱으로 제작해야 했지만 이제는 모바일 웹에서도 사진을 올릴 수 있게 됐다. (참고로 안드로이드는 2.x부터 지원하고 있음) 태그를 사용하면 기본적으로 다음과 같은 화면이 출력된다. 이 상황에서 파일 선택을 클릭하면 아래와 같이 메뉴가 뜬다. "사진 또는 비디오 찍기"를 선택하면 카메라 화면으로 변경되며 "기존 항목 선택"을 선택하면 사진첩이 뜬다. 카메라를 이용하여 사진을 찍거나 사진첩에서 사진을 선택하면 다음과 같이 작은 썸네일이 표시되며 사진을 선택했음을 사용자에게 알려준다. 비디오를 찍거나 선택하면 사진과 동일하게 작은.. 더보기
크롬 확장 프로그램 - QRCode Generator 만들기 QRCode Generator 소개QRCode Generator는 현재 탭에 열려있는 페이지의 주소를 QR Code로 만들어주는 크롬 확장 프로그램이다. 동작하는 모습은 다음과 같다. 개발 준비개발을 위해 별도로 준비할 도구는 없다. 우선 확장 프로그램에서 사용할 여러 파일들을 저장할 폴더를 하나 생성한다. 그리고 설정 > 도구 > 확장 프로그램 메뉴를 선택하여 우측 상단의 개발자 모드를 체크하여 개발자 모드를 활성화한다. 개발자 모드를 활성화할 경우 압축되지 않은 확장 프로그램을 로드할 수 있으며 확장 프로그램을 디버그할 수 있는 팝업 검사를 사용할 수 있다. 팝업 검사를 선택하면 일반 웹페이지를 디버깅할 때 사용하는 개발자 도구가 확장 프로그램과 함께 실행된다. 프로그램 구성이 프로그램에서 사용한 파.. 더보기
[책리뷰] HTML5 Canvas HTML5 Canvas저자스티브 펄튼 지음출판사한빛미디어 | 2012-01-20 출간카테고리컴퓨터/IT책소개플래시 개발자, 웹 개발자, 입문자도 쉽게 익히는『HTML5 C...글쓴이 평점 얼마전에 몇 몇 동료분들과 Canvas 스터디를 시작했었다.Canvas는 HTML5 스펙 중 가장 현실세계에서 사용이 가능하고 뭔가 그럴싸해 보이는 UI를 만들 수 있는 기술이다. 이처럼 html5 기술 중 실제 사용할 수 있는 사례가 있나 싶다..아무튼 알아두면 써먹을 곳이 많은 기술이다. 다시 스터디 이야기로 돌아가서,,예상대로(?) 난 많은 분들께 구박을 받으며 숙제를 잘 안하는 등 어렵게 따라가고 있다. 사실 책을 잘 읽지도 많은 부분을 공부하지 못하고 있지만, 일단 책을 사고 뒤적거리고는 있긴하다.그래서 간단한.. 더보기
웹앱이라는 것의 배움을 시작하는 분들께 최근에 웹앱이라는 것을 배우려는 것치 트렌드처럼 느껴진다.이것이 하나의 언어나 대표적인 웹 기술로 생각이 되는 것 같다. 실제 웹앱을 다루는 교육과정도 꽤 생기고 있다는 점이 그 증거이기도 하다. 도대체 웹앱은 무엇일까? 웹앱에 대한 정의도 중구난방이다. 대체로 모바일앱처럼동작하는모바일웹기술로만든모바일웹이나모바일앱 을 일컫는다.(@.@)띄어쓰기를 해서 다시 쓰면,"모바일앱처럼 동작하는 모바일웹 기술로 만든 모바일웹 이나 모바일앱"아무튼 모바일용을 지칭하는 추세이고, 모바일 웹이나 앱인데 좀 인터랙티브한 요소가 있는 그런 거다.물론 PC웹 개발에서도 이와 같이 웹앱이라는 용어를 쓰는 경우가 있지만 모바일 환경이 보통 우리가 말하는 웹앱의 환경이다.한가지더 웹앱 ==하이브리드웹앱 이라고 생각되는 경우도 있다.. 더보기
Mobile Web & HTML5 performance optimization 6월 14일부터 16일까지 Velocity라고 하는 웹 최적화와 운영에 대한 컨퍼런스가 Santa Clara에서 열리고 있습니다. 아직 현지에서는 마지막 날 행사가 남아 있겠네요. 이 행사의 워크샵 중에 모바일 웹과 HTML5의 퍼포먼스 최적화에 대한 자료가 있어 공유해봅니다. 워크샵의 진행자는 Maximiliano Firtman 이며 이 사람은 Programming the Mobile Web(2010년 7월 출간)과 jQuery Mobile Up and Running(2011년 10월 출간 예정)의 저자이기도 합니다. 또한 http://www.mobilexweb.com/의 운영자이기도 합니다. 모바일 웹 개발에 있어서 당장이라도 적용해볼 수 있는 여러 내용들을 담고 있으니 모바일 웹에서의 성능 향상 방.. 더보기
Mobile Web에 대한 자료 몇 가지 근래 모바일 웹에 대한 강의를 진행한 일이 있습니다. 강의 준비를 하면서 발견한 눈에 띄는 자료 몇 가지를 공유해봅니다. Mobile Web Development Tips and Tricks View more presentations from J Schwan 공개된지 1년이 넘기는 했습니다만 모바일 웹 개발을 처음 시작하면서 살펴보면 도움이 될만한 내용입니다. context, performance, security, design, portability의 다섯 가지 주제로 잘 설명이 되어 있습니다. Building Rich Mobile Apps with HTML5, CSS3 and JavaScript View more presentations from Sencha Inc. 웹 기술을 이용하여 점점 다양해지.. 더보기
jsconf 2011 5월 2일 ~ 3일에 걸쳐 열린 jsconf 2011가 열렸습니다. 자바스크립트 관련 행사로는 꽤 큰 행사인데요. 여기서 발표된 뉴스 중에 jQuery 제작자인 John Resig이 모질라를 떠나 칸 아카데미로 이직한다는 이야기가 있었죠. 칸 아카데미가 어떤 곳인지는 TED를 참고하시기 바랍니다. (라고 Resig이 이야기 했습니다. ^_^) 여기에서는 발표된 자료를 모아봤습니다. 아직 내용을 다 살펴보지는 못했습니다. 휴일에 잠깐 시간을 내서 보기에는 양이 많네요. 그리고 아직 컨퍼런스를 녹화한 비디오가 올라오지 않았습니다. 트위터를 살펴보니 컨퍼런스 비디오는 한 달 후 쯤 올라온다고 합니다. 살짝 묵혀뒀다가 비디오가 올라오면 같이 보는 것도 좋은 방법이 될 듯 합니다. 5월 2일 Bytes and B.. 더보기
Bay Area jQuery Conf 2011에서 관심 가는 동영상 몇 개 지난 4월 16일부터 17일까지 샌프란시스코에서는 jQuery 컨퍼런스가 열렸습니다. 국내에는 jQuery는 커녕 일반적인 자바스크립트 또는 자바스크립트를 포함한 UI 개발 관련 행사가 하나도 없다는 점을 생각해보면 이런 특정 라이브러리의 컨퍼런스가 열릴 수 있다는 것은 부러운 일입니다. jQuery Conf 2011의 세션을 잠시 살펴보면 모바일에 대한 내용, 개발 방법이나 퀄리티 도구를 사용하는 방법, 유닛 테스트, jQuery의 활용, 하이브리드 모바일 앱 등 이제는 단순한 jQuery의 활용을 벗어나 다양한 주제에 대한 내용이 포함되어 있습니다. 점점 대단하다는 생각밖에 들지 않네요. 이 중 몇 개의 세션을 녹화한 동영상이 온라인에 공개되어 있는 것을 우연히 발견했습니다. 동영상 중 제가 관심있는.. 더보기

반응형