SlideShare a Scribd company logo
1 of 72
교사를위한소셜네트워크
    workshop#05: 블로그+SNS
오늘의키워드
사이트에정보이미지를만들자
VisualSource
외면하 고픈
                               포스팅




읽히는글,직관성의커뮤니케이션
beautiful
blogging .................   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                  (Infor  ledge
               nts                   matio
                                           n)
정보디자인(inforgraphy)

              •Timelines
     Visua    •Flowcharts(순서도)
          l   •Annotatedmaps
              •Graphs
              •Venndiagrams
              •Sizecomparisons
              •Showingfamiliarobjectsor
               similarsizeorvalue



                                   출처: http://www.makeuseof.com
타임라인




       ‘타임라인 인포그라피 모음’
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. 색 배합을 조화롭게 결정하기
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. 본인도메인 설정하기




                                             출처: http://www.makeuseof.com
정보디자인소스검색어
  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 ...
cafe
site blog
HTML
HTML
Hyper Text Markup
Language
http://ko.wikipedia.org/wiki/HTML




하이퍼텍스트마크업언어/웹페이지를위한지배적인마크업데이터언어
제목단락목록등과같은본문을위한구조적의미를나타내는것뿐만아니라
링크인용과그밖의항목으로구조적문서를만들수있는방법을제공
이미지와객체를내장하고대화형양식을생성하는데사용
웹페이지콘텐츠안의꺾쇠괄호에둘러싸인태그로되어있는형태로작성
웹브라우저와같은그밖의항목의외관과배치를정의하는
처리장치의행동에영향을주는자바스크립트와본문과
CSS같은스크립트를포함하거나불러올수있다
HTMLembed코드가져오기예제




     http://www.youtube.com/watch?v=RY9w9HyIAPw
1 캘린더:스케줄공유
    http://bluezine.tistory.com/170
다음캘린더    http://bluezine.tistory.com/170




1. 캘린더 접속 http://calendar.daum.net/top

2. 캘릭더 추가 및 공개설정

3. 내보내기  HTML로 보내기  설정 후 코드 완료
2
     웰앨범3Dwall
    http://bluezine.tistory.com/293
3D느낌의웹앨범만들기



                                                                             http://bluezine.tistory.com/293




1)구글피카사(http://picasaweb.google.com)웹앨범만들기
2)Cooliris3D서비스http://www.cooliris.com/yoursite/express/
3)웹미디어앨범의URL을입력
4)CustomizeHTML코드복사(copy)
3영상올리기
4
         지도(약도)
http://bluezine.tistory.com/372
5 GoogleNote
http://bluezine.tistory.com/379
실무자들을위한구글문서




http://bluezine.tistory.com/360
 1)http://docs.google.com
 2)새문서(createnew)양식(form)
 3)내용입력(7가지툴)
 4)포함하기(embed)복사붙이기
 5)publicweb,share,관리자화면
6
정보력강한웹슬라이드
  http://bluezine.tistory.com/360
7
실시간타임라인,트윗보드
     http://bluezine.tistory.com
트윗위젯 .....트위터게시판만들기




1.트위터에서[프로필][프로필]내웹사이트에트위터넣기선택
직접주소:http://twitter.com/about/resources/widgets
2.사이즈와색상,위젯성향(4개중하나)을선택하고HTML코드받기
3.블로그나웹사이트에서HTML모드로설정하고복사
*적용된예:http://bluezine.tistory.com(해시태그#Chungeoram)
                                                                                                                    SM la b
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’클릭필요한네트워킹정보를입력
      3.정보를입력한후에GetCode하면플러그인코드가나옵니다.
      4.플러그인코드를블로그나HTML게시판에입력하면완료!

                                                                                                                                        SM la b
10페이스북소셜플러그인 .....LikeBox:Face
 




                                                                                      텍스트




   1.소셜플러그인LikeBox페이스북페이지정보입력
   2.ShowFace조정후‘GetCode’하면플러그인코드가나옵니다.
   3.플러그인코드를블로그나HTML게시판에입력하면완료!
   4.멤버십의사이트참여를독려하는데유용합니다!

                                                                                                                                  SM la b
