#PARAN SILVERLIGHT#
  • Tistory
    • 관리자
    • 글쓰기
Carousel 01
Carousel 02
Previous Next

'PROGRAMING'에 해당되는 글 58건

  • 2012.02.21 [CSS3] 선택자 분류, CSS적용하는방법 [CSS3] 선택자 분류, CSS적용하는방법
  • 2012.02.08 Microsoft Service Trace Viewer
  • 2011.12.15 IIS Access-Control-Allow-Origin 설정 : CORS(Cross-Origin Resource Sharing)
  • 2011.12.14 크로스 도메인(Cross Domain)
  • 2011.12.09 WCF RIA End Point : ODATA/SOAP/JSON
  • 2011.11.23 HTML5 자료
  • 2011.11.18 Visual Studio 2010 : HTML5 TEMPLATE 사용
  • 2011.11.17 C# 델리게이트 => 익명메소드(Anonymos Method) => 람다표현식 and Func, Action
  • 2011.11.17 Extension Method(확장메소드)
  • 2011.10.17 C# - 4.0 dynamic

[CSS3] 선택자 분류, CSS적용하는방법 [CSS3] 선택자 분류, CSS적용하는방법

PROGRAMING/HTML5 2012. 2. 21. 11:47

선택자의 종류 

 

 용어

 내용

 CSS에서 적용 방법

 태그선택자

 HTML 태그에 속성 적용

 p, table, body, header, nav 등 HTML 태그

 클래스선택자

 .(점)으로 시작하는 선택자

 .classname(개발자가 이름 지정)

 아이디선택자

 #(샵)으로 시작하는 선택자

 #idname(개발자가 이름 지정)

 종속선택자

 선택자에 종속된 선택자

 p.classname
 table.classname
 p#idname

 (이름을 붙여서 사용)

 하위선택자

 선택자 내부의 모든 자식 선택자

 p a
 p .classname
 p #idname
 (선택자와 선택자 사이에 빈칸)

 전체선택자

 전체 문서에 영향을 줌

 *(별표)

 그룹선택자

 여러 선택자를 복합적으로 적용할 때

 p, .classname, #idname, table
 (각각의 선택자를 ,(콤마)로 분리)

 자식선택자

 선택자 바로 밑의 자식 선택자

 p > a
 ul > li
 (> 기호 사용)

 인접선택자

 붙어있는 선택자와 선택자에 특정 효과를 줄 때 사용

 h1 + p
 (+ 기호 사용)

 

CSS 적용방법

 

1. 인라인 방식

태그에 직접 스타일을 적용하는 방식
ex) <p style="color:red;">...</p>

 

스타일을 바로바로 확인해 볼수 있다.

하지만 웹표준 이전의 방식과 차이가 없고, 유지보수에 불편하므로 비추하는 방식.

 

2. 임베디드 방식

헤드에 스타일을 지정해서 적용하는 방식

ex) <head>

     <style type="text/css" media="screen">

     h1 {color:#ffc;}

     </style>

     </head>

 

단일문서일때, 개발의 편의를 위해서 사용

인라인 방식에 비해 같은 스타일을 여러군데 적용할때 편리.


 

3. @import 방식

외부에 별도로 .css 파일을 만들어 적용하는 방식
ex) <head>

     <style type="text/css" media="screen">

     @import url(main.css);

     </style>

     </head>

 

구식 브라우저에서는 인식하지 못한다.

CSS파일 내부에서 다른 CSS파일을 불러올 수 있다.

 

4. link 방식

외부에 별도로 .css 파일을 만들어 적용하는 방식
ex) <head>

     <link href="main.css" rel="stylesheet" type="text/css" media="screen" />

     </head>

 

속도면에서 @import보다 빠르게 로딩된다.

많은 CSS파일을 관리하기에 편하다.

강추하는 방식.

 

[출처] [CSS3] 선택자 분류, CSS적용하는방법|작성자 꼬꼬냥   

[출처] [CSS3] 선택자 분류, CSS적용하는방법|작성자 꼬꼬냥

저작자표시 비영리 (새창열림)
블로그 이미지

파란실버라이트

To remember the time when I started learning Silver Light!

,

Microsoft Service Trace Viewer

PROGRAMING/SILVERLIGHT 2012. 2. 8. 10:08

 Web Server Program으로 요청에러가 발생할 때 Trace 할 수 있도록 도와주는 툴

 



 Web.config 파일에 다음 항목을 추가하면 

 D:\FindCoworker\client_tracelog.svclog 위치에 파일이 생성된다.
 더블 클릭하면 위 프로그램이 실행된다.

  <system.diagnostics>
    <sources>
      <source name="System.ServiceModel" switchValue="Information,ActivityTracing"           propagateActivity="true">
        <listeners>
          <add name="ServiceModelTraceListener"/>
        </listeners>
      </source>
      <source name="System.Net.Sockets" switchValue="Information">
        <listeners>
          <add name="ServiceModelTraceListener"/>
        </listeners>
      </source>
      <source name="System.Net" switchValue="Information">
        <listeners>
          <add name="ServiceModelTraceListener"/>
        </listeners>
      </source>
    </sources>
    <sharedListeners>
      <add initializeData="D:\FindCoworker\client_tracelog.svclog"           type="System.Diagnostics.XmlWriterTraceListener, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"           name="ServiceModelTraceListener" traceOutputOptions="LogicalOperationStack, DateTime, Timestamp, ProcessId, ThreadId, Callstack"/>
    </sharedListeners>
    <trace autoflush="true" />
  </system.diagnostics>

