Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
교사를위한소셜네트워크    workshop#05: 블로그+SNS
오늘의키워드사이트에정보이미지를만들자
VisualSource
외면하 고픈                               포스팅읽히는글,직관성의커뮤니케이션
beautifulblogging .................   http://bloggertip.com/category/Blog/Look
infography
http://www.acumenfund.org
http://www.flickr.com/photos/goodmagazine/       sets/72157618896371005/detail/
정보디자인(inforgraphy)                     Visua                          l                                Know       Conte   ...
정보디자인(inforgraphy)              •Timelines     Visua    •Flowcharts(순서도)          l   •Annotatedmaps              •Graphs ...
타임라인       ‘타임라인 인포그라피 모음’
FlowChart(순서도)   순서도 인포그라피 모음
AnnotatedMap                       annotated map 인포그라피 모음
그래프(graph)             그래프 인포그라피 모음
Venndiagrams                       V.D 인포그라피 모음
SizeComparison                         S.C 인포그라피 모음
정보디자인유의사항Keep it simple! Don’t try to do too much in one picture.심플하게 만들고, 한 화면에 너무 많이 담으려말기Decide on a color scheme. 색 배합...
정보디자인소스검색어  free icons / 3D icons• texture / line art / circles• typography, alphabet• .png .jpeg .gif .bmp• patterns, bru...
cafesite blog
HTML
HTMLHyper Text MarkupLanguagehttp://ko.wikipedia.org/wiki/HTML하이퍼텍스트마크업언어/웹페이지를위한지배적인마크업데이터언어제목단락목록등과같은본문을위한구조적의미를나타내는것뿐만아...
HTMLembed코드가져오기예제     http://www.youtube.com/watch?v=RY9w9HyIAPw
1 캘린더:스케줄공유    http://bluezine.tistory.com/170
다음캘린더    http://bluezine.tistory.com/1701. 캘린더 접속 http://calendar.daum.net/top2. 캘릭더 추가 및 공개설정3. 내보내기  HTML로 보내기  설정 후 코드 완료
2     웰앨범3Dwall    http://bluezine.tistory.com/293
3D느낌의웹앨범만들기                                                                             http://bluezine.tistory.com/2931)구...
3영상올리기
4         지도(약도)http://bluezine.tistory.com/372
5 GoogleNotehttp://bluezine.tistory.com/379
실무자들을위한구글문서http://bluezine.tistory.com/360 1)http://docs.google.com 2)새문서(createnew)양식(form) 3)내용입력(7가지툴) 4)포함하기(embed)복사붙...
6정보력강한웹슬라이드  http://bluezine.tistory.com/360
7실시간타임라인,트윗보드     http://bluezine.tistory.com
트윗위젯 .....트위터게시판만들기1.트위터에서[프로필][프로필]내웹사이트에트위터넣기선택직접주소:http://twitter.com/about/resources/widgets2.사이즈와색상,위젯성향(4개중하나)을선택하고H...
8   위젯만들기위자드팩토리http://wzdfactory.com/maker/intro다음위젯(마이피플)http://widgetbank.daum.net/widget/view/966
통합형메신저위젯,마이피플       http://www.bluelogmedia.kr
9토론,아이디어나눔소셜댓글      http://bluezine.tistory.com/383
페이스북소셜플러그인.....소셜댓글      1.페이스북개발자소셜플러그인(http://developers.facebook.com/docs/reference/plugins)      2.소셜댓글은‘comments’클릭필요...
10페이스북소셜플러그인 .....LikeBox:Face                                                                                       텍스트  ...
페이스북페이지관리http://www.facebook.com/pages
banner::
배너만들기         1.pixlr에서사이즈190px*190px         2.배경화면,텍스트,선         3.이미지(.png)/제시어freeicon.png         4.저장(수정용/고정용)      ...
자료시각화에도움이되는,
storytelling::
Preziwww.prezi.comwww.scribd.com
Prezi페이지만들기               1.텍스트입력/resize,rotate,move,zoom               2.이미지불러오기               3.동영상불러오기               4....
web application ::
1 커뮤니티히스토리시각화   http://www.memolane.com/socialjung
2    동시협업Linoit      http://linoit.com
3    멀티하게브레인스토밍       http://spiderscribe.net   (beta)        http://mind42.com
4    클리핑:정보경영첫걸음                                          항목별 자료수집         http://zootool.com/home/quicktour/             ...
5    소셜하게인맥관리    http://www.mywho.com/
5   소셜북마크아이템        http://myfav.es/
웹으로디자인툴다루기http://pixlr.com/   http://photoscape.co.kr
네이버포토에디터이미지보정및편집                             http://s.lab.naver.com/pe/
차트만들기          http://webchart.top.to/
Font
무료폰트http://www.fontclub.co.kr/Community/       FreeFonts.asp?subtype=01일반폰트(.ttf)를웹폰트(.eot)로http://dopus.tistory.com/114티스...
http://www.wordle.net
기부/결제시스템https://www.paypal.com
“    ”
소셜웹파워는화려한기술이아니라“따뜻한공감능력”에있다.                                    SM la b
좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blog
Upcoming SlideShare
Loading in …5
×

좋은교사운동 워크숍05 sn_son_blog

584 views

Published on

  • Be the first to comment

  • Be the first to like this

좋은교사운동 워크숍05 sn_son_blog

  1. 1. 교사를위한소셜네트워크 workshop#05: 블로그+SNS
  2. 2. 오늘의키워드사이트에정보이미지를만들자
  3. 3. VisualSource
  4. 4. 외면하 고픈 포스팅읽히는글,직관성의커뮤니케이션
  5. 5. beautifulblogging ................. http://bloggertip.com/category/Blog/Look
  6. 6. infography
  7. 7. http://www.acumenfund.org
  8. 8. http://www.flickr.com/photos/goodmagazine/ sets/72157618896371005/detail/
  9. 9. 정보디자인(inforgraphy) Visua l Know Conte (Infor ledge nts matio n)
  10. 10. 정보디자인(inforgraphy) •Timelines Visua •Flowcharts(순서도) l •Annotatedmaps •Graphs •Venndiagrams •Sizecomparisons •Showingfamiliarobjectsor similarsizeorvalue 출처: http://www.makeuseof.com
  11. 11. 타임라인 ‘타임라인 인포그라피 모음’
  12. 12. FlowChart(순서도) 순서도 인포그라피 모음
  13. 13. AnnotatedMap annotated map 인포그라피 모음
  14. 14. 그래프(graph) 그래프 인포그라피 모음
  15. 15. Venndiagrams V.D 인포그라피 모음
  16. 16. SizeComparison S.C 인포그라피 모음
  17. 17. 정보디자인유의사항Keep it simple! Don’t try to do too much in one picture.심플하게 만들고, 한 화면에 너무 많이 담으려말기Decide on a color scheme. 색 배합을 조화롭게 결정하기Research some great facts and statistics. 사실, 통계자료 활용하기Think of it as a visual essay: ensure your arguments hold and arerelevant. 상관성있게 의견을 시각화하기Remember that it’s all about quickly conveying the meaning behindcomplex data. 복잡한 정보의 의미를 빠르게 전달할 수 있어야 한다Draw conclusions. 결론을 도출할 것.Reference your facts in the infography. 출처를 표기하기.Include your URL so people can be sure who made it. 본인도메인 설정하기 출처: http://www.makeuseof.com
  18. 18. 정보디자인소스검색어 free icons / 3D icons• texture / line art / circles• typography, alphabet• .png .jpeg .gif .bmp• patterns, brush, grid design• Sketch, drawing, light and shade• 관련 tag 모아놓기 social media, web2.0, communication, blue ...
  19. 19. cafesite blog
  20. 20. HTML
  21. 21. HTMLHyper Text MarkupLanguagehttp://ko.wikipedia.org/wiki/HTML하이퍼텍스트마크업언어/웹페이지를위한지배적인마크업데이터언어제목단락목록등과같은본문을위한구조적의미를나타내는것뿐만아니라링크인용과그밖의항목으로구조적문서를만들수있는방법을제공이미지와객체를내장하고대화형양식을생성하는데사용웹페이지콘텐츠안의꺾쇠괄호에둘러싸인태그로되어있는형태로작성웹브라우저와같은그밖의항목의외관과배치를정의하는처리장치의행동에영향을주는자바스크립트와본문과CSS같은스크립트를포함하거나불러올수있다
  22. 22. HTMLembed코드가져오기예제 http://www.youtube.com/watch?v=RY9w9HyIAPw
  23. 23. 1 캘린더:스케줄공유 http://bluezine.tistory.com/170
  24. 24. 다음캘린더 http://bluezine.tistory.com/1701. 캘린더 접속 http://calendar.daum.net/top2. 캘릭더 추가 및 공개설정3. 내보내기 HTML로 보내기 설정 후 코드 완료
  25. 25. 2 웰앨범3Dwall http://bluezine.tistory.com/293
  26. 26. 3D느낌의웹앨범만들기 http://bluezine.tistory.com/2931)구글피카사(http://picasaweb.google.com)웹앨범만들기2)Cooliris3D서비스http://www.cooliris.com/yoursite/express/3)웹미디어앨범의URL을입력4)CustomizeHTML코드복사(copy)
  27. 27. 3영상올리기
  28. 28. 4 지도(약도)http://bluezine.tistory.com/372
  29. 29. 5 GoogleNotehttp://bluezine.tistory.com/379
  30. 30. 실무자들을위한구글문서http://bluezine.tistory.com/360 1)http://docs.google.com 2)새문서(createnew)양식(form) 3)내용입력(7가지툴) 4)포함하기(embed)복사붙이기 5)publicweb,share,관리자화면
  31. 31. 6정보력강한웹슬라이드 http://bluezine.tistory.com/360
  32. 32. 7실시간타임라인,트윗보드 http://bluezine.tistory.com
  33. 33. 트윗위젯 .....트위터게시판만들기1.트위터에서[프로필][프로필]내웹사이트에트위터넣기선택직접주소:http://twitter.com/about/resources/widgets2.사이즈와색상,위젯성향(4개중하나)을선택하고HTML코드받기3.블로그나웹사이트에서HTML모드로설정하고복사*적용된예:http://bluezine.tistory.com(해시태그#Chungeoram) SM la b
  34. 34. 8 위젯만들기위자드팩토리http://wzdfactory.com/maker/intro다음위젯(마이피플)http://widgetbank.daum.net/widget/view/966
  35. 35. 통합형메신저위젯,마이피플 http://www.bluelogmedia.kr
  36. 36. 9토론,아이디어나눔소셜댓글 http://bluezine.tistory.com/383
  37. 37. 페이스북소셜플러그인.....소셜댓글 1.페이스북개발자소셜플러그인(http://developers.facebook.com/docs/reference/plugins) 2.소셜댓글은‘comments’클릭필요한네트워킹정보를입력 3.정보를입력한후에GetCode하면플러그인코드가나옵니다. 4.플러그인코드를블로그나HTML게시판에입력하면완료! SM la b
  38. 38. 10페이스북소셜플러그인 .....LikeBox:Face 텍스트 1.소셜플러그인LikeBox페이스북페이지정보입력 2.ShowFace조정후‘GetCode’하면플러그인코드가나옵니다. 3.플러그인코드를블로그나HTML게시판에입력하면완료! 4.멤버십의사이트참여를독려하는데유용합니다! SM la b
  39. 39. 페이스북페이지관리http://www.facebook.com/pages
  40. 40. banner::
  41. 41. 배너만들기 1.pixlr에서사이즈190px*190px 2.배경화면,텍스트,선 3.이미지(.png)/제시어freeicon.png 4.저장(수정용/고정용) 5.블로그에업로드및URL복사 6.사이드바에저장 7.입력소스 ahref=”이동하고자하는페이지주소” imgsrc=”이미지URL”/a
  42. 42. 자료시각화에도움이되는,
  43. 43. storytelling::
  44. 44. Preziwww.prezi.comwww.scribd.com
  45. 45. Prezi페이지만들기 1.텍스트입력/resize,rotate,move,zoom 2.이미지불러오기 3.동영상불러오기 4.타임라인만들기 5.Frame으로구분하기 6.path설정하기 7.slideshow 8.embedding블로그
  46. 46. web application ::
  47. 47. 1 커뮤니티히스토리시각화 http://www.memolane.com/socialjung
  48. 48. 2 동시협업Linoit http://linoit.com
  49. 49. 3 멀티하게브레인스토밍 http://spiderscribe.net (beta) http://mind42.com
  50. 50. 4 클리핑:정보경영첫걸음 항목별 자료수집 http://zootool.com/home/quicktour/ http://zootool.com/tools/
  51. 51. 5 소셜하게인맥관리 http://www.mywho.com/
  52. 52. 5 소셜북마크아이템 http://myfav.es/
  53. 53. 웹으로디자인툴다루기http://pixlr.com/ http://photoscape.co.kr
  54. 54. 네이버포토에디터이미지보정및편집 http://s.lab.naver.com/pe/
  55. 55. 차트만들기 http://webchart.top.to/
  56. 56. Font
  57. 57. 무료폰트http://www.fontclub.co.kr/Community/ FreeFonts.asp?subtype=01일반폰트(.ttf)를웹폰트(.eot)로http://dopus.tistory.com/114티스토리에웹폰트설치하기http://sharky.tistory.com/6
  58. 58. http://www.wordle.net
  59. 59. 기부/결제시스템https://www.paypal.com
  60. 60. “ ”
  61. 61. 소셜웹파워는화려한기술이아니라“따뜻한공감능력”에있다. SM la b

×