페이스북페이지관리
http://www.facebook.com/pages
banner::
배너만들기
         1.pixlr에서사이즈190px*190px
         2.배경화면,텍스트,선
         3.이미지(.png)/제시어freeicon.png
         4.저장(수정용/고정용)
         5.블로그에업로드및URL복사
         6.사이드바에저장
         7.입력소스
         ahref=”이동하고자하는페이지주소”
         imgsrc=”이미지URL”/a
자료시각화에도움이되는,
storytelling::
Prezi




www.prezi.com
www.scribd.com
Prezi페이지만들기

               1.텍스트입력/resize,rotate,move,zoom
               2.이미지불러오기
               3.동영상불러오기
               4.타임라인만들기
               5.Frame으로구분하기
               6.path설정하기
               7.slideshow
               8.embedding블로그
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/
              http://zootool.com/tools/
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://sharky.tistory.com/6
http://www.wordle.net
기부/결제시스템




https://www.paypal.com
“
    ”
소셜웹파워는
화려한기술이아니라
“따뜻한공감능력”에있다.
                                    SM la b

More Related Content

Viewers also liked

Cròniques de la veritat oculta
Cròniques de la veritat ocultaCròniques de la veritat oculta
Cròniques de la veritat ocultaannacasellas
 
Breuhistoriallenguacatalana 090429110404-phpapp01
Breuhistoriallenguacatalana 090429110404-phpapp01Breuhistoriallenguacatalana 090429110404-phpapp01
Breuhistoriallenguacatalana 090429110404-phpapp01Javier García Jiménez
 
Non c’è mobbing per episodi che evidenziano solo screzi o conflitti interpers...
Non c’è mobbing per episodi che evidenziano solo screzi o conflitti interpers...Non c’è mobbing per episodi che evidenziano solo screzi o conflitti interpers...
Non c’è mobbing per episodi che evidenziano solo screzi o conflitti interpers...Drughe .it
 
果物の樹のお伽話 第3話:ややこしい看板の話
果物の樹のお伽話 第3話:ややこしい看板の話果物の樹のお伽話 第3話:ややこしい看板の話
果物の樹のお伽話 第3話:ややこしい看板の話Yutaka Kachi
 
Dn11 u3 a34_clac
Dn11 u3 a34_clacDn11 u3 a34_clac
Dn11 u3 a34_clacclac250792
 
Localfave presentation
Localfave presentation Localfave presentation
Localfave presentation Aaron Lu
 
Infomació oposicions
Infomació oposicionsInfomació oposicions
Infomació oposicionsDavid Heras
 
20120717mesaredonaVelez
20120717mesaredonaVelez20120717mesaredonaVelez
20120717mesaredonaVelezRamon Barlam
 
Bloc presentació ampa jujol
Bloc   presentació ampa jujolBloc   presentació ampa jujol
Bloc presentació ampa jujolampajujol
 
Prevencion y promocion de la salud
Prevencion y promocion de la saludPrevencion y promocion de la salud
Prevencion y promocion de la salud1228211
 

Viewers also liked (20)

Invitació Marius Serra
Invitació Marius SerraInvitació Marius Serra
Invitació Marius Serra
 
Poweer
PoweerPoweer
Poweer
 
Cròniques de la veritat oculta
Cròniques de la veritat ocultaCròniques de la veritat oculta
Cròniques de la veritat oculta
 
Breuhistoriallenguacatalana 090429110404-phpapp01
Breuhistoriallenguacatalana 090429110404-phpapp01Breuhistoriallenguacatalana 090429110404-phpapp01
Breuhistoriallenguacatalana 090429110404-phpapp01
 
Non c’è mobbing per episodi che evidenziano solo screzi o conflitti interpers...
Non c’è mobbing per episodi che evidenziano solo screzi o conflitti interpers...Non c’è mobbing per episodi che evidenziano solo screzi o conflitti interpers...
Non c’è mobbing per episodi che evidenziano solo screzi o conflitti interpers...
 
