오픈소스모음

Web상에서 콘텐츠를 더 많은 사람에게 보여 주려고 생각하면 공유 기능을 빠뜨릴 수 없습니다. Facebook, Twitter 기본적으로, 그 밖에도 많은 소셜 계 서비스가 존재합니다. 그런 각종 서비스에 대응 한 공유 기능을 제공하는 것이 Social Share URLs입니다. JavaScript에서 쉽게 구현할 수 있습니다. Social Share URLs 사용 데모입니다. 지정된 URL, 제목 등으로 공유 할 수 있습니다. 아래에 늘어선 아이콘을 클릭합니다. Facebook의 경우. 기본적으로 모든 팝업 창이 열립니다. Twitter이면 해시 태그와 사용자 이름을 지정할 수 있습니다. Google Plus에도 대응하고 있습니다. Social Share URLs 공유 기능을 동적으로 쉽게 만들 수있을..

Web상에서 SVG가 많이 사용되기 시작했습니다. SVG의 장점 중 하나로 꼽히는 것이 벡터이므로 확대해도 깨끗한 것입니다. 확대 나 축소한다는 것은 정보의 입도를 스스로 변경하고 싶은 경우에 유용합니다. 그래서 소개하고 싶은 것이 SVG panzoom입니다. 그 이름과 같이, SVG의 확대 / 축소를 실현하기위한 라이브러리입니다. SVG panzoom 사용 샘플입니다. 많은 정보가 아로 새겨 져 있습니다. 확대했습니다. 마우스로 할 수 있습니다 반대로 빵했습니다. 그래도 깨끗한 선으로 그려지는 SVG의 장점 네요. 실제 움직임입니다. 실제 사용 예입니다. 도서끼리의 관련성을 시각화하고 있습니다. SVG는 JavaScript와 함께 대화 형 콘텐츠를 만드는 데 적합합니다. 또한 벡터이므로 경량이며, 그러..

SVG 콘텐츠는 재미있어, Flash와 같은 애니메이션도 지원하고 있습니다. 콘텐츠를 서서히 그려 나갈 수 있도록 하기만 하면 됩니다. 수작업으로 실현하는 것은 무리가 있을 것입니다. 그래서 사용해보고 싶은 것이 Yarrow입니다. HTML 프리젠 테이션 등과 결합하면 효과적 일 수 있습니다. Yarrow 사용법 실제로 움직이고있는 곳입니다. 나중에 선이 당겨지는 것을 알 수 있습니다. 선에 문자를 올릴 수 있습니다 소스가되는 곳에서 선이 시작한다는 연출도 가능합니다. 섹션의 상자를 향해 뻗어나가는 애니메이션도 가능합니다. 그래프의 포인트를 향해 당겨지는 데모. 이것은 효과가있을 것입니다. D3와 함께합니다. 그래프가 그림에서 단순히 화살표가 그려져있는 것만으로 시선을 끌기 쉽지 않습니다. 그래서 애니메..

프로그래머의 성과는 작성한 코드 대응하는 Issue에 나타납니다. 그런데도 일보를 내면되면 "○○ 시스템 개발 5 시간 '라고 써 버리거나합니다. 이것으로는 구체성이없이 상태의 좋고 나쁨도 모릅니다. 그래서 사용해보고 싶은 것이 github-nippou입니다. GitHub를 사용하여 일상적인 개발을 관리하고 있다면 시도해 보면 좋을 것입니다. github-nippou 사용법 github-nippou 명령을 두드리는 것뿐입니다. 그러면 user_events에 실려있는 정보를 목록에서 구해줍니다. 그리고 난 후, 이 중에서 선택하면됩니다. Issue에서 작업을 관리하고 있으면 매우 사용하기 쉬운 것입니다. 도움말은 다음과 같이되어 있습니다. github-nippou는 Issues을 가져 오기 때문에 Issu..

CMS라고하면 WYSIWYG를 사용하여 콘텐츠를 생성 해 나가는 이미지가 있습니다. 그 때 사용하는 키보드가 기본으로 입력 해 나간다고하는 이미지입니다. 그런 개념을 깨줄 것 같은 CMS가 나타났습니다. PHP로 만들어진 CMS, Sitecake인데 내용을 드래그 앤 드롭으로 만들어가는 그런 새로운 개념의 CMS입니다. Sitecake 사용법 우선 인증을 실시합니다. 로그인하면 도구 모음이 표시됩니다. 이것은 드래그로 이동할 수 있습니다. 텍스트를 선택하면 링크 입력 상태가됩니다. 텍스트 콘텐츠의 편집은 키보드입니다. 여기에 드래그 앤 드롭합니다. 이미지 교체를합니다. 재미있는 것은 외부 사이트의 이미지를 그대로 드래그 앤 드롭하여 넣을 수 있습니다. 동영상도 드래그 앤 드롭 할 수 있습니다. YouTu..

