일반적으로 양식 입력 오류가 있으면 위쪽에 오류 메시지가 표시됩니다. 많은 경우 오류 메시지가 표시가 남아 있기 때문에 두 번째 오류가 때 표시가 업데이트되지 않고 애매할 수 있습니다. 오류가 발생거야라는 것을 강하게 어필하고 싶을 때에는 formAnimation를 사용해 보자. 애니메이션으로 임팩트있는 알림 수 있습니다. formAnimation 사용법 formAnimation에서 2 패턴의 애니메이션을 지원하고 있습니다. 첫째는 셰이크입니다. 또 바운드입니다. 어느 쪽이 좋은가는 사이트 나 통지하고 싶은 내용에 따라 달라질 것입니다. 셰이크 제스처는 전체 폼이 입력을 싫어하고있는 것 때문에 더 효과적이지 않을까 생각합니다. formAnimation는 JavaScript로 만든 오픈 소스 소프트웨어..
의외로 좋을지도! 스마트 폰 등으로 Web 사이트를보고있어 사진이 후로부터 읽히는 위해 콘텐츠의 높이가 바뀌어 잘못된 탭을 버릴 수 있습니다. 많은 경우 배너 등으로 매우 좌절합니다. 그 런 사이트에 도입 해 주었으면가 Scrollbear입니다. 이미지를 로드해도 읽고 있는 내용의 높이가 변하지 않는 라이브러리입니다. Scrollbear 사용법 왼쪽이 Scrollbear 도입 후, 오른쪽이 미 도입입니다. 이미지가로드 될 때마다 내용이 부들 부들 움직입니다. Scrollbear을 도입 해두면 컨텐츠가 달라지는 것은 아닙니다. 그러나 이미지의 높이를 미리 정해두면 좋은 것은 사용자가 콘텐츠를 만드는 것 같은 이미지의 유무를 알 수없는 사이트에 사용하는 것이 좋을 것입니다. Scrollbear는 JavaSc..
간판시스템은 이제 프로젝트 관리의 기본 기능 만되고 있습니다. 미세 상태는 차치하고, 개발하고 있는지 테스트인지 등 상태를 한눈에 알 수있는 것은 좋은 것입니다. 그런 간판 기능만을 제공하는 것이 Retro Board입니다. 매우 심플한 간판 기능을 제공합니다. Retro Board 사용법 이름을 입력하고들어갑니다. 작업은 여러 개 만들 수 있습니다. 목록에서 한번에 볼 수 있습니다. Retro Board는 가장 기본적인 간판 기능 밖에 없습니다. 프로젝트 관리는 다른 것이 좋을지도 모릅니다. 그리고 작업 내용을 결정하면 Retro Board 작업을 써 가며 상태를 관리하는 것이 좋을 것입니다. Retro Board는 node / JavaScript로 만든 오픈 소스 소프트웨어 (GPL v3)입니다...
업무 시스템이라고해도, UI가 갖추어져있는 것이 동기가 나올 것입니다. 특히 대시 보드 계의 잘 보면 화면이면 알기 쉽게되어 있는지 생산성이 크게 달라집니다. 이번에 소개하는 오픈 소스 소프트웨어는 RazorFlow, HTML5의 대시 보드 프레임 워크입니다. RazorFlow 사용법 RazorFlow에서는 여러 차트를 지원합니다. 목록도 사용할 수 있습니다. 그래프 마우스 오버로 설명이 나옵니다. 이쪽은 더 역동적 인 데이터 변화가 있습니다. 양식에 표시되는 데이터를 좁힐 수 있습니다. 카테고리와 명칭 등으로 검색 할 수 있습니다. RazorFlow는 각종 그래프 외에 KPI 표시 패널, 게이지, 테이블, 드릴 다운 등의 표시 및 기능에 대응하고 있습니다. HTML5를 사용하고 실시간 렌더링 업데이트도..
테스트 방식은 지난 몇 년 동안 단번에 수준이 높아지고 있습니다. 단위 테스트를 작성 문화도 갖추어지고있어, CI 도구와 관련하여 자동화 된 테스트를 할 수있게되어오고 있습니다. Web 브라우저를 사용한 테스트도 Selenium 의해 완성오고 있습니다. 그런 테스트 환경이지만 고도에 이르면 오히려 도입이 어려울 수 있습니다. 그래서 사용해보고 싶은 것이 Chibineko 간단한 테스트 지원 도구입니다. Chibineko 사용법 Chibineko의 화면입니다. 우선 등록합니다. 대시 보드입니다. 아직 테스트가 없습니다. 테스트를 만듭니다. 테스트의 제목과 후 테스트하고 싶은 내용을 적습니다. 이것이 테스트 화면입니다. 실제로 테스트를 실시하고 결과를 선택하는 것입니다. OK이면 OK, 안되면 이유를 선택하..
FinTech의 고조도 블록 체인 기술과 그것을 사용한 BitCoin이 여전히 뜨겁다. 거기에는 선진적이고 재미있는 기술이 사용되고 있기 때문에 기술적인 후킹이 발생하느니 통화 시스템으로 문제가있다느니 다양한 문제를 제기하고 있지만, 실제로 사용하고 있습니다. 기술자로서 매우 관심이 커질 분야 인만큼, 그에 얽힌 많은 소프트웨어가 만들어지고 있습니다. 이번에는 그 하나 Satoshi Visualizer를 소개합니다. Satoshi Visualizer 사용법 Satoshi라고하는 것은 BitCoin 최소 통화 단위 인 Satoshi입니다. 0.00000001BTC = 1Satoshi됩니다. Google Chrome에서 표시 한 경우. 음악이 흐르고있어 이를 시각화하고 있는지, BTC의 숫자를 시각화하고 있..
최근 사진은 고해상도로 되어있어 간단하게 표시 한 것만으로는 세세한 부분까지 확인할 수 없게되어 있습니다. 모처럼 찍은 사진에 대해 상세한 부분까지보고 싶은 보았으면 좋겠다고 생각하는 것은 아닐까요. 그래서 사용해보고 싶은 것이 jfMagnify입니다. 돋보기 도구를 사용하여 아주 작은 부분까지 볼 수있는 라이브러리입니다. jfMagnify 사용법 데모입니다. 마우스로 돋보기 부분을 드래그하여 이동할 수 있습니다. 새로운 생각은 돋보기 옆에있는 확대 / 축소 버튼입니다. 확대하면 더 잘 확인할 수 있습니다. 자고있는 남성의 얼굴도 확인할 수있었습니다. jfMagnify 단순히보고있는 사진을 확대하고있다뿐입니다 만, Retina 디스플레이 등으로 2 배 해상도의 사진을 표시하는 경우는 보다 효율적으로 확인..
Web 사이트의 기념적인 항목이나 페이지를 만들 때 세로로 만든 타임 라인이 자주 사용됩니다. Web 페이지는 세로로 스크롤되는 것이 많기 때문에 , 스크롤 할 때마다 경과 시간을 나타낼 수 있습니다. 그런 사이트를 만들 때 사용할 수있는 것이 Blueprint : Vertical Timeline입니다. 센스있는 타임 라인 페이지를 만들 수있을 것입니다. Blueprint : Vertical Timeline 사용법 Blueprint : Vertical Timeline의 데모입니다. 일시 및 콘텐츠 아이콘이 함께 표시되어 있습니다. 리스판시브 대응입니다. 스마트 폰 크기로도 쉽게 볼 수 있습니다. Blueprint : Vertical Timeline은 심플한 디자인이지만 그만큼보기 쉬운 것이 아닐까요. 세..
- Total
- Today
- Yesterday
- github에
- LGPL
- go
- node.js
- HTML5
- SVG
- GPL v3
- 자바 스크립트
- 웹 API
- GUI
- CMS
- License MIT
- 디자인
- mit license
- 소프트웨어
- GitHub
- Mac OSX
- cui
- javascript
- Web 오픈 소스
- Web
- MIT 라이센스
- software
- 텍스트
- GPL
- 오픈 소스
- Open Source JavaScript
- Web 오픈 소스 JavaScript
- linux
- Web API
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |