1강 (4/25) 사회적기업에 적용할 수 있는 온라인 커뮤니케이션 전략
SMLab_온라인커뮤니케이션1강 by Sue Hyun Jung
Workshop
- 속도가 빠른 인터넷 브라우저 : 구글 크롬 설치 (www.google.com/chrome)
- SNS 대표선수 가입 확인 : 구글 > 페이스북 > 트위터
- 네트워킹 노트에 정보입력 : 네트워킹 노트 여기
- 마이피플 어플 설치 및 가입
2강 (5/2) 온라인 아이덴디티 구축
< 블로그 5가지 컨셉 >
1) 대중이 끌리는 소재에 집중/집중/집중 - 라라윈 서른 살의 철학자
2) 정보력으로 승부하는 - 디자인로그
3) 팀워크로 매거진/웹진 - 고함20
4) 서비스 스토리텔링 - 블루미
5) 포트폴리오와 아카이브 스타일 - 고양이를 부탁해
Workshop
1) 티스토리 가입
2) 문의 https://www.facebook.com/groups/smlabplus
3강 (5/10) 컨텐츠를 활성화하는 7가지 방법
좋은 웹사이트의 유형들 미리 만나기 (Wordpress) http://themeforest.net/
5강 (5/23) 다양한 기능을 갖춘 블로그형 홈페이지 만들기
(1) 캘린더 (Daum)
- 다음 캘린더 시작하기
- 캘린더 일정 입력하기
- 캘린더 공개로 만들기
- 캘린더 내보내기 (HTML EMBED)
- 블로그에 캘린더 페이지 만들기
- 캘린더 URL을 메뉴 (Header)에 넣기
[적용화면] http://itprobono.tistory.com/35
[다음 캘린더] http://calendar.daum.net/top
(2) 슬라이드 쉐어
- 전 세계의 훌륭한 슬라이드가 모여있는 사이트 구경하기
- 가져오고 싶은 슬라이드 선택
- Embed를 통해 코드 가져오기
[적용화면] http://www.spacenoah.net/?page_id=1149
[슬라이드 쉐어] http://www.slideshare.net
* 유사한 서비스
E-Book 형으로 매거진 PDF를 가져올 수 있는 ISSUU
* 창조적인 슬라이드 화면 구성
(3) 설문 / 신청 / 여론 조사
* http://drive.google.com >> 구글 특집에서!
(4) 스트리트뷰 약도 가져오기
(5) 스마트워크 - 에버노트 프로그램 설치
7강 (6/13) 티스토리를 보다 멋있게! (레이아웃, 배너, 티에디션)
#1 티에디션 첫 화면 꾸미기
- 아이템, 글선택, 디자인 화면 이해하기
- HTML 으로 콘텐츠 넣기
#2 배너 만들기
- 온라인 포토샵 Pixlr (http://www.pixlr.com)
<a href="http://www.daum.net" target="_blank">
<img src="이미지 URL" width="240">
</a>
- 이미지맵핑 >> 복합 배너 만들기 http://maschek.hu
[화면]
[코딩의 예]
<map id="imgmap2013612173425" name="imgmap2013612173425"><area shape="rect" alt="다음 홈페이지" title="" coords="48,65,301,240" href="http://www.daum.net" target="_self"><area shape="rect" alt="네이버 " title="" coords="327,66,447,144" href="http://www.naver.com" target="_blank"><area shape="rect" alt="SMLab" title="" coords="327,159,446,237" href="http://smlab.org/108" target="_top"><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
<img src="https://t1.daumcdn.net/cfile/tistory/0275403751AE821A05" usemap="#imgmap2013612173425">
#3 레이아웃 (Header / Footer)
* 적용화면 보기
http://itprobonomore.tistory.com/
* HTML/ CSS https://docs.google.com/document/d/1WcJjEIhoImzMrzUGFrhH4uR95Y7vMQ5T2doKyfDITVQ/edit?usp=sharing
9강
* moving
<head> 밑에
<script type="text/javascript" src="http://noworry21.godohosting.com/test/moving.js"></script>
<body> 밑에
CSS파트에서
#moving{position:absolute;top:214px;left:50%;margin:0 0 0 493px;}
9강 (7/4) 매력있게 스토리텔링 - Prezi