저작자표시 비영리 (새창열림)
블로그 이미지

파란실버라이트

To remember the time when I started learning Silver Light!

,

IIS Access-Control-Allow-Origin 설정 : CORS(Cross-Origin Resource Sharing)

PROGRAMING/HTML5 2011. 12. 15. 15:26
  WCF RIA 서비스의 end point를 JSON으로 설정하고 Sencha touch로 구현한 클라이언트에서 데이타를 가져오기 위해서 Ajax 통신으로 Json 데이타를 가져오려고 시도 했더니 다음과 같은 에러가 발생하였다. 

  XMLHttpRequest cannot load [서버 URI]. Origin [클라이언트 도메인] is not allowed by Access-Control-Allow-Origin. 

WCF RIA 서비스의 도메인 정책에 문제가 있는 것으로 판단되어 clientaccesspolicy.xml/crossdomain.xml 를 서버에 저장해도 같은 에러가 발생해서 알아보니 다음 내용과 관련된 문제 였다.

참조 : http://blog.iolo.pe.kr/category/hacking/web 

Ajax에는 Same Origin Policy라는 원칙이 있다. 말 그대로, 현재 브라우져에 보여지고 있는 HTML을 내려준 웹서버(Origin)에게만 Ajax 요청을 보낼 수 있다.


MS가 XMLHttpRequest를 처음 만들 때만 해도 이런 제약은 당연한 것처럼 보였지만, 지금에 와서는 OpenAPI를 통한 매시업(Mashup)이 활성화되는 데 가장 큰 장애물이 되었다. 매시업이 아니더라도 여러 개의 도메인을 사용해야 하는 대규모 사이트를 개발할 때도 골치거리였다. Same Origin Policy를 우회하는 방법으로 JSONP, IFRAME IO, CrossDomain Proxy 등이 고안되었지만, 보안성이 취약하다거나, 동기 호출이 안되거나, 주고 받는 데이터 형식이 제한되거나, 직관적이지 못하거나(dirty hack), ... 등의 문제점 때문에 표준화되기엔 무리가 있었다.

(중략) 한 참 뒤에야 W3C는 (MS의 IE가 제공하는 방식을 수용하여) 크로스도메인간에도 Ajax요청을 주고 받을 수 있는 방법을 표준화 했는데, 그것이 바로 CORS다.

CORS를 한 마디로 요약하면, "요청을 받은 웹서버가 허락하면 크로스도메인이라도 Ajax로 통신할 수 있다"라는 정책이다. 기술적으로는 크로스도메인에 위치한 웹서버가 응답에 적절한 Access-Control-Allow-류의 헤더를 보냄으로써 크로스도메인 Ajax를 허용 수 있다.

말이 뺑뺑도는 느낌인데, 예를 들어 보자(코드를 줄이기 위해  jQuery를 사용했지만 XMLHttpRequest를 직접 사용해도 마찬가지다). Ajax 요청을 보내는 one.html을 내려 준 a.com이 오리진 웹서버다. 이 요청을 받는 b.com이 크로스도메인 웹서버다. a.com에서 b.com으로... 그래서 크로스-도메인이다.

대충 그려보면 이런 식인데, b.com은 크로스도메인이므로 Ajax 통신이 불가능하지만, CORS를 적용하면 가능하다:




서버 프로그램의 Web Config 설정을 다음과 같이 바꾸어 주었더니 엑세스가 허용되었다. ^^ ( IIS 7.0 기준)

   <system.webServer>

    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
    
  </system.webServer>

자세한 내용은 다음 사이트를 참고하세요. 
http://enable-cors.org/  


추가 내용 / 2012.01.31

wcf rest service template 40를 사용해서 Restful service를 제공하는 project를 생성하였고 위 내용을 적용해도 엑세스가 허용되지 않았다.
그래서 다음과 같이 하였더니 허용되었다. ^^

Global.asax 에 다음 내용 추가

        protected void Application_BeginRequest(object sender, EventArgs e)
        {
            HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
            HttpContext.Current.Response.Cache.SetNoStore();
            EnableCrossDmainAjaxCall();
        }
        private void EnableCrossDmainAjaxCall()
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin",  "*"); // * 대신 접속 하는 site를 추가하면 될 듯.
            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods",
                              "GET, POST");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers",
                              "Content-Type, Accept");
                HttpContext.Current.Response.AddHeader("Access-Control-Max-Age",
                              "1728000");
                HttpContext.Current.Response.End();
            }
        }





