Gmail 마크다운

78 Tools for Writing and Previewing Markdown. 간단리뷰

1번으로 나와있는 http://markable.in 를 써보니 StackEdit가 Dropbox, Google Drive 싱크지원되어 사용성이 더 나음.

2번  http://markdown-here.com 는 Gmail 에서 마크다운문법으로 작성하고 마우스 우클릭후 실행하면 본문내용이 서식적용된 디자인으로 변경되는 웹브라우저 익스텐션(크롬,파이어폭스,사파리 전부있음)

모바일, 윈도우, 맥, 브라우저등 다양한 마크다운 관련된 글쓰기 도구들을 모아놔서 클립.

😐 정작 StackEdit 와 HarooPad가 안보임.

Timeline JS 사용법

타임라인 인터페이스 기반 History(이력) 만드는 방법

작성순서

  1. 구글스프레드 시트 양식(하단 이미지 참조)에 Data를 입력한다.
  2. Data가 입력된 구글 문서를 Publishing 한다.
  3. 발행된 문서의 링크를 Timeline JS 웹사이트(http://timeline.knightlab.com)에 있는 Box에 입력하면 Html로 입력할 수 있는 iframe Code가 생성된다.
  4. 설명이 부족하다면 :  재미있게 살자 :: Timeline 참쉬운 사용법~.
Data 입력양식
Data 입력양식

참고사항

  1. Start Date, Headline 은 필수입력 그외 나머지 열 입력은 옵션
  2. Media로 Link 가능한 서비스들 :  youtube, vimeo, soundcloud, dailymotion, instagram, twit pic, twitter status, google plus status, wikipedia, or an image
  3. Thumnail 은 32px 이하
  4. Type: era 는 중분류등으로 구분할때 사용(Headline 밖에 안나옴)
  5. Tag는 6개까지만 인식가능
Data 별 보여지는 View 위치 (출처: CO-UP – 하단링크참조)

부가설명

  • Text : 내용의 역할을 합니다. (옵션)
  • Media : 이미지,동영상,지도의 주소를 넣어줍니다. (옵션)
  • Media Credit : 미디어 출처를 적어줍니다.  (옵션)
  • Media Caption : 미디어에 설명글을 적어주는 칸입니다. (옵션)
  • Media Thumbnail : 32px x 32px 보닥 작은 이미지를 업로드 (옵션)
  • Type : 어떤 슬라이드가 타이틀이 될 지 정합니다. title라고 적어주세요 (옵션)
  • Tag : 카테고리 역할을 하고 6개 까지 분류를 할 수 있고 그 이상은 안나온데요. (옵션)
  • via 나도 타임라인 인터페이스를 만들수 있다. | CO-UP/Share.

😐 ifttt 와 같이 사용하면 상당히 다양하게 응용될수 있겠다.

글 루틴

마크다운을 익히고 나서 글쓰는 방식이 조금 달라졌다. 그에 대한 기록.

  1. Write: StackEdit에서 글을 작성한다. Google+ 사진과 연동성이 좋아서 화면캡춰후 업로드하고 나중에 필요한 사진을 찾아서 붙이기가 쉽다. 글을 작성하며 하나씩 캡춰화면이나 사진을 올리는 방식도 가능하나 인터넷 속도가 빠르지 않아 사진 업로드를 해놓고 글을 작성하는게 낫다.
  2. Posting Blogger, Tumblr, WordPress 를 선택해서 포스팅한다. 비공개글에 대해서 blogger 는 ifTTT가 잘 작동하나, Tumbler는 작동하지 않았다. WordPress는 테스트 어떨지 모르겠다. WordPress에서는 카테고리 지정이 안되고, 제목과 url구분이 안되는 점이 아쉽다. 제목은 한글로 하는 경우 url이 %%% 로 보여서 영어로 설정하고 싶은데 email 로 발송시는 [slug ] 구문을 사용하면 되는데 여기서는 안된다. 못찾았거나.
  3. Edit 포스팅후 필요한 html 수정. 필요시 구글 spreadsheet에 있는 자료를 붙일수도 있겠다.
  4. 활용 Blogger 로 포스팅한 글은 그대로 복사해서 구글문서에 붙여넣기하면 잘 붙는다. 아주 잘 붙는다. (evernote 로 클립해서 활용하는 것도 괜찮다)
  5. 출력 구글문서로 변환하거나 evernote로 클립한 자료는 출력이 쉽고, 출력시 불필요한 정보가 적게 출력된다. 출력물로 다른사람과 이야기하는 상황이 더 많다. 그리고 출력물은 노트에 부착이 가능하다. 모두다 출력해서 붙일 필요는 없지만 요긴하다.
  6. 보관 및 삭제 파일은 Dropbox 나 Google Drive에 한번 Export하면 자동 Sync된다. 뭐. 포스팅한 파일은 그냥 삭제하는것도 방법이다. 여러군데 보관하면 오히려 더 혼동된다. 계속 Revision할 내용인지, 아니면 한번 정리하고 마칠 내용인지에 따라 선택하면 된다.
  7. 글하나에 20분정도 걸린다. 인터넷 속도가 느리다.

쓰고 발행하고 삭제하면 된다. 나머지는 옵션.

http://instagram.com/p/emQXXmEgdA

footnote html

StackEdit는 각주 마크다운을 지원하는데 블로그 포스팅시 링크가 엉뚱한 곳으로 가서 살펴봄

StackEdit Export Html

<aclass="footnote"id="fnref:1"title="See footnote"href="1">1</a><aclass="reversefootnote"title="Return to article"href="1"></a>

제대로 작동하는 Html

<ahref="#fn:2"id="fnref:2"title="see footnote"class="footnote">[2]</a><ahref="#fnref:2"title="return to article"class="reversefootnote">&nbsp;↩</a>

참조번호부분에는
오류 href="1" 제대로 href="#fn:1" 참조 href코드 앞에 #fn: 을 붙인다.

각주부분에는
오류 href="1" 제대로 href="#fn:1" 참조 href코드 앞에 #fnref: 을 붙인다.

😐 잘되려나. -_- 안된다.

+ 같은페이지에 있는 링크에  anchor를 걸때는 # 을 붙인다.  “Answer: How do I create a link to a footnote in HTML? http://stackoverflow.com/a/67035?stw=2

+ 이 글 읽고 다시해볼것.   http://karlwinegardner.blogspot.kr/2011/02/how-to-create-footnotes-in-html.html  <sup> </sup> 태그가 필요한가

+ 참고글 http://www.cs.tut.fi/~jkorpela/www/fn.html Footnotes, endnotes, and sidenotes on Web pages : 전반적인 링크활용 가이드.

+ 말풍선 각주 독자입장에서는 편리해 보임. http://circlash.tistory.com/589

 

+ <li id=”  “> </li> 의 id를 찾아가는  것이었음. a href=”#id” 에서 #은 이 page에 있는 id를 찾아라 라는 의미.

이건 되려나 + <span><strong>각주 1</strong>주석 내용 입력</span>

StackEdit 에서 블로그 글 발행시 tags 지정방법

StackEdit 에서 YAML이 적용되면서(이게 맞는 말인가…)  제목 및 태그 지정방식이 변경되었다.  글작성시 상단에 작성하면 된다.

title: 제목

tags: 태그 (띄어쓰기 및 , 둘다 구분된다)

글 제일 상단에 — 으로 block을 만들어놓고 그 사이에 필요한 구문들을 적용하면된다. permalink, published, category 들도 적용된다고 하는데 작동하지는 않았다. 워드프레스에서는 title 대로 url 이 적용되었다.

여러 옵션이 가능하다고 되어있으나 테스트 결과는 **제목** 과 **태그** 만 작동됨.

마크다운 에디터 중간리뷰

하루패드

업데이트 이후 하단 창에서는 보이는데 ( ***.md 파일을 더블클릭하면 하루패드가 실행된다) 화면이 커지질 않아 입력, 수정이 안된다. 다시 설치해야지 하면서도 바쁘다 보니 계속 미뤄짐.

enter image description here

WriteMonkey

업무상 ol, ul 을 자주 쓰는데 자동으로 붙임이 안되어 잘 안쓰게 된다. 하루패드나 WriteMonkey 둘다 훌륭한 프로그램이고 온전한 글쓰기에 최적화되어있다. 별도 프로그램으로 실행해야 하는 것이 장점일수도 있지만, 개인적으로 온전한 글쓰기 환경보다는 업무상 활용하는 경우가 많아 크롬앱이나 익스텐션으로 구동되는 것을 선호한다.

StackEdit

크롬앱에서 구동이 가능해서 사용한다. 사진을 구글+ 와 연동한것도 장점. 각주가 된다. 목차마크다운이 된다: [TOC]를 넣으면 목차가 바로 붙는다. 포스팅할때 사라지기도 하는데 아이콘도 가능 (참고글:기록과 협업상세설명1)


  1. :공지url을 못찾겠어서 기본템플릿에 있는 글을 포스팅했다. 

Expound Theme

워드프레스 테마변경.  좋은테마가 많아져서 새로운 옷을 고르는 재미가 있다. 이 테마를 선택한 이유는 본문에 대한 추천글을 보여주기 때문이다. 초기 화면에서 앞부분만을 보여주기 때문에 글을 많이 적더라도 예전 글을 찾기 쉬운 장점도 있고. Expound Theme — WordPress Themes for Blogs at WordPress.com.

테마와 스타일을 적용함에 따라 다른 모습들이 보여지는 logic이 재미있다. 특징으로는 본문에 이미지가 있더라도 글목록에서 보여지지않는데 이유를 알아보니 Featured Image가 보이는 것이었다. 일장일단이 있겠으나 본인이 선택한 이미지를 대표할 수 있다는데에 장점이 있다.

+ 유사한 테마로 imbalance2 가 있다.

Imbalance 2 Theme — WordPress Themes for Blogs at WordPress.com.

상단부에 여러메뉴를 구성하고 여러글을 게시판에 포스트잇 붙여놓은 것 처럼 즐길수 있다. 마찬가지로 Feautred Image가 첫봐면에 보여진다.

처음 방문하는 사람에게는 카테고리나 분류가 유용할 수도 있지만, 내 블로그의 가장 큰 독자는 나 이기때문에 반복적인 내용이 상단부를 차지하고 있는 것보다는 단순한것이 좋아 Expound를 선택했다.

😐 다른 블로그 서비스도 디자인들을 변경했다. 변경하면서 알게된 사항들.

### 블로그스팟(blogspot.com)

  • Templeate 에서 고정 Navigator(최상단)을 OFF로 놓으면 없어진다. 더 깔끔하다.
  • 공동블로그 작성시 상대방에게 관리자 권한을 주면 상대방도 디자인할 수 있다.
  • 가장 구성하고 싶은 디자인은 구글 공식 블로그 같은 스타일(http://chrome.blogspot.kr)인데 css를 알아야 한다. 구글 공식 블로그를 Theme로 공개하진 않을까.

### 텀블러(Tumlbr.com)

  • 처음 가입하면 본인아이디로 되어있는 블로그가 자동생성되고 그 블로그는 자신만 포스팅할수있다. 추가로 만든 블로그는 공동블로그로 운영할 수 있다.
  • 테마가 다양(http://www.tumblr.com/themes)하나 선택할때 검색이 어렵다. 전문적으로 블로그 테마를 판매하는 사이트(https://www.pixelunion.net)도 있다. 유료지만 역시 유료는 값을 한다.
  • 각 테마별로 설정할 수 있는 옵션이 다르다.
  • 최근 포스팅한 내용 참고: Tumblr 서비스의 장점 | #eWord.

Hangout

주위를 보면 카카오톡과 페이스북 메신저를 많이들 쓰고 있으나 카카오톡은 게임하자는스팸이 많고, 페이스북은 업무중 사용하기가 곤란한 측면이 있다. 사실 페이스북이나 카톡보다 더 많은 계정을 가지고 있는 소셜서비스가 있는데 그건 바로 구글(Gmail)이다. 한계가 있다면 가입한 사람조차도 자신의 계정이 있는지 모르는 경우가 많아서 계정이 어떻게 등록되어있는지 알아도 그 계정의 비밀번호를 본인이 어떻게 설정했는지를 몰라서 낭패를 겪는경우가 많다.

그래도 이제 스마트폰이 보급된지 3년이 지나서 많은 사람들이 사용하는데 큰 어려움이 없어서 본격적으로 사용하기로 했다. 여러 상황도 있고.1

다른 연결루트를 남겨놓기는 하되 행아웃을 온전한 메인 메신저로 사용하기로 했다. 싱크가 불안정하다는 평도 있으나 사용성과 응용성이 매우 다양하다.2

😐 재미있네 3


  1. 새로운 시작인 오늘을 기억하기, 역지사지
  2. 광파리 블로그에 자세한 설명글이 있다.
  3. 마크다운으로 작성중. StackEdit를 쓰고 있는데, 주요이유는 Chrome에서 사용가능, 각주가 쉽다, 목차기능이 좋다, 블로그 및 WordPress와의 연동이 좋다.

Tumblr 서비스의 장점

워드프레스, 블로그 스팟, 텀블러를 계속 같이 쓰고 있는 이유는 각각 장단점이 다르기 때문이다.  ifTTT를 사용하면 얼마든지 자동으로 연계되게 할 수 있으나 그렇게 하지 않고 있다. 역시 장단점이 다르기 때문이다. 그 전에도 몇개의 비교글을 쓴적이 있으나, 서비스라는것도 지속적으로 발전하고 있기 때문에 오랫만에 진정한 장점을 포스팅한다.

워드프레스는 각 한개의 글꼭지를 컨텐츠로 하여 카테고리, 태그, 컨텐츠의 종류를 전체적으로 Management하기에 좋다. 여러개의 컨텐츠라하더라도 한개의 장소에서 관리하기에 좋은 장점이 있다.  CMS; Contents Management System이라는 단어가 어울리는 서비스다.  단점으로는 글의 갯수가 많아지면 한눈에 보이지 않는다.

Blogspot은 한개의 주제를 같이 작성하기에 좋은 서비스다. Interactive View 및 Google+ 댓글이 장점이다. (Google+ 는 ifttt 가 안된다는 단점외에는 대부분 OK. 특히 사진이 무제한 업로드되고, 그중 중요한 사진을 일자별로  Highlight되기 때문에 사진일기로 쓰기 좋다.) 단점은 여러 주제를 한곳에 작성하기에는 적당하지 않다.

Tumblr는 여러사진을 동시에 포스팅할때 자동으로 그 여러장에 걸맞는 View를 생성해준다. Private 링크가 가능하다.(워드프레스도 가능하지만 그 글을 타인에게 보내주는데 한계가 있다. 비밀번호를 설정하는 글을 쓸수도 있지만 제목이 노출되기때문에  Private이라 하기에는 한계가 있다.) 그리고 Archive View를 활용하면 여러개의 글을 한눈에 보기 쉽다.

** 여러장 사진 포스팅 비교: 텀블러가 제일 낫다.

Tumblr 의 경우 아이디를 생성하면 개인아이디.tumblr.com 이라는 개인 블로그가 생성되고, 추가로 여러개의 블로그 생성이 가능하다.  추가로 생성되는 블로그는 팀블로그로 운영할 수 있다. (추가로 블로그를 생성하는 경우 그 추가아이디.tumblr.com 의 주소를 가지게 되는데, 타인이 회원가입시 추가아이디와 중복되는 아이디의 생성이 안된다. 참고)

+ 부모님을 위한 블로그를 텀블러에 만들어 드렸는데 마침 한국어 서비스도 지원하게 되어 사용이 더욱 용이해졌다.