오픈소스모음

일반적으로 양식 입력 오류가 있으면 위쪽에 오류 메시지가 표시됩니다. 많은 경우 오류 메시지가 표시가 남아 있기 때문에 두 번째 오류가 때 표시가 업데이트되지 않고 애매할 수 있습니다. 오류가 발생거야라는 것을 강하게 어필하고 싶을 때에는 formAnimation를 사용해 보자. 애니메이션으로 임팩트있는 ​​알림 수 있습니다. formAnimation 사용법 formAnimation에서 2 패턴의 애니메이션을 지원하고 있습니다. 첫째는 셰이크입니다. 또 바운드입니다. 어느 쪽이 좋은가는 사이트 나 통지하고 싶은 내용에 따라 달라질 것입니다. 셰이크 제스처는 전체 폼이 입력을 싫어하고있는 것 때문에 더 효과적이지 않을까 생각합니다. formAnimation는 JavaScript로 만든 오픈 소스 소프트웨어..

업무 시스템이라고해도, UI가 갖추어져있는 것이 동기가 나올 것입니다. 특히 대시 보드 계의 잘 보면 화면이면 알기 쉽게되어 있는지 생산성이 크게 달라집니다. 이번에 소개하는 오픈 소스 소프트웨어는 RazorFlow, HTML5의 대시 보드 프레임 워크입니다. RazorFlow 사용법 RazorFlow에서는 여러 차트를 지원합니다. 목록도 사용할 수 있습니다. 그래프 마우스 오버로 설명이 나옵니다. 이쪽은 더 역동적 인 데이터 변화가 있습니다. 양식에 표시되는 데이터를 좁힐 수 있습니다. 카테고리와 명칭 등으로 검색 할 수 있습니다. RazorFlow는 각종 그래프 외에 KPI 표시 패널, 게이지, 테이블, 드릴 다운 등의 표시 및 기능에 대응하고 있습니다. HTML5를 사용하고 실시간 렌더링 업데이트도..

FinTech의 고조도 블록 체인 기술과 그것을 사용한 BitCoin이 여전히 뜨겁다. 거기에는 선진적이고 재미있는 기술이 사용되고 있기 때문에 기술적인 후킹이 발생하느니 통화 시스템으로 문제가있다느니 다양한 문제를 제기하고 있지만, 실제로 사용하고 있습니다. 기술자로서 매우 관심이 커질 분야 인만큼, 그에 얽힌 많은 소프트웨어가 만들어지고 있습니다. 이번에는 그 하나 Satoshi Visualizer를 소개합니다. Satoshi Visualizer 사용법 Satoshi라고하는 것은 BitCoin 최소 통화 단위 인 Satoshi입니다. 0.00000001BTC = 1Satoshi됩니다. Google Chrome에서 표시 한 경우. 음악이 흐르고있어 이를 시각화하고 있는지, BTC의 숫자를 시각화하고 있..

Web 사이트의 기념적인 항목이나 페이지를 만들 때 세로로 만든 타임 라인이 자주 사용됩니다. Web 페이지는 세로로 스크롤되는 것이 많기 때문에 , 스크롤 할 때마다 경과 시간을 나타낼 수 있습니다. 그런 사이트를 만들 때 사용할 수있는 것이 Blueprint : Vertical Timeline입니다. 센스있는 타임 라인 페이지를 만들 수있을 것입니다. Blueprint : Vertical Timeline 사용법 Blueprint : Vertical Timeline의 데모입니다. 일시 및 콘텐츠 아이콘이 함께 표시되어 있습니다. 리스판시브 대응입니다. 스마트 폰 크기로도 쉽게 볼 수 있습니다. Blueprint : Vertical Timeline은 심플한 디자인이지만 그만큼보기 쉬운 것이 아닐까요. 세..

Bootstrap이 가장 많이 사용되는 것은 개인의 Web 서비스, 그리고 기업의 관리 화면에서는 아닐까요. 그런 Bootstrap을 사용한 관리 화면 템플릿 Bootstrap Clean Dashboard Theme를 소개합니다. 정보가 한 곳에 집중되어 있는 대시 보드를 만드는 것이 가능합니다. Bootstrap Clean Dashboard Theme 사용법 데모 화면입니다. 대부분의 버튼은 작동하지 않습니다. 그래프도 있습니다. 각 콘텐츠는 상자에 들어 있습니다. 상자를 클릭 할 때까지 접어 두는 등 표시도 할 수 있습니다. 양식. 주소록 형태 로그인. Bootstrap Clean Dashboard Theme 은 대시 보드이므로 관리 화면에 많은 정보를보기 쉽게 배치하는 것이 요구됩니다. 아이콘을 결..

액세스 해석을 사용하면 사용자가 어떻게 방문하고 있는지 알 수 있습니다. 그러나 페이지에서 어떤 식으로 움직이는 지 모릅니다. 거기에 뭔가 문제가있어 페이지를 닫아 버리고있는 가능성도 있습니다. 그런 사용자의 작업을 기록, 재현 해주는 것이 Spy입니다. 액세스 해석과 함께 사용해 보면 재미있을 것입니다. Spy 사용법 Spy의 움직임입니다. 자신이 한 마우스 조작이 그대로 재현됩니다. Spy 페이지를 표시하는 순간부터 기록이 이루어지고 있습니다. 그리고 데이터를 순차적으로 업로드 할 수 있습니다. 이 데이터를 합쳐서 사용자가 수행 한 작업 (클릭 스토 등)을 재현 할 수있는 구조입니다. 프라이버시에 대한 배려는 필요하지만, Web 사이트의 테스트와 함께 사용해도 좋을 것입니다. Spy는 JavaScri..

HTML5에 의해 UI 주위는 크게 개선되었습니다만, 그래도 아직 부족하다고 느끼는 것이 많습니다. 그 결과 외부 라이브러리를 도입하지 않을 수 없어 호환성이나 조합에 의한 문제가 발생할 수 있습니다. 이번에는 많은 풍부한 UI 라이브러리를 제공하는 Zebra를 소개합니다. Zebra 절대로 다른 라이브러리를 사용 않고도 풍부한 Web 응용 프로그램을 개발할 수있을 것입니다. Zebra 사용법 샘플입니다. 대각선으로되어있는 부분도 구성 요소입니다 탭을 클릭하고 표시를 전환 할 수 있습니다. 곡선 그래프. 키보드 단축키 설정, 해제가 전환되는 구성 요소입니다. 구성 요소의 선택을 전환하는 데모. 드래그 앤 드롭 할 수있는 그래프. 세세한 표시 위치 제어. 마우스 추적. 복잡한 모양 안에 텍스트 상자. 이쪽..

업무 시스템이라고하면 그리드 테이블이 요구됩니다. 처음에는 HTML로 쉽게 만들지만, 곧 추가 기능이 요구됩니다. 정렬, 필터링, 머리글과 왼쪽 열을 고정 해 주었으면 한다고도 요청합니다. 그런 귀찮은 요구를 스크래치로 지원하는 것은 매우 시간이 소요됩니다. 그럴 때는 꼭 handsontable을 시도해 봅시다. handsontable 사용법 handsontable에 많은 기능을 제공합니다. 우선 페이지네이션 비밀번호를 숨길 수 있습니다. 새 행을 만들 때 placeholder를 표시합니다. 포커스가있는 셀을 강조. 셀을 세세하게 커스터마이즈. 이미지를 포함할 수 있습니다. 정렬도 물론 있습니다. 입력 검증도 가능합니다. 머리글과 왼쪽의 열을 고정. 아래 오른쪽 방향 카피가능. 셀 병합. handsont..

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

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