------------------------------------------------------------------------------------------------------------------------------------------
저작자표시 비영리 (새창열림)
블로그 이미지

파란실버라이트

To remember the time when I started learning Silver Light!

,

크로스 도메인(Cross Domain)

PROGRAMING/SILVERLIGHT 2011. 12. 14. 11:21
참조 : http://blog.naver.com/catchbug?Redirect=Log&logNo=20130559763

실버라이트는 클라이언트에 다운로드되어 실행되지만, 실버라이트 런타임 샌드박스 안에서 실행이 된다.

그 말은 실버라이트는 사용하는 사용자의 PC에 프로그램이 다운은 되지만,

사용자 PC의 운영체제 권한으로 실행되는것이 아닌, 실버라이트 런타임의 제어를 받는 영역에서 실행이 된다는 이야기다.

또, 실버라이트 런타임은 실버라이트가 실행된 URL에 종속적이 된다.

이 말은 실버라이트 런타임은 호출 URL마다 각각의 영역이 갈린다는 이야기가 된다.

A사이트에서 실행된 실버라이트는 런타임 A영역에서, B사이트는 런타임 B영역에서 각자의 영역이 생긴다.

이 때 실버라이트가 실행된 URL이 아닌 다른 URL의 서비스를 호출하려고 하면, 크로스도메인 문제가 발생된다.

크로스도메인은 간단히 얘기하면 다른 URL의 리소스를 건드는 짓을 막는 보안규칙같은 것이다.

친절한 실버라이트께서는 다른 URL에 서비스를 호출하려고 하면 해당 서버에 '나 접속해도 돼??' 라고 물어 본다.

이때 이 물음에 답이 서버 루트에 clientaccesspolicy.xml 파일이다.

이곳에 설정되어있는 정보에 따라 접속을 하고 안하고를 결정한다.

<?xml version="1.0" encoding="utf-8"?>

<access-policy>

<cross-domain-access>

<policy>

<allow-from http-request-headers="*">

<domain uri="http://*"/>

<domain uri="https://*"/>

</allow-from>

<grant-to>

<resource path="/" include-subpaths="true"/>

</grant-to>

</policy>

</cross-domain-access>

</access-policy>




참조 : http://www.sqler.com/401814

기본적으로 실버라이트의 모든 네트워크 API는 실버라이트 .xap 파일이 게시되어 있는 도메인만 접근할 수 있습니다. 즉, 기본적으로 크로스 도메인이 지원 안된다는 것이죠.

다른 도메인에 있는 웹 서비스를 호출한다던지, 아니면 WebClient를 이용하여 다른 도메인에 있는 파일을 다운로드하는 경우에는 해당 도메인 쪽에 크로스도메인 정책 파일이 있어야 작동합니다. 이건 실버라이트가 원래 그렇게 만들어졌기 때문에 어쩔 수 없습니다.

크로스 도메인 접근을 허용하려면 다음과 같이 clientaccesspolicy.xml 을 만들어서 해당 도메인의 웹 루트 폴더에 넣어줘야 합니다.

<?xml version="1.0" encoding="utf-8"?>

<access-policy>

<cross-domain-access>

<policy>

<allow-from http-request-headers="*">

<domain uri="*"/>

</allow-from>

<grant-to>

<resource path="/" include-subpaths="true"/>

</grant-to>

</policy>

</cross-domain-access>

</access-policy>

위 파일의 내용을 설명한다면… “모든 http request에 대해서 현재 서버의 모든 도메인과 하위 경로에 대해서 다 접근해도 된다.” 라는 뜻이 됩니다.

만약, 어떤 서버에 여러 개의 웹사이트가 호스팅되고 있고, 각각이 도메인이 다르게 설정되어 있을 때, 일부 도메인만 허용하려면 다음과 같이 하면 됩니다.

<?xml version="1.0" encoding="utf-8"?>

<access-policy>

<cross-domain-access>

<policy>

<allow-from http-request-headers="*">

<domain uri="http://www.mydomain1.com" />

<domain uri="http://www.mydomain2.com" />

</allow-from>

<grant-to>

<resource path="/" include-subpaths="true"/>

</grant-to>

</policy>

</cross-domain-access>

</access-policy>

다음과 같이 특정 서비스 폴더 아래쪽만 접근하게 할 수도 있습니다.

<?xml version="1.0" encoding="utf-8"?>

<access-policy>

<cross-domain-access>

<policy>

<allow-from http-request-headers="*">

<domain uri="*"/>

</allow-from>

<grant-to>

<resource path="/services/" include-subpaths="true"/>

</grant-to>

</policy>

</cross-domain-access>

</access-policy>

clientaccesspolicy.xml 을 잘 사용하면 웹 서버의 보안성을 보다 높일 수 있겠죠?

한 가지 더 있습니다.

