Janko Jovanovic – Design Management and Strategic Design[B!]新着記事・評価

CSS Message Boxes for different message types : Janko Jovanovic
4 users
www.jankoatwarpspeed.com

Can you believe this: Few days ago I went to my bank to check my credit score with the Credit Bureau. The bank official typed in my personal data and sent a request. Web application responded by displaying a yellow message box with an exclamation icon saying that data processing is still in progress. He checked several more times, but he didn't notice that at one moment the message changed to "Acc
- テクノロジー
- 2014/01/14 14:20
- css

Turn any webform into a powerful wizard with jQuery (FormToWizard plugin) : Janko Jovanovic
9 users
www.jankoatwarpspeed.com

This detailed tutorial will show you how to turn long webform into a wizard with “steps left” information. A plugin is also available for download. Download plugin with example View demo What is our task? If you would, for whatever reason, have a large webform all fields shoud be semantically divided into fieldsets. Each fieldset would clearly describe each group of fields. Although many examples
- テクノロジー
- 2013/03/14 14:05
- jquery
- form
- plugin
Free Sketching & Wireframing Kit : Janko Jovanovic
6 users
www.jankoatwarpspeed.com

Sketching & Wireframing kit is a free set of elements for sketching and wireframing. It consist of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners. The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG vector format that can be easily modified. It can also be downloa
- テクノロジー
- 2013/02/14 23:42
Opera mobile window chooser, recreated with jQuery
3 users
www.jankoatwarpspeed.com

It's always fun to play with jQuery especially when you are trying to recreate something that you enjoy using. One such thing is window chooser in Opera Mobile browser where opened windows are positioned below each other and only a portion of each window is visible. The one on the top is current window that is fully visible. Clicking on those windows is followed by some nice effect. View demo Our
- 学び
- 2010/11/22 17:46
- js
- jquery
Why and how to create Microsoft Office Minibar with jQuery and CSS3 : Janko Jovanovic
8 users
www.jankoatwarpspeed.com

Although many will argue that Microsoft products are an example of a good design, Minibar was one of design refreshments that came out with the Office 2007. It is a variation of a toolbar that exposes context-related functionality. In case of MS Word, context is a text selection. Since Minibar always pops up near the mouse pointer it enables users to quickly perform actions related to a selection.
- テクノロジー
- 2010/05/25 13:05
- jQuery
- javascript
- CSS3
- css
- ボタン
Windows 7 menu
5 users
www.jankoatwarpspeed.com

This menu is creted using CSS3 only (except for icons) Please visit the tutorial for more details.
- 世の中
- 2010/04/07 21:05
- CSS3
- サンプル
Create Windows 7 start menu using CSS3 only
16 users
www.jankoatwarpspeed.com

I am fascinated with how much you can do with so little using CSS3. Many user interface elements that require images in order to have appropriate visual appearance now can be styled only with CSS3. In order to prove that I assigned myself a task to create Windows 7 start menu only with CSS3 (and some icons). If we decompose the menu we'll get one div, two unordered lists with a couple of links eac
- 世の中
- 2010/04/07 12:57
- css3
- menu
- windows7
- CSS
- web制作
- ux
Ultimate guide to table UI patterns : Janko Jovanovic
42 users
www.jankoatwarpspeed.com

Many agree that tables are a phenomenon in user interface design: they are very important parts of user interfaces but often overlooked. Tables show structured data and their purpose is to make that data readable, scannable and easily comparable. The thing is that in many cases tabular data is obscured. This is why tables have bad reputation and many find them boring. The truth is that the are eve
- 暮らし
- 2010/02/28 01:11
- table
- UI
- デザイン
- design
- webデザイン
- テーブル
- HTML
- WebDesign
- まとめ
- サンプル
Handycons – a free, hand drawn social media icon set : Janko Jovanovic
4 users
www.jankoatwarpspeed.com

Handycons is a free, hand drawn social media icon set that contains 12 icons. Package contains icons for del.icio.us, Digg, Mixx, DesignBump, StumbleUpon, Reddit, Developer Zone, DesignFloat, Technorati, Twitter and RSS feed & Email icon, of course. All icons are available in four sizes: 16×16, 24×24, 32×32 and 48×48 pixels. UPDATE (march 2009): There is Handycons2 icon set released in February 20
- 学び
- 2010/02/19 11:41
Dynamic tabs using jQuery – why and how to create it : Janko Jovanovic
7 users
www.jankoatwarpspeed.com

This tutorial will show you how to use jQuery to create tabs that can be added and removed dynamically. Although the example looks bulletproof, there are some questions I will raise about how to use tabs and in which context should they be used in order to make them meaningful and usable. View demo When we talk about tabs on web we usually think about tabs used for navigation. However, in this cas
- テクノロジー
- 2010/01/27 19:15
- jquery
- Tab
- Plugin
- javascript
- チュートリアル
- library
- ui
- WebDesign
- web制作
Free Sketching & Wireframing Kit
52 users
www.jankoatwarpspeed.com

Sketching & Wireframing kit is a free set of elements for sketching and wireframing. It consist of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners. The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG vector format that can be easily modified. It can also be downloa
- 暮らし
- 2009/12/25 11:31
http://www.jankoatwarpspeed.com/examples/CSS-Sliding-doors/
3 users
www.jankoatwarpspeed.com
- 学び
- 2009/11/27 12:07
Create YouTube-like adaptable view using CSS and jQuery : Janko Jovanovic
7 users
www.jankoatwarpspeed.com

Besides Turn off the lights feature I explained earlier, YouTube has more great stuff. I believe that you noticed “change view” feature which allows you to switch between normal and wide mode and thus expand/shrink movie area. I like this feature because in different circumstances, I need a different view. But the thing I like the most is that, although layout changes, it is done seamingly and all
- テクノロジー
- 2009/11/09 10:25
- jQuery
- javascript
- css
- web制作
Usability tips for visualizing Ajax requests : Janko Jovanovic
3 users
www.jankoatwarpspeed.com

The usage of Ajax in web applications and web sites is rapidly increasing. If not handled properly Ajax fucntionalities can break users’ expectations and conventions. This is why it is important to help users easily identify what is going on with the system and prevent them to make errors during Ajax operations. Keep users informed Ajax indicators are very important tools that help users to have a
- テクノロジー
- 2009/11/02 10:43
- usability
- Ajax
- javascript
- form
- ui
- web制作
- tips
Untitled Page
3 users
www.jankoatwarpspeed.com

JankoAtWarpSpeed.com Demo for Advanced Docking using jQuery Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id pharetra augue. Phasellus venenatis suscipit lacus, consectetur iaculis libero suscipit in. Morbi euismod placerat purus, id ultricies risus semper eget. Pellentesque tincidunt fringilla mauris, vitae rutrum augue dictum vel. Aenean viverra consectetur elit vitae
- 学び
- 2009/10/19 19:56
- jquery
- javascript
- plugin
Fade colors using jQuery
18 users
www.jankoatwarpspeed.com

Retweetradar has nice little effect in the footer - links in top lists fade, emphasizing the most popular links with strongest color intensity. This tutorial will explain how to fade a color in array of elements using jQuery. Download source View demo 1 In the example in this tutorial we'll will fade links in unordered list like in the example below. <ul id="links"> <li><a href="#">Some text
- 学び
- 2009/10/14 22:39
- jQuery
- javascript
- library
- 拡張機能
- テキスト
- jQuery
- color
- プラグイン
- tutorial
Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)
48 users
www.jankoatwarpspeed.com

