1. 소셜미디어
제작워크숍SMlab
Intensive04:컨텐츠시각화작업
정수현(청어람아카데미SNS프로그래머)
SocialJung@gmail.com
http://suelog.tistory.com
http://facebook.com/movenations
twitter@movenations
2011 2 15

2. 지난주에이어
-페이스북플러그인
-게시판iframe코드삽입
2011 2 15

3. FacebookSocialPlugin
1.http://developers.facebook.com/docs/plugins
2.ActivityFeed
3.LikeButton/Box
2011 2 15

4. 블로그에게시판달기
1.게시판계정이있어야한다.(URL제공필수)
2.무료게시판우뜨보드http://wo.to
3.iframe적용(URL바꿔서복사)Cafe게시판
4.예/http://bluezine.tistory.com/186
2011 2 15

5. WebbasedMindmap
http://www.lifehack.org/articles/technology/11-free-mind-mapping-applications-web-services.html
2011 2 15

6. SMlab협업
http://www.mindomo.com/edit.htm?m=45dab836a18f42d9b01339178d932d1a
2011 2 15

7. 소셜미디어제작워크숍
Basic교육과정
1주Web2.0Activate,SNS사회적가치,TGIF세팅
2주SNS사회적관계망(유대)만들기,블로그세팅
4주컨텐츠시각화작업(Prezi및인포그라피제작)
3주정보의효과적전달(HTML/에디터사용)
5주“확산”(메타블로그/캐스트/홍보+마케팅)
6주Presentation+Networking
파워블로거가된다는것은?
2011 2 15

8. 오늘의키워드
정보를효과적으로전달하고
컨텐츠를유려하게표현할
웹기반인포그라피만들기
2011 2 15

9. 디자이너는아니지만
컨텐츠를유려하게,
1)웹기반으로인포그라피를제작하기
2)웹기반으로멀티페이지를제작하기
2011 2 15

10. 워크숍
1.Prezi제작하고블로그본문에삽입하기
2.티에디션첫화면기획/구성
3.Wix웹페이지만들어보기
4.마인드맵자료공유하기
5.컨텐츠시각화하는나의인포그라피만들어보기
2011 2 15

11. 웹기반인포그라피
2011 2 15

12. infography
2011 2 15

13. 2011 2 15

14. 2011 2 15

15. 2011 2 15

16. 2011 2 15

17. 2011 2 15

18. 2011 2 15

19. 2011 2 15

20. 2011 2 15

21. 2011 2 15

22. 2011 2 15

23. 정보디자인(inforgraphy)
Visua
l
Know
Conte (Infor ledge
nts matio
n)
2011 2 15

24. 정보디자인(inforgraphy)
•Timelines
Visua •Flowcharts(순서도)
l •Annotatedmaps
•Graphs
•Venndiagrams
•Sizecomparisons
•Showingfamiliarobjectsor
similarsizeorvalue
2011 2 15

25. 타임라인
‘ ’
2011 2 15

26. FlowChart(순서도)
2011 2 15

27. AnnotatedMap
annotated map
2011 2 15

28. 그래프(graph)
2011 2 15

29. Venndiagrams
V.D
2011 2 15

30. SizeComparison
S.C
2011 2 15

31. 정보디자인유의사항
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 are
relevant.
Remember that it’s all about quickly conveying the meaning behind
complex data.
Draw conclusions. .
Reference your facts in the infography. .
Include your URL so people can be sure who made it.
2011 2 15

32. 정보디자인소스검색어
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 ...
2011 2 15

33. 블로그포스팅
스토리텔링의중요성
“읽히는글!”
2011 2 15

34. beautiful
blogging ................. http://bloggertip.com/category/Blog/Look
2011 2 15

35. web-presentation
2011 2 15

36. Web-Presentation
www.slideshare.com
www.scribd.com
http://www.wiziq.com
2011 2 15

37. Prezi
HappyZooming!
www.prezi.com
http://www.facebook.com/pezKor
2011 2 15

38. Prezi페이지만들기
1.Prezi제작
2.embed코드복사
3.블로그HTML모드에서삽입
2011 2 15

39. Prezi페이지만들기
1.텍스트입력/resize,rotate,move,zoom
2.이미지불러오기
3.동영상불러오기
4.타임라인만들기
5.Frame으로구분하기
6.path설정하기
7.slideshow
8.embedding블로그
2011 2 15

40. web-imageeditor
2011 2 15

41. 이미지에디터
웹기반에서포토샵기능을구현하는이미지에디터
http://www.pixlr.com
2011 2 15

42. 이미지에디터s
http://www.splashup.com/splashup/ http://www.sumopaint.com/app/
http://www.aviary.com/tools/Phoenix http://www.photoshop.com/tools
http://pixenate.com/
2011 2 15

43. 네이버포토에디터
이미지보정및편집
http://s.lab.naver.com/pe/
2011 2 15

44. 포토에디터s
http://www.lunapic.com/editor/
http://fotoflexer.com/
http://pixer.us/
http://www.picnik.com/
http://www.splashup.com/
http://www.picture2life.com/
http://www.flauntr.com/
http://www.phixr.com/
http://www.improveyourimages.com/
2011 2 15

45. 배너만들기
1.pixlr에서사이즈200px*200px
2.배경화면,텍스트,선
3.이미지
4.저장
5.블로그에업로드및URL복사
6.사이드바에저장
7.입력소스
ahref=”이동하고자하는페이지주소”
imgsrc=”이미지URL”/a
2011 2 15

46. web-mediaeditor
2011 2 15

47. 웹기반동영상편집에디터
http://www.hongkiat.com/blog/video-editing-30-free-
tools-and-web-services-to-get-things-done/
2011 2 15

48. YouTubeVideoEditor
http://www.youtube.com
2011 2 15

49. Vimeo:Peopleconnectingthroughvideo.
http://www.vimeo.com
2011 2 15

50. web-flasheditor
http://www.flashvortex.com/
2011 2 15

51. font
2011 2 15

52. Font
2011 2 15

53. 티에디션
2011 2 15

54. 2011 2 15

55. 웹기반멀티페이지
2011 2 15

56. 웹기반멀티페이지
1.웹기반TOOL로이미지,동영상,플래시편집
2.BasicMash-Up
3.웹기반SiteBuilder활용하기
2011 2 15

57. 웹기반SiteBuilder
1.Wix
http://www.wix.com
2.CABANOVA
http://sitebuilder.cabanova.com/
3.OMNISTARETOOLS
http://www.omnistaretools.com/free-templates
2011 2 15

58. 웹기반SiteBuilder
(예)MarxinSoho
http://wix.com/suehyun/marxinsoho
2011 2 15

59. http://www.wordle.net
2011 2 15

60. 다음주‘설치형블로그:워드프레스’
1.무료서버호스팅
2.FTP설치
3.http://cafe.daum.net/socialmedialab/9mOk/23
2011 2 15