플래시에서도 이와 유사하게 crossdomain.xml 이라는 것을 사용합니다. 고맙게도 실버라이트는 clientaccesspolicy.xml 뿐만 아니라 crossdomain.xml도 지원하기 때문에 이미 플래시를 잘 지원하는 웹 서비스 사이트에 별도로 clientaccesspolicy.xml 를 넣지 않아도 실버라이트가 접근할 수 있도록 해줍니다.

예로 유튜브와 같은 서비스는 clientaccesspolicy.xml 가 없어도 crossdomain.xml가 있기 때문에 실버라이트에서 접근할 수 있지요.

한번 다음 링크를 열어보세요^^

http://www.youtube.com/crossdomain.xml

http://www.youtube.com/clientaccesspolicy.xml

참고로, crossdomain.xml은 다음과 같이 생겼습니다.

<?xml version="1.0"?>

<!DOCTYPE cross-domain-policy SYSTEM

"http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">

<cross-domain-policy>

<allow-http-request-headers-from domain="* " headers="*" />

</cross-domain-policy>

저작자표시 비영리 (새창열림)
블로그 이미지

파란실버라이트

To remember the time when I started learning Silver Light!

,

WCF RIA End Point : ODATA/SOAP/JSON

PROGRAMING/SILVERLIGHT 2011. 12. 9. 15:09

 WCF RIA 서비스를 사용해서  다른 END POINTD의 서비스를 생성하는 방법
 참조 : http://blogs.msdn.com/b/davrous/archive/2010/12/14/how-to-open-a-wcf-ria-services-application-to-other-type-of-clients-the-json-endpoint-4-5.aspx

 센차터치을 사용하여 하이브리드 웹 개발 중
 서버의 프로그램에서 END POINT를 JSON으로 사용하는 방법을 찾다가 발견하게 되었다.^^

 1. ORACLE data Provider for  Data Entity FrameWork Beta 버젼을 설치
   http://www.oracle.com/technetwork/topics/dotnet/downloads/oracleefbeta-302521.html
   User Table을 User.edmx 로 저장


 2. User.edmx파일을 가지고  WCF RIA 서비스를 생성 



 3. Web.Config 파일을 변경해서 ODATA, SOAP ,JSON으로 서비스를 제공
   WCR RIA 관련 툴킷을 설치해서  System.ServiceModel.DomainServices.Hosting와     Microsoft.ServiceModel.DomainServices.Hosting 가 참조되어야 한다.

 

 




 4. Test 결과
  a. Odata

  b. SOAP


  c. JSON


 이제 각 서비스를 Consume해서 어떻게 클라이언틀 구성하는 문제만 남았다. 이것만 남았으려나. ^^;
 
 

JSON_Test.zip

저작자표시 비영리 (새창열림)
블로그 이미지

파란실버라이트

To remember the time when I started learning Silver Light!

,

HTML5 자료

PROGRAMING/HTML5 2011. 11. 23. 13:29

HTML5 정보 포탈

HTML5 쉽게 쉽게 !!

4대 IT 트랜드라는 세미나에서 RIA 만큼의 충격은 아니었지만 오 ~ 괜찮다 싶었던 HTML5 + CSS3 

앞으로 하루 30분씩 적지만 아주 큰 시간을 책과 웹을 검색하며 공부를 해볼까 한다.

 

 

STEP 01 - HTML5 에 대한 기초 지식 익히기

HTML5 자료 모음 링크 :  http://channy.creation.net/blog/776 

  상단의 링크는 아래와 같은 내용을 포함하고 있습니다.

 - 문서 자료 : 실전 HTML5 가이드 다운로드(A4 인쇄용) <- 아이폰과 아이패드에 삽입 굿

  - 강의 동영상 

  - HTML5 소개 

    ( 등장 이유부터 HTML4와 5의 차이점 등 )

  -  HTML 5 관련 발표 자료 및 글모음

 - 여러 블로그 글 모음

 - 각각의 튜토리얼과 데모까지 

 

 

STEP 02 구축은 어떤식으로 가는가

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

IBM 사이트에 있는 자료들 

HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기

http://www.ibm.com/developerworks/kr/library/tutorial/wa-html5/section4.html 


HTML 5로 모바일 웹 애플리케이션 작성하기,

Part 1: HTML 5, geolocation API 및 웹 서비스를 결합하여 모바일 매시업

작성하기  http://www.ibm.com/developerworks/kr/library/x-html5mobile1/

 

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


미디어 쿼리란? 봐야알지 !! ( 클릭해서 창을 움직여 보세요 ^^ ) 

http://bananatiger.com/study/1_media_queries/exam_1.html
 - 이미지가 화면사이즈에 비례되어 사이즈가 조절! ( IE는 8.0이상 )

( 아이폰이나 PC 해상도나 최적화로 보자 )

 

미디어 쿼리 다른 예제 ( IE에서는 안될수도 있습니다. )

http://chaospace.cafe24.com/html5/mediaQuery_01.html

출처 : http://chaospace.tistory.com/150 

 

보시면 알겠지만 창 사이즈를 변경하였을 때 그 보여지는 것이 다릅니다.

모바일로는 작게 창을 보게 되실것이고, PC나 노트북용 화면은 또 다르겠죠



 

 

 