This detailed tutorial will show you how to turn long webform into a wizard with “steps left” information. A plugin is also available for download. Download plugin with example View demo What is our task? If you would, for whatever reason, have a large webform all fields shoud be semantically divided into fieldsets. Each fieldset would clearly describe each group of fields. Although many examples
- 暮らし
- 2009/09/29 23:20
- jquery
- フォーム
- form
- javascript
- ウィザード
- plugin
- wizard
- webデザイン
- jQuery
http://www.jankoatwarpspeed.com/examples/animate-validation-feedback/
4 users
www.jankoatwarpspeed.com
- 暮らし
- 2009/09/17 00:15
- jQuery
Animate validation feedback using jQuery
12 users
www.jankoatwarpspeed.com

Yesterday, I came across Jumpchart.com and while I was checking out their website one thing catched my eye: validation feedback was animated! In this tutorial I will explain how to create this nice little trick. Download source code View demo The trick is very simple: after user presses signup button, validation occurs and all fields that are invalid get shaken a little bit. They have very simp
- 暮らし
- 2009/09/16 21:07
- jQuery
- フォーム
- javascript
- animation
- form
- jQuery
Automatically generate table of contents using jQuery : Janko Jovanovic
8 users
www.jankoatwarpspeed.com

Some time ago, I was debating with my friends on the topic: is there any use of generating table of contents automatically. The conclusion was that it can be useful in cases when the reading material is long enough and table of contents (TOC) has a fixed position on the screen. This tutorial will show you how to create such TOC in just a few lines of code. Extract information from HTML I will star
- 暮らし
- 2009/08/22 23:33
- jQuery
- javascript
- imported
- library
- webdesign
Reinventing a Drop Down with CSS and jQuery : Janko Jovanovic
21 users
www.jankoatwarpspeed.com

For me, standard HTML Select element is pretty much annoying. It's ugly. It can't be styled properly in Internet Explorer. And it can't contain nothing but simple text. That is the reason why I needed to reinvent Drop Down element. This tutorial shows how to do that (easily, believe it or not). View demo Download source code There is an update at the end of this tutorial and the second demo that s
- テクノロジー
- 2009/07/29 02:33
Expand table rows with jQuery - jExpand plugin - JankoAtWarpSpeed demos
7 users
www.jankoatwarpspeed.com

JankoAtWarpSpeed demos Demo for Expand table rows with jQuery - jExpand plugin Country Population Area Official languages United States of America 306,939,000 9,826,630 km2 English Additional information USA on Wikipedia National Atlas of the United States Historical Documents United Kingdom 61,612,300 244,820 km2 English Additional information UK on Wikipedia Official tourist guide to Britain Off
- テクノロジー
- 2009/07/23 13:05
- jquery
- Javascript
Expand table rows with jQuery – jExpand plugin : Janko Jovanovic
3 users
www.jankoatwarpspeed.com

jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements. Download jExpand with samples View demo How does it work? To have such expandable table we have to reserve two rows for each entit
- テクノロジー
- 2009/07/23 10:27
Expand table rows with jQuery - jExpand plugin
28 users
www.jankoatwarpspeed.com

jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements. Download jExpand with samples View demo How does it work? To have such expandable table we have to reserve two rows for each entit
- テクノロジー
- 2009/07/20 18:44
- jquery
- table
- plugin
- javascript
- **Webプログラム
- *Ajax
- *jQuery
Create fancy share box with CSS and jQuery
4 users
www.jankoatwarpspeed.com

This tutorial will show you how to turn unordered list (UL) into an fancy social bookmarking sharing box. You will see how to style such box, how to add interactivity, and how to create jQuery plugin that will turn any UL into sharing box. Download source View demo The idea is to have all of the buttons shown inline and partially hidden. When user hovers over a button it slides to the right and
- 暮らし
- 2009/07/14 09:02
- jQuery
- ui
- *jQuery
- *tips
- library
- SEO
- CSS
- javascript
Adaptable view - how do they do it?
4 users
www.jankoatwarpspeed.com

