Zen Coding Visual Studio Plugin


참조 URL
  1. Zen Coding - a new way of writing Html and CSS Code
  2. http://en.wikipedia.org/wiki/Zen_Coding#Text_editors
  3. http://vswebessentials.com/
  4. http://zencoding.codeplex.com/
  5. http://www.johnpapa.net/zen-coding-in-visual-studio-2012/
  6. http://blog.vijay.name/2013/01/zen-coding-for-visual-studio-2012/
  7. http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6



Zen Coding으로 아래와 같이 입력을 하면

div#page>div.logo+ul#navigation>li*5>a


아래와 같은 HTML이 자동으로 나오게 하는 코딩 기법이다.

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>


또 다른 예제

div#header>img.logo[alt=image]+ul#nav>li*2>a:link

HTML 결과 물

<div id="header">
    <img src="" alt="image" class="logo"/>
    <ul id="nav">
        <li>
            <a href="http://"></a>
        </li>
	<li>
            <a href="http://"></a>
        </li>
    </ul>
</div>


위와 같은 결과를 Visual studio에서도 사용할 수 있도록 도와주는 툴이 나왔다. 

Web Essential 2012 Home page 에서 다운바다서 설치하거나 Visual Studio에서 Tool > Extensions and Updates 에서 Online 에서 Web Essentials를 추가할 수 있다. 그런다음 웹 페이지( ASP.NET MVC에서는 cshtml또는 aspx 페이지)에서 잰코딩을 하고 탭을 누르면 위 예제와 같이 젠코딩이 자동으로 HTML을 생성해 준다.


div#page>div.logo+ul#navigation>li*5>a   (tap 키를 누른다)

[코드1] Zen Coding


<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

[코드2] Zen Coding이 HTML로 변환된 코드



Web Matrix 3에서도 Zen Coding을 지원하니 보다 쉽고 빠르게 HTML을 만들어 낼 수 있을 것이다.


Web Essentials 다운로드 페이지

http://vswebessentials.com/download





-----------------------------------------------------------------------------------------------------------------


만약 이와 비슷한 기능을 추가하고 싶다면

다른 프로젝트에서 추진되다가 지금은 중단된 프로젝트에서 관련 소스를 얻을 수 있다.

http://einaregilsson.com/zen-coding-visual-studio-addin/


ZenCoding.VisualStudio v1.1.0.333

DOWNLOAD ADD-IN || DOWNLOAD SOURCE 


저작자표시 동일조건

'.Net Framework' 카테고리의 다른 글