그리고 돌아다니다가 얻게된 IPHONE4 UI PSD !!  감사합니다

( JQuery Mobile 애플 스킨이 참 편리하긴 하지만 )

참조 : http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/



 

그리고 이건 정말 대박이다..

http://html5demos.com/

각각의 브라우저별로 소스 지원 부분까지 이거로 오늘 시간 다 보내고 있는듯.. 

 

HTML5 NOTIFICATIONS ( 알림 )

데스크탑 알림 창
응용프로그램에서 알림창은 (응용프로그램) 자신의 상태나 변화를 실시간으로 알려주기 위한 장치이다
대표적인 예로 메신저에서 메시지 수신이나 친구 로그인 등의 알려주는 것을 들 수 있다



이러한 알림창은 응용프로그램이 비활성화 되어 있더라도,
사용자에게 중요한 정보를 시각적으로 즉시 알려 주기 위한 유용한 장치이다
HTML5 의 Notifications 은 웹 페이지에서도 이와 같은 데스크탑 알림창을 구현하기 위한 스펙이다

사용법과 지원브라우저 , 데모 확인은 아래의 URL에서 확인가능합니다. ( 트위터 API 도 포함 )

가져옴 : http://m.mkexdev.net/69

 

인터넷 접속 상태 확인 ( 현재 온라인인지 오프라인인지 )

어도비 에어나 실버라이트의 아웃오브브라우저 같은 경우등 오프라인에서도 앱을 돌릴때 체크용이 할듯..

 

가져옴 : http://cafe.naver.com/webappdev/291


 

오 마이갓 크롬으로 써놓고 IE로 네이버 이미지 올리고 저장하다가 쓴글이 날라갔군요 ㅠㅠ 

언젠가 브라우저 하나만 쓰는 날이 오겠죠? HTML5 그렇게 해줄겁니까? ㅎㅎㅎ

 

 

그외 또다른 정보 모음

 

JQuery Mobile 에 대해 알고 싶으시다면 ( 웹앱이란 ) 
http://ahman.kr/30103534325


웹앱 스토어를 알고 싶으시다면 
http://ahman.kr/30098469023

 

HTML 데모 사이트에 대해 더 알고 싶으시다면
http://ahman.kr/30098150715

 

HTML5 API 같은 사이트 자세히 잘 나와있내요 ^^ GOOD

http://www.whatwg.org/specs/web-apps/current-work/

훌룡하신 선배님들 감사합니다.

 

HTML5 디자인 개발툴 엣지(EDGE) 공개 - 어도비(Adobe) 
http://ahman.kr/30098089486


HTML5 기능 포탈

동영상 플레이 제작법
http://ahman.kr/30098096429


HTML5 Canvas 종결자 - Tutorials 

예제에 따른 결과와 소스를 보고 바로 적용해볼 수 있는 Tutorials 잘되어있내요 굿 ! 

http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/

 

Canvas API 모음

http://dev.w3.org/html5/spec/Overview.html#the-canvas-element

http://dev.w3.org/html5/canvas-api/canvas-2d-api.html

http://www.canvasdemos.com/

http://www.modernnizr.com/ ( 현재 안들어가지는 느낌 )

http://html5doctor.com/an-introduction-to-the-canvas-2d-api/ ( 예제와 함께 )

https://developer.mozilla.org/en/canvas_tutorial ( 모질라 )

http://dev.opera.com/articles/view/html-5-canvas-the-basics/ ( 오페라 )
 

자바스크립트와 HTML5 Canvas를 이용한 얼굴인식

http://firejune.com/1674

 

HTML5 주제별 Tutorials 

http://www.html5rocks.com/tutorials/


Typographic effects in canvas ( 주제별 Tutorials 중에 효과들 ) 

http://www.html5rocks.com/tutorials/canvas/texteffects/


 

input 태그에 여러가지 속성 추가

 <input type="search"> 검색 박스
<input type="number"> 숫자를 위한 input
<input type="range"> 슬라이드 
<input type="color"> color picker 
<input type="tel"> 전화번호
<input type="url"> 웹 URL 주소 
<input type="email"> 이메일 주소 
<input type="date"> 달력 표시 및 날짜 선택 
<input type="month"> 월 <input type="week"> 주
<input type="time"> 타임스탬프 
<input type="datetime"> date+time stamps 
<input type="datetime-local"> 지역 날짜와 시간

http://blog.naver.com/hanoul76psy?Redirect=Log&logNo=102116636

 

아 input type은 오페라만 지원된다고 하내요

http://cafe.naver.com/daoustyle.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=358&


 

HTML5 구현 쇼케이스

APPLE HTML5 SHOWCASE

http://www.apple.com/html5/

 

시맨틱 태그와 지원 코덱 알아보긔  
http://ahman.kr/30098026139

 

웹표준화 가이드 ( 클릭클릭만으로 소스를 얻을 수 있게 편함 ) - NHN

http://html.nhndesign.com/