Adaptable view is a user interface design pattern which you can use to allow users to manually change visual appearance of content in order to fit their needs. This is usually done by switching styles (in web sites and applications). This way you provide your users with more control over the appearance of content which improves user experience. Adaptable view can be used to enable users to incre
- 暮らし
- 2009/07/08 09:26
- jQuery
- css
- デザイン
Create dropdown menus with CSS only : Janko Jovanovic
8 users
www.jankoatwarpspeed.com

I rarely see drop down menus that behave like drop down lists, but I really like them. I noticed, however, that people often use JavaScript to achieve this effect. Actually, there is a simple way to do it only with CSS. View demo You are probably familiar with the menu structure; nested unordered lists are common way to create menus. Showing/hiding child menus is done with simple CSS: ul > li:hove
- テクノロジー
- 2009/06/22 09:43
- css
- ナビゲーション
- メニュー
- ui
- webdesign
- tips
Use jQuery to “turn off the lights” while watching videos : Janko Jovanovic
4 users
www.jankoatwarpspeed.com

Some videos on YouTube have a cool feature called “Turn the lights down”. Basically, when you turn lights down, the entire page darkens and let you watch video as if you are in the cinema. This tutorial will show you how to implement this simple effect. View live demo The problem Our example is simple – it consists of header, the video, “turn off the lights” link and sidebar with some information
- テクノロジー
- 2009/06/10 09:54
- jQuery
- 動画
- JavaScript
Advanced docking using jQuery : Janko Jovanovic
8 users
www.jankoatwarpspeed.com

Some time ago I was doing some proof of concept: how Visual Studio docking functionality can be done with jQuery and unordered lists. Basically, the main goal was to implement multiple docking and undocking functionality. This tutorial will show you the results of PoC. Download the example View live demo The requirements This is how docking should behave: When user hovers an item on vertical menu,
- テクノロジー
- 2009/06/01 23:27
- jQuery
- ナビゲーション
- interface
- web design
- plugin
- idea

はてなブックマーク

はてなブックマーク

『Janko Jovanovic – Design Management and Strategic Design』

CSS Message Boxes for different message types : Janko Jovanovic

Turn any webform into a powerful wizard with jQuery (FormToWizard plugin) : Janko Jovanovic

Free Sketching & Wireframing Kit : Janko Jovanovic

Opera mobile window chooser, recreated with jQuery

Why and how to create Microsoft Office Minibar with jQuery and CSS3 : Janko Jovanovic

Ultimate guide to table UI patterns : Janko Jovanovic

Handycons – a free, hand drawn social media icon set : Janko Jovanovic

Dynamic tabs using jQuery – why and how to create it : Janko Jovanovic

Free Sketching & Wireframing Kit

http://www.jankoatwarpspeed.com/examples/CSS-Sliding-doors/

Create YouTube-like adaptable view using CSS and jQuery : Janko Jovanovic

Usability tips for visualizing Ajax requests : Janko Jovanovic

Untitled Page

Fade colors using jQuery

Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)

http://www.jankoatwarpspeed.com/examples/animate-validation-feedback/

Animate validation feedback using jQuery

Automatically generate table of contents using jQuery : Janko Jovanovic

Reinventing a Drop Down with CSS and jQuery : Janko Jovanovic

Expand table rows with jQuery - jExpand plugin - JankoAtWarpSpeed demos

Expand table rows with jQuery – jExpand plugin : Janko Jovanovic

Expand table rows with jQuery - jExpand plugin

Create fancy share box with CSS and jQuery

Adaptable view - how do they do it?

Create dropdown menus with CSS only : Janko Jovanovic

Use jQuery to “turn off the lights” while watching videos : Janko Jovanovic

Advanced docking using jQuery : Janko Jovanovic

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス

『Janko Jovanovic – Design Management and Strategic Design』

このページはまだブックマークされていません

キーボードショートカット一覧

公式Twitter

はてなのサービス

このページはまだ
ブックマークされていません