[C# Code Snippet] CultureInfo로 모든 언어의 DateFormat, TimeFormat 알아내기 - Exchange 2013에서 Set-MailboxRegionalConfiguration  (0) 2013.05.30
[C# Code Snippet] Enum을 String에서 변환 하기 - Enum Convert  (1) 2013.05.30
[Unit Test] 테스트 모드를 64비트에서 테스트 - 64bit COM+ 테스트시 주의  (0) 2013.05.14
[JSON] Json.Net - Newtonsoft.Json lowercase keys - 키값을 소문자로 만들기  (0) 2013.05.10
[Async] TaskCompletionSource<T> async example  (0) 2013.05.04

WebMatrix 3 Release


참조 URL
  1. WebMatrix 3
  2. Introduces WebMatrix 3 channel 9
  3. http://blogs.msdn.com/b/bryang/archive/2013/05/09/webmatrix-3-reeleased.aspx
  4. http://www.microsoft.com/web/webmatrix/wmx3features.aspx - New features


이전에도 소개를 했었지만 이번에 새로운 기능을 추가해 릴리즈가 되었습니다.





기능 요약 정리


- Windows Azure ( Cloud) 통함

- Remoting editing - 내 파일에서 편집 하는 것 같이 원격으로 편집을 지원

- Source control with Git - Git 소스 제어 지원

- Source control with TFS - TFS(Team foundation Sserver) 소스 제어 지원

저작자표시 동일조건

'설치 및 소개' 카테고리의 다른 글

Windows에서 VIM 설치 - VIM on Windows  (0) 2013.05.15
[eBook] Syncfusion에서 배포한 Succinctly series ebook입니다  (0) 2013.05.15
codepen.io - Live HTML dev environment  (0) 2013.05.10
WebSocket - FlashSocket - Cross Browser support  (0) 2013.05.04
free HTML Template - 무료 HTML 템플릿 사이트 - BootStrap  (0) 2013.05.04

WebMatrix 3


참조 URL
  1. WebMatrix 3 preview - http://www.microsoft.com/web/webmatrix/next/

 

 WebMatrix 3의 프리 릴리즈 설치하여 사용해 볼 수 있다.

새로운 기능으로 Windows Azure 계정과 연동되는 것과 소스를 관리하는 TFS, Git이 추가 되었다.





저작자표시 동일조건

'설치 및 소개' 카테고리의 다른 글

WebSocket - FlashSocket - Cross Browser support  (0) 2013.05.04
free HTML Template - 무료 HTML 템플릿 사이트 - BootStrap  (0) 2013.05.04
개발 그룹 사이트 링크  (0) 2012.11.12
WebMatrix 사용하기 #2  (0) 2012.11.09
WebMatrix 사용하기 #1  (0) 2012.11.09

WebMatrix에서는 모바일 디바이스 개발을 위한 지원 해주고 있습니다.

현재 지원되는 디바이스는 IPad, IPhone, WindowPhone7, Browser Stack(Cross Browser Test)를 지원하고 있다.

Browser Stack 실행 화면

(Safari, FireFox, IE, Chrome, Opera, Android, iOS, Opera Mobile, Windows XP ~ Windows 8, Max OS 지원)

 

그럼 이제 WebMatrix에 추가해 보도록 하겠습니다.

WebMatrix에서는 아주 쉽게 추가할 수 있도록 되어 있습니다.

실행에서 “새로 추가”를 눌러 줍니다.

원하는 기능을 선택하고 “설치”를 누르면 설치가 완료가 됩니다.

이제 추가가 완료가 되었습니다.

한번 시험을 해보도록 하겠습니다.

 

iPad로 실행한 모습

Orientation을 Portrait로 수정한 모습

(마우스 우 클릭 하여 수정할 수 있습니다.)

 

iPhone 실행 모습입니다.

 

WebMatrix에서 개발 할 때 One Source Multi Platform 지원을 위한 개발을 할 때 편리하게 확인하면서 개발을 진행 할 수 있을 것입니다.

 

도구가 지원하는 편리함을 가지고 최대한 이용할 수 있는 부분은 이용하는 것이 바람직한 자세일 것입니다.

 

감사합니다.

'NodeJS' 카테고리의 다른 글

[Node.js] Node.js에서 C#, F#, Python, PowerShell 사용할 수 있도록 해 주는 Edge.js  (0) 2013.06.03
Node.JS를 멀티 코어에서 동작(node.js Multi Core Run)  (0) 2012.11.20
WebMatrix에서 Node.js 사용하기 Ex-javascript intellisense, jade, ejs, CoffeeScript  (0) 2012.11.20
Windows에서 Meteor 개발 환경 구축  (0) 2012.11.20
WebMatrix에서 Node.js 사용하기 Ex-NPM 사용  (0) 2012.11.18

WebMatrix에서 Node.js를 개발 할 때 여러 가지 에디터를 통해서 개발을 할 수 있습니다.

대표적인 툴로서 Sublime Text2, AcroEditor, EditorPlus, …이 많은 사랑을 받고 있습니다.

이제 거기에 더해서 WebMatrix를 더 추가해 소개해 드리고자 합니다.

 

이전 포스트에서 WebMatrix 설치를 진행하였고 Node.js에서 개발시 편리한 이점을 가져다 주는 Intellisense 기능이 있다는 것을 소개해 드리고자 합니다.

 

require에서 intellisense

configure에서 intellisense

Jade Highlight Syntax 지원

Less 지원

EJS 지원

CoffeeScript 지원

 

위와 같이 WebMatrix에서는 다양한 파일들을 지원해 주고 있습니다.

'NodeJS' 카테고리의 다른 글

Node.JS를 멀티 코어에서 동작(node.js Multi Core Run)  (0) 2012.11.20
WebMatrix에서 Simulator, Emulator 추가  (0) 2012.11.20
Windows에서 Meteor 개발 환경 구축  (0) 2012.11.20
WebMatrix에서 Node.js 사용하기 Ex-NPM 사용  (0) 2012.11.18
WebMatrix에서 node.js 사용하기  (0) 2012.11.18

 

NodeJS개발은 여러 플랫폼에서 개발이 가능합니다.

그 중에 저는 WebMatrix를 통해서 NodeJS를 개발에 대해서 소개해 드리고자 합니다.

아래 설명은 기본적인 WebMatrix 설치가 완료가 된 사항을 전제로 설명을 드리도록 하겠습니다.

WebMatrix 설치 안내
http://mvcp.tistory.com/tag/webmatrix 링크

 

웹 매트릭스 실행 화면

 

위 화면에서 “템플릿”을 선택하고

Node.Js를 선택하면 위와 같은 화면이 보여진다.

 

우선 “빈 사이트”를 선택하고 “사이트 이름”을 수정하고 “다음”을 누른다.

 

다음을 누르면 NodeJS개발에 필요한 모듈을 WebMatrix에서 자동으로 추가해 준다.

여기서 나오는 대화창에서 다음 다음 누르면 저절로 설치가 완료가 된다.

 

완료가 된 화면이다.

 

“파일”탭에서 파일 편집 및 폴더 구조를 한눈에 파악할 수 있다.

 

처음으로 NodeJS를 통해서 실행한 화면이다.

 

테스트를 위해 server.js에서 실행 및 수정된 소스가 반영이 되는지 테스트를 해보도록 하겠습니다.

 

수정된 server.js가 정상적으로 반영된 모습이다.

(혹 테스트시 한글이 깨져 보인다면 “res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });” 로 수정하면 정상적으로 보일 것입니다.)

 