추가해주실 정보 있으면 서로서로 글 남겨주세요 ^^

 

CSS3 TOP10

( 쓰는 방식과 쉽게 적용하는 방법에 대해 10가지 프레젠테이션 형식으로 소개한 자료 )

역시 디자이너의 힘을 빌려야.. 
http://blog.naver.com/sary1125/100123705956

 

HTML5 Canvas Dynamic Animation   ( Canvas에 애니메이션 적용하여 강의 되어 있는 좋은 글 )

http://rintiantta.blog.me/40120729820


HTML5 오픈 커뮤니티

http://htmlfive.co.kr/

 


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

HTML5 관련글 

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


HTML5 를 배워야 하는 진짜 이유?

http://wasjwa.blog.me/123690532


KT, HTML5 기반 모바일 올레마켓 출시…아이폰에서도 쓴다

http://www.bloter.net/archives/55978

 

제가 가진 정보들을 공유합니다.

도움이 되셨으면 좋겠내요. 없는 정보들 좋은 정보들 알려주세요. ^^



최종 업데이트 :

    011.07.18  :    Canvas API 모음

                      자바스크립트와 HTML5 Canvas를 이용한 얼굴인식 

[출처] HTML5 정보 포탈 ( 자료 모음 ) - HTML5의 모든것 Link|작성자 아이크렌

http://ahman.kr/30097972336


저작자표시 비영리 (새창열림)
블로그 이미지

파란실버라이트

To remember the time when I started learning Silver Light!

,

Visual Studio 2010 : HTML5 TEMPLATE 사용

PROGRAMING/HTML5 2011. 11. 18. 10:58

HTML5 Web Site.zip




1. 다음 경로에 첨부 파일 저장


2. 새로운 웹페이지 생성



3. 생성된 템플릿 선택


참고 사이트 : http://blog.reybango.com/2010/09/21/how-to-create-html5-website-and-page-templates-for-visual-studio-2010/

저작자표시 비영리 (새창열림)
블로그 이미지

파란실버라이트

To remember the time when I started learning Silver Light!

,

C# 델리게이트 => 익명메소드(Anonymos Method) => 람다표현식 and Func, Action

PROGRAMING/C# 2011. 11. 17. 15:39


자세하게 정리해놓은 곳 링크 : 감사합니다. 감사합니다.
http://blog.naver.com/rocabilly?Redirect=Log&logNo=140133538660

델리게이트를 쓰는 이유 ??

델리게이트는 자기에게 전달된 함수를 대신 실행시켜주는 역활을 하는 함수 포인터
자신에게 할당된 함수를 대신 실행시켜 줍니다.
이벤트는 델리게이트 기반하여 만들어 졌습니다

어떤 Action(Event)을 정해놓고 다른 개발자에게 해당 Action(Event) 대로 함수를 구현 하라고 규약을 정해놓을때
(본인은 Action에 대한 포인터 즉 델리게이터만 실행하면 되니까..^^)
각 함수들을 일렬로 나열해서 실행 시킬수 있다는 겁니다.
추후에 나오는 LINQ(익명메소드, 람다표현식)등에는 참 잘 쓰일 거라는...



using System;

namespace 무명메서드
{
    //[!]대리자 선언
    public delegate void SayHandler(string mag);

    //3번
    public class Button
    {
        //이벤트 생성
        public event SayHandler Click;  //SayHandler 대리자타입 사용으로 Click 이벤트 생성
       
        //이벤트 핸들러 생성
        public void OnClick(string msg) //이벤트 발생 메서드 (이벤트 핸들러 생성)
        {
            if (Click != null)
            {
                Click(msg);
            }
        }       
    }

   
    public class Program
    {
        public static void Say(string msg) { Console.WriteLine(msg); }
        public static void Say2(string msg) { Console.WriteLine(msg+"2"); }
        public static void Say3(string msg) { Console.WriteLine(msg+"3"); }

        public static void Main(string[] args)
        {
            //[1] 메서드 호출
            Say("일반적으로 메서드 호출");

            ////[2]대리자를 통해서 대신 호출
            SayHandler sh = new SayHandler(Say); // a.delegate 생성과 함께 Say함수 등록
            sh += new SayHandler(Program.Say); //   b.생성된 delegate에 say함수를 등록
            sh += Say;                         //   c.생성된 delegate에 say함수를 등록
           
            sh("델리게이트 등록 후"); //delegate가 say 함수 호출 =>
say가 3번 등록 되었으므로 3번 호출

            sh -= new SayHandler(Program.Say); //등록된 함수를 제거
            sh -= Say; //등록된 함수를 제거
            sh("델리게이트 제거 후"); //delegate가 say 함수 호출 =>
say가 제거 되었으므로 1번 호출

            sh += Say2;
            sh += Say3;
            sh("say2, say3 함수 등록 후 : 순차적으로 호출"); // 등록된 순서로 say, say2, say3를 호출


            //[3] 이벤트와 이벤트 처리기를 통하여 등록해서 호출
            Button btn = new Button();

            btn.Click += new SayHandler(Say); //기본형 .......번개모양 : 이벤트
          btn.Click += Say;//축약형

            btn.OnClick("이벤트 핸들러");//실행

            //[4]익명메서드 : Say 함수를 작성하지 않고 익명메서드로 작성
            SayHandler hi = delegate(string msg)
            {
                Console.WriteLine(msg);
            };
            hi("익명메서드");
            //[5]익명메서드 : Button의 click event를 익명 메서드로 작성
            Button button = new Button();
            button.Click += delegate(string msg)
            {
                Console.WriteLine(msg);
            };

            button.OnClick("이벤트 익명메서드");

            //[6]람다표현식 : Button의 click event를 Ramda 표현식으로 작성
            Button button1 = new Button();
            button1.Click += (string msg) => Console.WriteLine(msg);
 
            button.OnClick("람다 표현식");
        }
    }
}

