More Related Content
Similar to SMlab intensive_02
Similar to SMlab intensive_02 (20)
SMlab intensive_02
- 1. 소셜미디어
제작워크숍SMlab
intensive02:HTML-CSS소셜웹페이지구성
정수현(청어람아카데미SNS프로그래머)
SocialJung@gmail.com
http://suelog.tistory.com
http://facebook.com/movenations
twitter@movenations
2011 1 25
- 2. Check!Check!
[1]SMlab회원카페
cafe.daum.net/socialmedialab
[2]티스토리회원받으셨나요?
@movenations로메일주세요!
2011 1 25
- 3. 사회적글쓰기
Social Writing
공적글쓰기(자격,매체,역량)와사적글쓰기(제한없음)의사이
글쓰기의방식은사적이지만,효과는공적인경우
사회적영향력을의식하며수행하는글쓰기
(예)블로그리뷰,시사평론,아고라,디씨인사이드,댓글,참여형매체
2011 1 25
- 4. 소셜미디어제작워크숍목표
#SMLab
소셜미디어전반,트랜드,적용에대한이해
Blog+SNS기반실무적사이트구축
참가자의사업/활동/사역/관심사에시각화작업
구체적인목적을공유하는네트워크구축
WebBasedCommunication문화확산,연결
2011 1 25
- 5. 소셜미디어제작워크숍
Intensive교육과정
1주Web2.0시대,블로그기획안만들기
2주HTML+CSS/소셜웹페이지구성
3주컨텐츠시각화작업(Prezi및인포그라피제작)
4주SocialWebWork(사회적가치/비지니스적용)
5주“확산”(메타블로그/캐스트/홍보+마케팅)
6주Presentation+Networking
클라우드컴퓨팅뉴미디어네트워크(모바일)
2011 1 25
- 6. intensive02
블로그기획나눔
블로그기능/구조/디자인/에디터
웹표준*OH
워크숍“embeddingBlog+SNS”
워크숍“HTML+CSS”
2011 1 25
- 9. 블로거시대!
1.정보를공유
2.일상을기록
3.사람을사귀는만남의장
4.정보수집
5.광고를통한수입창출
6.회사홍보및마케팅도구
7.브랜드확장도구
8.글쓰기및글읽기도구
2011 1 25
- 10. 파워블로거되자,블로그가치UP!
1.유익한정보를올리기
2.꾸준히정보를업데이트하기
3.사진과동영상,미디어많이사용
4.검색에최적화된태그,카피,문구,키워드
5.나만의주제와컨셉강화
6.SNS와연동하기
7.검색엔진에등록하기
8.메타블로그에등록하기
9.지속적인발행(오픈캐스트)
10.댓글과이웃맺기착실하게
2011 1 25
- 12. 가입형블로그
-네이버(http://blog.naver.com)
-다음(http://blog.daum.net)
-구글(http://www.Blogger.com)
-알라딘서재(http://blog.aladin.co.kr)
-유저스토리북(http://userstorybook.net)
-오마이뉴스블로그(http://blueblog.ohmynews.com)
...many!
2011 1 25
- 13. 워드프레스
-설치형(www.wordpress.com)
-가입형(www.wordpress.org)
-다양한템플릿,뛰어난UI와플러그인
-@megamina님의http://www.metabrain.com
-‘Wordpressbesttheme’http://is.gd/qnr5aa
2011 1 25
- 14. 텍스트큐브(테터툴즈)
-설치형(www.textcube.com)
http://www.textcube.org/manual
-현재구글텍스트큐브닷컴통합운영
2011 1 25
- 15. 텀블러
http://www.tumblr.com/themes/
-쉬운가입,포스팅
-뛰어난UI디자인,연결
2011 1 25
- 16. XE
-http://www.xpressengine.com/intro
-설치형블로그+웹사이트
-네이버+제로보드(www.spacegong.com)
*비슷한서비스로는그누보드가있다
http://sir.co.kr/main/gnuboard4/about.php
2011 1 25
- 17. FacebookPage
-FBML을이용한독자적인사이트구축가능
-(예)www.facebook.com/dovekr
2011 1 25
- 18. 티스토리
-다음에서제공하는프리미엄형블로그
-블로그구성/제작자유도가높고안정적
-스킨에디터및백업기능
-티에디션베스트참고http://notice.tistory.com/1525
2011 1 25
- 19. [정수현]의사회적글쓰기
SUElog.tistory.com
2030이슈 관심사
무브먼트 카테고리
미디어를통한 RealTime
일상공유 WEB
2011 1 25
- 20. 2.블로그정보작성
http://scfamily.tistory.com/admin
2011 1 25
- 21. 블로그기초세팅
1.블로그정보입력메인타이틀,프로필,도메인
2.블로그레이아웃이해스킨
3.블로그카테고리및메뉴구성
4.플러그인다양한기능설치
5.사이드바위젯,태그,프로필레이어
5.티에디션시작
6.블로그(에디터/HTML/서식/키워드/플러그인/정보)
7.RSS(http://www.hanrss.com/)
8.트랙백
2011 1 25
- 22. 티스토리레이아웃
(1)스킨고치기
-스킨다운로드새스킨등록적용
(2)스킨위자드로간격/타이틀조정
(3)HTML-CSS이해하기
2011 1 25
- 23. 웹표준이란
-브라우저시장점유전쟁동안서로간의웹브라우저에배타적인기술을
도입하는과정에서똑같은웹페이지가다르게보이고서로에서구현하지
못하는기술로인한혼란
-보편적디자인,보편적접근으로서의웹을위한표준에대한필요
-HTML,CSS,XTML…⋯점점표준화,하지만아직차이상존
-인터넷표준은W3C(http://www.w3c.org)웹표준기구
-웹표준에대한자세한설명http://is.gd/0tDDfj
2011 1 25
- 24. HTML
하이퍼텍스트마크업언어/웹페이지를위한지배적인마크업데이터언어
제목단락목록등과같은본문을위한구조적의미를나타내는것뿐만아니라
링크인용과그밖의항목으로구조적문서를만들수있는방법을제공
이미지와객체를내장하고대화형양식을생성하는데사용
웹페이지콘텐츠안의꺾쇠괄호에둘러싸인태그로되어있는형태로작성
웹브라우저와같은그밖의항목의외관과배치를정의하는
처리장치의행동에영향을주는자바스크립트와본문과
CSS같은스크립트를포함하거나불러올수있다
CSS
CSS(CascadingStyleSheet)는마크업언어가실제표시되는방법을
기술하는언어로,W3C의표준이며,레이아웃과스타일을정의할때의
자유도가높다.HTML에서반복적인작업을줄여준다.
2011 1 25
- 25. HTML이용하기
imgsrc=“이미지주소URL”
ahref=“이동하고싶은페이지URL”클릭/a
center/center가운데정렬
br한줄띄우기
b진하게만들기
div
iframeobjectembed
더자세한기초HTMLhttp://trio.co.kr/autohtml.html
2011 1 25
- 26. 1)Skin.html뼈대
2)Style.css옷입히기
: CSS
http://yongja.tistory.com/13
2011 1 25
- 27. SKIN.html
-
http://ccoma.tistory.com/471
2011 1 25
- 28. Style.css
블로그에표시되는문단및글자에대한여러가지속성을
담고있는파일로Skin.html에서호출해서사용됨
http://is.gd/ROITyo
2011 1 25
- 31. embedding활용
“포함(삽입)하기”
오브젝트코드를HTML형식에서옮기는행위
웹문서를다이나믹하게만들수있다.
2011 1 25
- 32. embedding활용
-객체삽입해서다이나믹한페이지만들기
-웹오피스구현해보기
-티에디션(첫화면)편집하기
2011 1 25
- 33. 웹오피스구현해보기
1.블로그글쓰기(인트로)
2.캘린더입력하기(다음)
3.홍보영상삽입(Youtube)
4.미디어Wall입력(cooliris)
5.지도만들기(다음)
6.회원들의페이지가져오기(트위터)
7.신청공간만들기(구글DOCS)
8.사무실인포메이션(TEXT)
2011 1 25
- 34. 캘린더(일정)입력
1.다음커뮤니케이션‘캘린더’페이지로
2.캘린더를추가하고설정을‘전체공개’로만든다.
3.내보내기탭캘린더선택HTML로내보내기설정
4.웹페이지에맞는캘린더사이즈조정선택후코드복사
5.블로그글쓰기HTML모드에서붙여넣기
예http://bluezine.tistory.com/170
2011 1 25
- 35. 홍보영상삽입
1.Youtube에서영상하나를선택한다(예)청어람아카데미
2.영상아래‘소스코드’클릭복사
3.블로그글쓰기HTML모드로하고붙여넣기
4.원하는사이즈조절(width/height)
2011 1 25
- 36. 미디어Wall입력
1.구글웹앨범(http://picasa.google.com)또는페이스북앨범만들기
2.3Dwall를제공하는http://www.cooliris.com/yoursite/express/builder/에접속
(페이스북혹은구글아이디가있어야한다.)
3.원하는서비스를선택후Custmize하면코드가나온다.
4.복사후원하는페이지에HTML모드에서복사
예http://bluezine.tistory.com/293
2011 1 25
- 37. 지도만들기
1.다음지도(http://local.daum.net)에서주소검색
2.지도오른편탭에서‘Map’클릭하면코드창이뜹니다.
3.복사해서HTML페이지에입력
4.간단하게오시는길표시해주면더욱좋은서비스!
예http://bluezine.tistory.com/notice/176
2011 1 25
- 38. 회원들의페이지가져오기
1.트위터설정프로필웹위젯설정
http://twitter.com/goodies/widgets
2.웹사이트4가지테마(리스트)
3.리스트를선택하면해당리스트글들이올라옴/선택수정
4.블로그페이지에맞게디자인해서코드복사
예http://socialwriting.tistory.com/69
2011 1 25
- 39. 회원들의페이지가져오기
1.트위터설정프로필웹위젯설정
http://twitter.com/goodies/widgets
2.웹사이트4가지테마(리스트)
3.리스트를선택하면해당리스트글들이올라옴/선택수정
4.블로그페이지에맞게디자인해서코드복사
예http://socialwriting.tistory.com/69
2011 1 25
- 40. 신청(여론)공간만들기
1.구글문서(http://docs.google.com)새로만들기양식(FORM)
2.6가지양식스타일중에서선택,양식작성하기
3.포함(Embed)클릭주소복사
4.확인메세지최종입력
5.블로그HTML모드에서사이즈조정해서입력
예http://bluezine.tistory.com/notice/177
2011 1 25
![Check!Check!
[1]SMlab회원카페
cafe.daum.net/socialmedialab
[2]티스토리회원받으셨나요?
@movenations로메일주세요!
2011 1 25](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)