테스트 해보지 않은 다름 템플릿으로도 한번씩 시도해 보시기 바라며

NodeJS개발에 익숙하지 않으신 분들께서는 분석해 보시는 것만으로도 도움이 되실 것입니다.

 

감사합니다.

저작자표시 동일조건

'NodeJS' 카테고리의 다른 글

Node.JS를 멀티 코어에서 동작(node.js Multi Core Run)  (0) 2012.11.20
WebMatrix에서 Simulator, Emulator 추가  (0) 2012.11.20
WebMatrix에서 Node.js 사용하기 Ex-javascript intellisense, jade, ejs, CoffeeScript  (0) 2012.11.20
Windows에서 Meteor 개발 환경 구축  (0) 2012.11.20
WebMatrix에서 Node.js 사용하기 Ex-NPM 사용  (0) 2012.11.18

이전 포스트에서 처음으로 실행하여 화면을 띄워 보았습니다.


이제 처음 실행된 WebMatrix에 대해서 전체적으로 설명을 드리도록 하겠습니다.


1. 사이트 탭

- 현재 프로젝틔 대략적인 정보와 URL을 관리한다.


[그림1]



2. 파일

- 프로젝트에서 포함되어 있는 파일을 관리 한다.

- 추가, 삭제, 수정을 할 수 있도록 한다.


[그림2]



3. 데이터베이스

- 데이터베이스 관리를 할 수 있도록 한다.


[그림3]



4. 보고서

- 에러 통계를 관리 할 수 있도록 한다.


[그림4]








저작자표시 동일조건

'설치 및 소개' 카테고리의 다른 글

[WebMatrix] WebMatrix 3 Preview  (0) 2013.05.01
개발 그룹 사이트 링크  (0) 2012.11.12
WebMatrix 사용하기 #1  (0) 2012.11.09
WebMatrix 설치 #2  (0) 2012.11.09
WebMatrix 설치 #1  (0) 2012.11.09

이제 설치가 되었으면 실행을 해볼 차례입니다.


윈도우 -> 시작 -> 모든프로그램 -> WebMatrix -> Microsoft WebMatrix 클릭




[그림1]은 실행이 되어 나온 첫 페이지 화면입니다.


[그림1]



이곳에서 "템플릿"을 클릭하면 [그림2]와 같은 대화상자가 나오며 HTML을 클릭하고 "빈사이트" 클릭하고 사이트 이름을 지어 주면 됩니다. 예로 "html_test"로 하겠습니다.