Mac OSX를 사용하고있어 편리한 것이 QuickLook 기능입니다. 스페이스 바를 누르면 컨텐츠의 내용을 확인할 수 있다는 것은 매우 쉽고, 한 번 사용하면 놓을 수없는 기능입니다. Windows에도 좋겠다고 생각하는 사람은 많을 것입니다. 그래서 사용해보고 싶은 것이 WinQuickLook입니다. QuickLook 라이크 스페이스 키에서 사용할 파일뷰어입니다. WinQuickLook 사용법 로그 파일을 여는 예. 내용을 확인할 수 있습니다. 실행 파일. 이 아이콘뿐입니다. 이미지를 미리 볼 수 있습니다. 동영상 파일을 미리 볼 수없는 것은 조금 유감. HTML 파일은 미리 볼 수 있습니다. WinQuickLook이 플러그인을 지원하는 커뮤니티 기반에서 해당 확장자를 늘릴 수있게 되면 단번에 퍼질지도..

사내 PC 관리를 할 때 중요한 요소가 불필요한 포트가 열려 있는지 확인합니다. 특히 80 번 포트가 열려있으면, 악의적인 웹 사이트를 방문할 때 공격당할 수 있습니다. 비어있는 포트를 확인하는 소프트웨어도 다수 있습니다만, 이번에는 phantomscanner을 소개합니다. 포트 검사와 함께 스크린 샷을 찍어줍니다. phantomscanner 사용법 phantomscanner는 IP 주소의 범위를 전달하고 실행합니다. 그러면 포트가 열려 있으면 스크린 샷을 찍어 이미지로 저장합니다. 더 이상 아무것도하지 않지만 정기적으로 실행하여 불필요한 컴퓨터 포트가 열려 있지 않은지 확인할 수 있습니다. 서버에서 실행하여 서버의 상태를 스크린 샷 모두 확인하실 수있을 것입니다. phantomscanner은 Pytho..

포스팅 욕심에 휩싸여 분발하고 블로그도 시작하려고 생각할 수 있습니다. 그러나 시스템의 설치 또는 각 서비스의 작성을 기억하는 번거로움이 귀찮아져 버리는 사람도 많은 것이 아닐까요. 이번에는 간단하게 사용할 Blogless을 소개합니다. 데이터베이스를 사용하지 않고 아삭 콘텐츠를 만들 수있게합니다. Blogless 사용법 페이지 및 블로그 게시물도 같은 형식으로되어 있습니다. 블로그는 1 일 1 개로되어 있습니다. 글쎄 다이어리 같네요. 설정 화면입니다. 간단합니다. Blogless는 데이터베이스를 사용하지 않았지만, PHP로 만들어져 있습니다. 블로그만큼 무겁지는 않지만, 개인 브랜딩에 더 맞을 것 같습니다. Blogless는 PHP 만든 오픈 소스 소프트웨어 (MIT License)입니다. daten..

디자이너 분들에게 포트폴리오는 매우 중요합니다. 디자인과 사진을 통해 자신의 실력을 어필하여 전직이나 새로운 일의 획득으로 이어질 것입니다. 그리고 그 포트폴리오의 보이는 방법도 중요합니다. 작품이 좋아도 정작 포트폴리오 사이트가 이상하다면 실력이 의심되어 버립니다. 그래서 사용해보고 싶은 것이 gridfolio입니다. gridfolio 사용법 gridfolio는 그 이름과 같이 그리드 기반의 포트폴리오가 있습니다. 샘플은 다음과 같이됩니다. 이곳은 다른 예. 작품 사이의 취하는 방법이 소중하네요. gridfoliow를 사용하여 자신이 만든 작품을 예쁘게 나란히 볼 수 있습니다. 물론 포트폴리오도 자신의 작품으로 자작도 좋지만, 그런 수고를 걸 수 없거나 시간이없는 때에는 gridfolio를 사용해 보는..

CSS는 어딘지 모르게 써도 나름대로 표시되어 버리기 때문에 제대로 작동 및 유지가 어려운 기술입니다. 기업에 따라 다양한 규칙이 정답도 좀처럼 찾을 수 없습니다. 오히려 일정한 법칙이 있는 프레임워크가 편하다고 말할 수 있습니다. 이번에 소개하는 RichCSS도 그런 스타일시트 프레임 워크 중 하나입니다. RichCSS의 법칙에 의거하여 작성하여 운용을 완화한다는 개념입니다. RichCSS 사용법 RichCSS 개념에 가까운 것이며, 그것을 보조하는 CLI 도구가 나와 있습니다. 초기화 명령에서 CSS 또는 SCSS에 따른 파일이 생성됩니다. 보고 아는대로 페이지가 아닌 화면 요소에 따라 스타일 시트가 생성되는 느낌이 있습니다. RichCSS는 재사용성을 중시 한 스타일 시트의 짜는 방법을 제창하고 있..