본문 바로가기

interactive_design/web_design88

[인터렉티브 미디어2]웹디자인 인트로 강의 www world wide webwww 월드 와이드 웹 창시자 팀 버너스 리의 TED 강연영상 http://www.ted.com/talks/tim_berners_lee_on_the_next_web.html email and domains - Country codesusername@site.domhttp://en.wikipedia.org/wiki/Domain_nameCountry codes NewsgroupsUsernet(Unix User Network) starting or joining a 'thread' Abbreviations and emoticonshttp://netforbeginners.about.com/od/internetglossary/tp/The-Top-Text-Message-Acronym.. 2013. 9. 10.
ftp 설치 : fileZilla 다운로드 설치 닷홈의 무료호스팅http://dothome.co.kr/web/free/index_3.php워드프레스 설치를 선택 http://neofuture.dothome.co.kr/wordpress/wp-admin/ 자신이 원하는 워드프레스 테마를 다운로드 받은 후 /html/wordpress/wp-content/themesftp를 이용해서 위의 디렉토리 themes라는 폴더에 복사해 넣는다. http://www.dessign.net/simple-photo-responsive-theme/오늘 수업시간에 보여줬던 워드프레스 테마 http://api.mobilis.co.kr/webfonts/font_usage.html?fontface=NanumGothicWeb어드민 페이지의 스타일시트 (style.css) 에서 body.. 2012. 11. 13.
[인터렉티브 미디어]이미지 라이트 박스 예제화일 보호되어 있는 글 입니다. 2012. 6. 12.
무료 jQuery 플러그인 : 슬라이드 구글에서 free jQuery plug-in이라고 검색하면 됨 다양한 트렌지션 효과의 무료 슬라이드 플러그인 http://www.pixedelic.com/plugins/camera/ 다양한 무료 플러그인 있는곳 http://www.instantshift.com/2012/03/26/80-useful-jquery-plugins-to-enrich-your-sites-user-experience/ http://codeknows.com/jquery-plugins/useful-jquery-plugins/ 박스형태로 썸네일을 구성하고 썸네일을 누르면 큰 이미지를 볼수 있도록 한것 http://tympanus.net/codrops/2011/10/07/draggable-image-boxes-grid/ Light box .. 2012. 6. 12.
반응형 웹으로 만들어진 워드프레스 포트폴리오용 무료 테마들 반응형 웹으로 만들어진 워드프레스 포트폴리오용 무료 테마들free Responsive WordPress Themes http://www.dessign.net/ 2012. 6. 12.
웹코딩 이미지 포맷 종류 : GIF, JPG, PNG 어떤때 어떤 이미지 포맷 종류를 써야 할까? GIF : 일러같은데서 단순한 색을 이용하여 일러스트를 그린경우비교적 단순한 아이콘, 로고 텍스트를 그림으로 저장할때 JPG:투명한 이미지가 없는 사진같은 화일을 저장할때 쓰임 PNG : 복잡한 이미지, 또는 그림자가 있는 형태의 이미지를 저장할때 알파채널(투명)을 전부 살릴때 이용 => 포토샵에서 PNG 24로 저장. 투명 옵션 체크 2012. 6. 6.
HMTL5 Video Tag Builder 자동으로 video tag 를 생성해주는 빌더 캡션 기능을 넣을 수 있습니다. HMTL5 Video Tag Builderhttp://videojs.com/tag-builder/ 2012. 6. 6.
html 5 베스트 사이트 http://speckyboy.com/2011/12/29/our-50-favorite-web-designs-from-2011/ 2012. 4. 18.
웹을 개발한다면 알아두세요 화성에서 온 개발자, 금성에서 온 기획자 View more presentations from Yongho Ha 2012. 3. 13.
인터렉티브 미디어 디자인1: 워드프레스로 자신의 웹사이트 만들기 http://www.cafe24.com/?controller=product_basic_autoban 카페24에서 설치방법 http://blog.naver.com/PostView.nhn?blogId=s2une&logNo=140152519594 닷홈에서 워드프레스 공짜설치방법 http://dothome.co.kr/web/free/index_3.php http://dothome.co.kr/my/manual/zeroboard/13.php#01 멋진 워드프레스 테마 찾기 google에서 best design wordpress theme 또는 smashing magazine에서 wordpress라고 찾을것 공짜 테마들 http://wp.smashingmagazine.com/2011/07/05/free-wordpre.. 2012. 3. 7.
여자아이의 인생을 사세요. the girl store http://www.the-girl-store.org/ 2012. 3. 6.
생활 코딩 : HTML, CSS, JAVA Script, PHP 등 코딩을 하는데 완전 좋을 사이트를 찾았습니다. 이번 인터렉티브 미디어 수업에 활용할 예정입니다. http://opentutorials.org/course/1 완전 좋습니다. 웹코딩을 체계적으로 배우실수 있는 아주 좋은 기회! 게다가 오픈교육 컨텐츠로 누구나 참여해서 함께 할수 있어서 더 좋은것 같습니다. CCK 살롱 기획단의 메일을 읽다가 발견했습니다. 2012. 2. 26.
2011년도 웹개발자 리소스와 툴 50 http://speckyboy.com/2011/12/14/our-50-favorite-web-developers-resources-and-tools-from-2011/ 웹하고 관련해서는 역시 그리드 시스템을 쉽게 할수 있는 CSS 소스들이 대세 1280 모니터 사이즈를 위한 1140 px CSS Grid 5 http://cssgrid.net/ 다양한 기기에서 구현가능한 프로토타입을 도와주는 Foundation. 다양한 사이즈와 형태의 그리드 구현가능 http://foundation.zurb.com/ 앱 에니메이션을 쉽게 구현해 주는 센차 CSS3 Animator & HTML5 Animations http://www.sencha.com/products/animator/ 2011. 12. 25.
CSS만으로 만드는 모서리가 둥근 버튼 이 박스를 라운드로 보이게 하려면 Firefox, Safari/Chrome, Opera, IE9를 이용하여 보셔야 합니다. http://www.cre8ivecommando.com/how-to-create-css-only-buttons-9243/ 이건 HTML 부분에 들어가는 부분으로 그냥 링크만 거시면 됩니다. I'm a Button! 이부분은 CSS로 head 부분이나 external css 화일에 삽입하시면 됩니다. 2011. 12. 6.
둥근 모서리 텍스트박스 웹사이트에 만들기 http://virtuelvis.com/gallery/css/rounded/ The CSS The top left and top right corners are created using the following CSS rule: .rounded:before { background: transparent url(top-right.png) scroll no-repeat top right; margin-bottom: -20px; height: 30px; display: block; border: none; content: url(top-left.png); padding: 0; line-height: 0.1; font-size: 1px; } The bottom left, and the bottom right c.. 2011. 12. 6.
css로 만든 가로 네비게이션 메뉴바 http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced Home News Contact About 2011. 11. 29.
CSS core 투토리얼 화일 보호되어 있는 글 입니다. 2011. 11. 29.
화일 다운로드 받기 Ex_Files_Adapt_Sites.zip 2011. 11. 29.
어도비 엣지 : Adobe Edge 플래시 대신에 html 5, css, java script를 이용하여 에니메이션과 인터렉션을 만들어주는 툴 간단한 에니메이션에 쓸수 있습니다. http://labs.adobe.com/technologies/edge/ 초보자 가이드 http://www.adobe.com/devnet/edge/articles/guide-to-edge.html 린다닷컴 간단 투토리얼 http://www.lynda.com/Edge-Beta-tutorials/Edge-First-Look/89044-2.html 2011. 11. 29.
html5 : 기초 & 기본 뼈대 보호되어 있는 글 입니다. 2011. 11. 29.
모션 그래픽스 2: 에펙 스탑모션 stop motion 투토리얼 2011. 11. 23.
CSS에서 DIV 중앙정렬 DIV 중앙정렬 완벽 해결법 지금 소개해드리는 코딩은 IE7과 FF2와 Opera9.25와 Safari3.0.4에서 모두 구현됩니다. 지식iN의 어떤 웹 디자이너가 답변한 것을 보고 배웠어요. 우리가 div를 배울 때 div의 스타일을 margin-left:auto; margin-right:auto;로 하거나, 좀 쉽게 하려면 margin:0 auto;로 놓으면 div가 브라우저의 가운데에 놓이게 된다고 배웠습니다. 제로보드 메뉴얼도 그렇고 팁 공유에 올라온 글들에도 그렇게 나오죠? 제 경우엔 IE에서 먹히지 않더군요. 나머지 브라우저들은 다 잘 보이더만. 그래서 찾다가 아래 방법을 찾았어요. 코딩은 직접 했습니다. 내용 html에서 이렇게 하고 여기에 들어가는 css에서 다음과 같이 코딩합니다. 코드를.. 2011. 11. 22.
interative media design 2: 웹표준 코딩 예시 화일 첨부 보호되어 있는 글 입니다. 2011. 11. 22.
웹 표준 코딩 : 모바일 적용 기준 http://sinbd.com/index/hompy/study.php?mid=69&r=view&uid=22625 css이용한 웹표준 코딩의 예. http://ugpapa.tistory.com/176 http://ugpapa.tistory.com/177 http://ugpapa.tistory.com/179 http://ugpapa.tistory.com/180 http://ugpapa.tistory.com/184 여기의 예제를 참고하시면 보다 명확하게 알수 있음 위의 웹표준코딩에 모바일의 값들을 넣어서 적용한 css화일을 첨부하니 참고바랍니다. 2011. 11. 15.
웹 디자인 : 978 & 960 가로사이즈 그리드 적용 최근에는 978 가로 사이즈에 12 칼럼을 적용하는게 가장 인기라고 합니다. http://978.gs/ 다운로드에 가시면 템플릿을 다운로드 받아 이용하실수 있습니다. 960 가로사이즈 그리드 적용 http://960.gs/ 하단에 각 사이트 예제에서 show grid 버튼을 눌러보면 어떻게 그리드를 적용했는지 볼수 있습니다. 소스코드 다운로드 css 화일로 간단하게 본인이 디자인하고자 하는 사이트에 적용가능 http://net.tutsplus.com/articles/news/a-detailed-look-at-the-960-css-framework/ 사용 설명 동영상 2011. 11. 10.
html 5 와 css 를 드림위버 5.5 에서 해보기 동영상 강의 오픈지식강의 v23 드림위버 Dreamweaver CS5.5 활용기-1 ~ HTML5, CSS3, jQuery, Widget Browser from Jungle Communications Co.,Ltd. on Vimeo. 2011. 11. 8.
interactive media design 2: 11/15 과제 wire fame 완성해 오기 wire frame 완성해 올것 http://www.vcarrer.com/2010/06/iphone-grid-system.html 파르소나, 시나리오 스토리보드 완성 못 한사람 완성할것 css div 에 대한 설명 http://www.w3schools.com/css/css_grouping_nesting.asp 네비게이션 바 http://www.w3schools.com/css/css_navbar.asp 2011. 11. 8.
모바일웹 디자인 해상도 A new standard resolution: 240x320. Article Source: http://EzineArticles.com/4150386 http://www.hongkiat.com/blog/mobile-web-design/ 2011. 10. 18.
과거 웹사이트를 볼수 있음 Wayback Machine. 웨이백 머신 다는 아니더라도 어느 정도의 과거 사이트를 볼수 있습니다. http://www.archive.org/web/web.php 자세한 내용은 아래 페이지에서 보시길... :: Take me back - 옛날 홈페이지를 검색해 보자 2011. 9. 8.
SNS 소셜 버튼 달기 http://yoast.com/social-buttons/ 2011. 7. 6.