[그림2]



모든 대환 상자를 마치면 [그림3]과 같이 완료가 되었습니다.


[그림3]



 위 상태에서 Html_test의 바로 밑 URL을 마우스로 클릭하면 기본 페이지를 Web Browser에서 볼 수 있습니다.(port 번호는 임의로 선택이 되기 때문에 달라 질 수 있습니다.)

저작자표시 동일조건

'설치 및 소개' 카테고리의 다른 글

개발 그룹 사이트 링크  (0) 2012.11.12
WebMatrix 사용하기 #2  (0) 2012.11.09
WebMatrix 설치 #2  (0) 2012.11.09
WebMatrix 설치 #1  (0) 2012.11.09
WebMatrix란?  (0) 2012.11.09

 WebMatrix 설치를 위해서는 우선적으로 WPI(Web Platform Installer 이하 WPI)에 대해서 약간의 설명할 필요 성이 있습니다.


 WPI는 MS의 최신 컴포넌트를 쉽게 다운받아 설치 및 추가할 수 있도록 제공하는 응용프로그램입니다. 제공되는 플랫폼들이 많이 존재하며 MS에 국한되어 제공하고 있지는 않습니다.


WPI를 설치 Link : http://www.microsoft.com/web/downloads/platform.aspx





WebMatrix외에 Python, PHP, MySQL, Windows Azure 같은 플랫폼도 있고

WordPress, Joomla, Moodle 등 설치하여 서비스할 수 있게도 할 수 있습니다.


[그림1]에서 보시는 바와 같이 주요 제품에 대한 리스트를 보여주고 있습니다.



[그림1]



[그림2]는 제품에 대한 리스트를 보여주고 있습니다.


[그림2]



[그림3]은 설치하여 사용할 수 있는 응용 프로그램 리스트를 보여줍니다.


[그림3]





상단 카테고리는 "제품", "응용프로그램"으로 나뉘며


- "제품"에는 설치해야 하는 응용프로그램을 고를수 있으며

- "응용프로그램"에서는 WebMatrix platform(php, mysql, node, asp.net webpage, ...) 위에서 동작하는 서비스형 프로그램을 추가 할 수 있습니다.





저작자표시 동일조건

'설치 및 소개' 카테고리의 다른 글

WebMatrix 사용하기 #2  (0) 2012.11.09
WebMatrix 사용하기 #1  (0) 2012.11.09
WebMatrix 설치 #2  (0) 2012.11.09
WebMatrix란?  (0) 2012.11.09
Intro  (0) 2012.11.08

WebMatrix란?


 한마디로 정의 하자면 "웹 개발을 쉽게 지원하기 위해 나온 공개 소프트웨어"라고 말할 수 있을것입니다. 그렇지만 그 속내를 추측하자면 MS의 개발 언어(ASP.NET MVC, Razor Syntax)를 보더 쉽게 접근하고 널리 보급하기 위해 배포하는 프로그램이라고 생각합니다.


 더군다나 WebMatrix는 MS에 제한적인 기능만을 지원하지 않고 PHP, MySQL, Node.js도 지원을 하고 있으며 확장 기능을 이용해 얼마든지 넓혀 갈수 있는 여지를 가지고 있습니다. 더군다나 NuGet를 이용해서 필요한 리소스를 유동적으로 추가하여 사용할 수 있습니다. 배포에 대해서 쉽게 접근할 수 있도록 되어 있습니다.


좀더 자세한 사항은 아래 "더보기"를 보시면 됩니다.




[그림 1]



 위 그림은 실제 실행된 WebMatrix이며 확장 기능을 이용해 테마를 설치하여 색상 변경을 완료한 화면입니다.



저작자표시 동일조건

'설치 및 소개' 카테고리의 다른 글

WebMatrix 사용하기 #2  (0) 2012.11.09
WebMatrix 사용하기 #1  (0) 2012.11.09
WebMatrix 설치 #2  (0) 2012.11.09
WebMatrix 설치 #1  (0) 2012.11.09
Intro  (0) 2012.11.08

+ Recent posts

티스토리툴바