DeligateToRamda.zip



Func ,  Action  :  아주 유연한 메소드 호출을 가능

Func 델리게이트와 Action 델리게이트는 같은 역활을 합니다.
Action 도 Func 처럼 system 네임스페이스안에 선언

큰 차이점은 위임된 메소드가 처리되고 결과값이 반환되느냐 아니냐 차이

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
 
namespace FuncAndActionPractice
{
    class Program
    {
        static void Main(string[] args)
        {
            //Func<out TResult>
            //Func<in T1, out TResult>
            //Func<in T1,in T2, out TResult>
            //Func<in T1,in T2,...in T16, out TResult>
            //제일 오른쪽 끝이 리턴 타입이고 앞에 인자들(T1,T2,..)은 각각 Input 파라미터의 타입
 
            Console.WriteLine("명시적 메소드");
            Func<int, string> func1 = deleMethod;
            Console.WriteLine(func1(10));
 
            Console.WriteLine("익명 메소드");
 
            Func<int, string> func2 = delegate(int num)
            {
                return "익명 메소드 :" + num.ToString() + "개 입니다.";
            };
            Console.WriteLine(func2(20));
 
            Console.WriteLine("람다식");
            Func<string ,string> func3 = num => { return "람다식:" + num.ToString() + "개 입니다";};
            Console.WriteLine(func3("30"));
 
            //Action
            //Action <in T1>
            //Action <in T1,in T2>
            //Action <in T1,in T2,...in T16>
 
            Action<string> action1 = name => { Console.WriteLine(name + "  delelgate i am."); };
            Action action2 = () => { Console.WriteLine("delelgate i am without inpu parameter."); };
 
            action1("Action");
            action2();
 
        }
 
        public static string deleMethod(int num)
        {
            return " 명시적 메소드 : " + num.ToString() + " 개 입니다";
        }
    }
}

 
출처 : http://godffs.tistory.com

저작자표시 비영리 (새창열림)
블로그 이미지

파란실버라이트

To remember the time when I started learning Silver Light!

,

Extension Method(확장메소드)

PROGRAMING/C# 2011. 11. 17. 10:41

MSDN에는 이렇게 나와있다고 하네요

확장 메서드는 형식으 ㅣ인스턴스 메서드인 것처럼 호출할수 있도록 형식과 연결된 수 있는
정적 메서드 입니다.
이 기능을 사용하면 실제로 기존 형식을 수정하지 않고도 기존 형ㅅ익에 새 메서드를 추가할수 있습니다.

Javascript에서도 이런 기능이 있죠.(Prototype)

C#에서는 IEnumerable<T> interface가 구현된 모든 타입에서 구현이 가능합니다.

간단한 소스를 봐보면요
view source
print?
01.public static class MyExtensions
02.{
03. public static int wordCount(this string str)
04. {
05. return str.Length;
06. }
07.}
08.class Program
09.{
10. static void Main(string[] args)
11. {
12. string s = "Extension Methods";
13. Console.WriteLine(s.wordCount().ToString());
14. }
15.}

확장메서드의 가장 큰 장점(?) 은 원래 부터 정의되어 있는 메서드 처럼 사용할수 있다는거죠.
실제로 String에는 wordCount() 라는 메서드가 없잖아요.
근데 그냥 . 찍고 wordCount() 해주면 새로 정의한 메서드가 호출되는거죠.
(사용자가 사용하기가 참 편하겠죠)
차이가 있다면 인텔리센스에서 메서드표시 옆에 화살표가 표시되는것과
이름옆에 (확장)이라고 표시되는거죠.



라인1 부터 7 까지가 확장메서드 입니다.
간단하게 string값의 길이(length)를 반환하는 메서드를 작성했어요(출력값은 17 이에요)

MyExtentions 라는 정적 클래스를 선언하고 그 안에 wordCount라는 메서드를 선언했어요.
인수는 string 객체이며 this 키워드를 붙입니다.
여기서 this는 호출객체를 의미하는 참조자가 아니라 뒤의 클래스에 대한 확장메서드임을 의미하는
지정자에요. wordCount가 string의 확장메서드라는 의미죠.