Prova medi
Prova mediProva medi
Prova medi
 
果物の樹のお伽話 第3話:ややこしい看板の話
果物の樹のお伽話 第3話:ややこしい看板の話果物の樹のお伽話 第3話:ややこしい看板の話
果物の樹のお伽話 第3話:ややこしい看板の話
 
[9.23] 베가스 교육
[9.23] 베가스 교육[9.23] 베가스 교육
[9.23] 베가스 교육
 
Dn11 u3 a34_clac
Dn11 u3 a34_clacDn11 u3 a34_clac
Dn11 u3 a34_clac
 
Localfave presentation
Localfave presentation Localfave presentation
Localfave presentation
 
Infomació oposicions
Infomació oposicionsInfomació oposicions
Infomació oposicions
 
Portfolio
PortfolioPortfolio
Portfolio
 
20120717mesaredonaVelez
20120717mesaredonaVelez20120717mesaredonaVelez
20120717mesaredonaVelez
 
Kb hmm
Kb hmmKb hmm
Kb hmm
 
E2festa[final]
E2festa[final]E2festa[final]
E2festa[final]
 
Diada Sant Jordi
Diada Sant JordiDiada Sant Jordi
Diada Sant Jordi
 
Taller lectura
Taller lecturaTaller lectura
Taller lectura
 
Massada 22
Massada 22Massada 22
Massada 22
 
Bloc presentació ampa jujol
Bloc   presentació ampa jujolBloc   presentació ampa jujol
Bloc presentació ampa jujol
 
Prevencion y promocion de la salud
Prevencion y promocion de la saludPrevencion y promocion de la salud
Prevencion y promocion de la salud
 

Similar to 좋은교사운동 워크숍05 sn_son_blog

실무가를 위한 Sns 커뮤니케이션 시각화
실무가를 위한 Sns 커뮤니케이션 시각화실무가를 위한 Sns 커뮤니케이션 시각화
실무가를 위한 Sns 커뮤니케이션 시각화Sue Hyun Jung
 
2020년 6월 6일 개발 이야기 정리
2020년 6월 6일 개발 이야기 정리2020년 6월 6일 개발 이야기 정리
2020년 6월 6일 개발 이야기 정리Jay Park
 
웹2.0활용(신안중연수자료)
웹2.0활용(신안중연수자료)웹2.0활용(신안중연수자료)
웹2.0활용(신안중연수자료)Young-ae Yoon
 
Lost smart tag 소개
Lost smart tag 소개Lost smart tag 소개
Lost smart tag 소개ssuser9f76db
 
Smart worker +blog
Smart worker +blogSmart worker +blog
Smart worker +blog해성 지
 
오픈소스따라하기
오픈소스따라하기오픈소스따라하기
오픈소스따라하기병대 손
 
웹에이전시 투비스토리 회사소개서
웹에이전시 투비스토리 회사소개서웹에이전시 투비스토리 회사소개서
웹에이전시 투비스토리 회사소개서진보 심
 
190413 스타트업에서 마크업 개발자로 살아남기 - 오혜진 발표
190413 스타트업에서 마크업 개발자로 살아남기 - 오혜진 발표190413 스타트업에서 마크업 개발자로 살아남기 - 오혜진 발표
190413 스타트업에서 마크업 개발자로 살아남기 - 오혜진 발표Hyejin Oh
 
Let'Swift 2023 Swift Macro, 어디다 쓰죠?
Let'Swift 2023 Swift Macro, 어디다 쓰죠?Let'Swift 2023 Swift Macro, 어디다 쓰죠?
Let'Swift 2023 Swift Macro, 어디다 쓰죠?williciousk
 
반응형 웹 디자인
반응형 웹 디자인반응형 웹 디자인
반응형 웹 디자인준극 김
 