코드에서는 인수를 한개만 받았지만 실제로 인수는 제한이 없습니다.
두번째 인수부터는 실제 연산에 필요한 값들을 받으면 되는거죠.

(아무 의미가 없지만. --)string의 length에 특정 숫자를 붙인 int를 받는 메서드를 작성하고 싶으면


view source
print?
01.public static class MyExtensions
02.{
03. public static int wordCount(this string str, int add)
04. {
05. return str.Length+add;
06. }
07.}
08.class Program
09.{
10. static void Main(string[] args)
11. {
12. string s = "Extension Methods";
13. Console.WriteLine(s.wordCount(5).ToString());
14. }
15.}


이렇게 해주면 되죠.(출력값은 17+5 해서 22가 나오겠죠?)

확장메서드는 인스턴스 메서드처럼 사용되지만 소속은 분명히 클래스 외부입니다.
그러므로(당연히) 확장하는 클래스의 숨겨진 멤버들에는 접근을 할수가 없어요.
그래서 확장 메서드로 클래스를 확장한다고 캡슐화를 위한바는것도 아니고.
보안상으로도 별 문제가 없다고 하네요.

참조 : http://bravochoi.tistory.com/86

 

 

ExtensionMethods.zip


저작자표시 비영리 (새창열림)
블로그 이미지

파란실버라이트

To remember the time when I started learning Silver Light!

,

C# - 4.0 dynamic

PROGRAMING/C# 2011. 10. 17. 15:50
dynamic 형식을 var 형식과 비교 해서 설명 하겠습니다.
C# 3.0 에서 var 형식이 새롭게 등장 했습니다. VB 개발자라면 var 형식을 이미 접해 봤을 것입니다.
var 와 dynamic 형식은 처음 접하는 개발자들은 이게 뭐지? 라는 생각이 들겁니다.

var 와 dynamic 은 초기 선언 시 타입 지정이 없다는 것입니다.
그럼 타입 지정은 언제 이루어 지나? 이것이 var 와 dynamic 의 차이 입니다.

var 은 컴파일 시점에서 타입 확정이 이루어 지고, dynamic 은 런타임(Runtime)시 타입이 확정 됩니다.


그렇다면 dynamic을 왜 사용할까?
지금 까지의 C#은 컴파일 될 때 타입이 모두 확정이 되어야 했다. 하지만 COM Interop, .Net Object reflection 작업 등을 할 때 컴파일 시점에 타입을 확정 할 수 없으며, 정말 많은 코드를 작성 해야 하는 어려움이 있었습니다. 이러한 점을 말끔 하게 해결 해주는 구세주? 가 바로 dynamic 입니다.

하지만 dynamic도 분명 사용상에 단점이 존재 합니다. dynamic은 런타임시에 타입이 확정 되므로 컴파일 시점에 타입이 확정 되는 것보다 성능에 영향을 미치게 됩니다. 따라서 무조건 적 dynamic 사용은 비효율적이며 컴파일 시점에 타입 확정이 어려운 제한된 영역에서만 사용 하는 것이 좋습니다.

dynamic 형식 사용이 필요한 예는 다음과 같습니다.
COM object(COM IDispatch)
Dynamic objects(IDynamicObject, IronPython, IronRuby, HTML DOM)
Plain objects(.NET object reflection etc)

참조 : http://goosl.tistory.com/30
저작자표시 비영리 (새창열림)
블로그 이미지

파란실버라이트

To remember the time when I started learning Silver Light!

,
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • »

카테고리

  • Inforamtion Technology (281)
    • DESIGN PATTERN (33)
      • 실용주의 디자인패턴 (29)
    • SOFTWARE ENGINEERING (21)
      • Art Of Readable Code (12)
      • Object Oriented Programming (6)
      • TDD (2)
    • FRAMEWORK (22)
      • Spring.net (2)
      • LightSwitch (20)
    • PROGRAMING (58)
      • C# (20)
      • .NET (6)
      • HTML5 (7)
      • ASP.NET (9)
      • SILVERLIGHT (7)
      • Ruby On Rails (6)
    • PROJECT MANAGEMENT (10)
      • SW Version Management (7)
      • Schedulring Management (1)
    • BOOKS (18)
    • MOBILE APP (1)
      • SENCHA TOUCH (1)
    • SECURITY (5)
    • MES (1)
    • B2B (14)
      • WEBMETHODS (4)
    • ERP (53)
      • SAP/R/3 (51)
    • ABOUT TOOLS (2)
    • FUNDAMENT CONCEPT (21)
    • SOA BPM (22)
    • PORTFOLIO (0)

태그목록

  • 병렬
  • 프로그래밍
  • 동시성

최근에 받은 트랙백

글 보관함

링크

파란실버라이트

블로그 이미지

To remember the time when I started learning Silver Light!

LATEST FROM OUR BLOG

RSS 구독하기

LATEST COMMENTS

BLOG VISITORS

  • Total :
  • Today :
  • Yesterday :

Copyright © 2015 Socialdev. All Rights Reserved.

티스토리툴바