요즘 유행하는 AI 나도 해보자 (feat. CoreML)
요즘 유행하는 AI 나도 해보자 (feat. CoreML)요즘 유행하는 AI 나도 해보자 (feat. CoreML)
요즘 유행하는 AI 나도 해보자 (feat. CoreML)Chiwon Song
 
소셜홈 만들기 (2)
소셜홈 만들기 (2)소셜홈 만들기 (2)
소셜홈 만들기 (2)SNS4U
 
크롬으로 시작하기
크롬으로 시작하기  크롬으로 시작하기
크롬으로 시작하기 aropa ms
 
크롬으로 시작하기 사지연
크롬으로 시작하기  사지연크롬으로 시작하기  사지연
크롬으로 시작하기 사지연aropa ms
 
정해균 포트폴리오
정해균 포트폴리오정해균 포트폴리오
정해균 포트폴리오Haegyun Jung
 

Similar to 좋은교사운동 워크숍05 sn_son_blog (20)

실무가를 위한 Sns 커뮤니케이션 시각화
실무가를 위한 Sns 커뮤니케이션 시각화실무가를 위한 Sns 커뮤니케이션 시각화
실무가를 위한 Sns 커뮤니케이션 시각화
 
Portfolio
PortfolioPortfolio
Portfolio
 
B-slide final
B-slide finalB-slide final
B-slide final
 
2020년 6월 6일 개발 이야기 정리
2020년 6월 6일 개발 이야기 정리2020년 6월 6일 개발 이야기 정리
2020년 6월 6일 개발 이야기 정리
 
웹2.0활용(신안중연수자료)
웹2.0활용(신안중연수자료)웹2.0활용(신안중연수자료)
웹2.0활용(신안중연수자료)
 
Lost smart tag 소개
Lost smart tag 소개Lost smart tag 소개
Lost smart tag 소개
 
Smart worker +blog
Smart worker +blogSmart worker +blog
Smart worker +blog
 
오픈소스따라하기
오픈소스따라하기오픈소스따라하기
오픈소스따라하기
 
웹에이전시 투비스토리 회사소개서
웹에이전시 투비스토리 회사소개서웹에이전시 투비스토리 회사소개서
웹에이전시 투비스토리 회사소개서
 
190413 스타트업에서 마크업 개발자로 살아남기 - 오혜진 발표
190413 스타트업에서 마크업 개발자로 살아남기 - 오혜진 발표190413 스타트업에서 마크업 개발자로 살아남기 - 오혜진 발표
190413 스타트업에서 마크업 개발자로 살아남기 - 오혜진 발표
 
Dubuplus guide
Dubuplus guideDubuplus guide
Dubuplus guide
 
Sm lab intensive_03
Sm lab intensive_03Sm lab intensive_03
Sm lab intensive_03
 
Let'Swift 2023 Swift Macro, 어디다 쓰죠?
Let'Swift 2023 Swift Macro, 어디다 쓰죠?Let'Swift 2023 Swift Macro, 어디다 쓰죠?
Let'Swift 2023 Swift Macro, 어디다 쓰죠?
 
반응형 웹 디자인
반응형 웹 디자인반응형 웹 디자인
반응형 웹 디자인
 
요즘 유행하는 AI 나도 해보자 (feat. CoreML)
요즘 유행하는 AI 나도 해보자 (feat. CoreML)요즘 유행하는 AI 나도 해보자 (feat. CoreML)
요즘 유행하는 AI 나도 해보자 (feat. CoreML)
 
Youractionup1
Youractionup1Youractionup1
Youractionup1
 
소셜홈 만들기 (2)
소셜홈 만들기 (2)소셜홈 만들기 (2)
소셜홈 만들기 (2)
 
크롬으로 시작하기
크롬으로 시작하기  크롬으로 시작하기
크롬으로 시작하기
 
크롬으로 시작하기 사지연
크롬으로 시작하기  사지연크롬으로 시작하기  사지연
크롬으로 시작하기 사지연
 
정해균 포트폴리오
정해균 포트폴리오정해균 포트폴리오
정해균 포트폴리오
 

좋은교사운동 워크숍05 sn_son_blog