| 부정적 감정의 자연적 수명은 90초다. - 테일러 박사 (0) | 2014.03.05 |
|---|---|
| [중구/서소문동/시청역] 잼배옥 : 77년 전통의 설렁탕 전문점 (0) | 2013.12.10 |
| 운명이란 다른 곳에서 찾아오는 것이 아니고 자기 마음속에서 성장하는 것이다. - 헤르만 헤세 - (0) | 2013.11.21 |
| 성공하는 삶의 비결은 무엇을 하는 것이 자신의 운명인지 발견하고, 그것을 행하는 것이다. - 핸리 포드 - (0) | 2013.11.20 |
| " 지금이 가장 나쁜 때이다" 라고 말할 수 있는 때는 가장 나쁜 때가 아니다. - 셰익스피어作 <리어왕> 中 - (0) | 2013.11.19 |
The Mobile Internet is rapidly growing and not everything which is displayed on a PC site can adequately fit onto a mobile web page. Effective design graphics for mobile devices is a challenge, and one can no longer develop for a one size ( PC ) screen resolution, since graphics on mobile devices are very different from desktop devices, and there are several complexities of working within mobile technology.
The greatest challenge which developers encounter for effective Website Design is being able to produce a “Mobile Version” of the particular website since mobile phones with internet facilities have rapidly become all too common and therefore – every mobile user wants to have web access on the go.
Developing for the mobile web has been ignited in most part by user demand and this requires that Mobile developers have to push the envelope further when it comes to applications and functionality.
User expectation for a great mobile experience is the new standard when it comes to Mobile Development – and Jquery is paving the way for UX professionals within applying their skills to cover all of the nuances of the mobile UX for the vast array of devices out there. Below is a list of 15 Jquery Plugins which are empowering the mobile environment.
Mobiscroll is a wheel scroller/Date and Time picker jQuery plugin for touch devices (Android phones, iPhone, iPad, Galaxy Tab). The control can easily be customized to support any custom values and can even be used as an intuitive alternative to the native select control (dropdown list). The control is themable. You can easily change the appearance of if in CSS. It also comes with pre-defined, nice looking color schemes. It has been tested on iOS4, Android 2.2, Android 2.3, Chrome, Safari, Firefox, IE9.
Ion.Sound is a jQuery plugin for playing sounds on events. It has been tested on Google Chrome, Mozilla Firefox, Opera, Safari, IE(9.0+) and mobile browsers. Ion.Sound freely distributed under terms of MIT licence.
jQuery.mmenu is a slick plugin that brings the same behavior into any -mobile- web layout. It transforms unordered lists with unlimited sub-lists into menu items and has multiple options for customization. The options include the position of the menu (left/right), if a counter for the menu items will be displayed or not and more. jQuery.mmenu can also be controlled (opening, closing and toggling the menu) with simple functions.
Naver is a jQuery plugin for responsive navigation. It is an easy way to turn any navigation system into a responsive-ready, mobile-friendly toggle. The navigation states can be also be animated. It has been tested in Firefox, Chrome, Safari, IE7+. It is released under the MIT License. Feel free to use it in personal and commercial projects.
iosOverlay.js is iOS-style overlays/notifications for the web. It has been tested on IE7+, Google Chrome, Firefox, Opera, Desktop Safari, Mobile Safari — iPhone & iPad. To prevent icon flickers as they load, you have to preload image resources. Spin.js is required if you want to use a spinner object. And jQuery is required for a fallback CSS animation support.
Easy responsive tabs is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its form accordingly. It supports Horizontal / Vertical Tabs to Accordion. Tabs and accordion are created entirely with jQuery. It supports multiple sets of tabs on same page. It has been tested on IE7+, Chrome, Firefox, Safari and Opera. It is released under MIT License.
Hide/show Password plugin lets you easily hide and reveal the contents of a password input field. The coolest part about this plugin is the “innerToggle” option. When true, it will create a nifty hide/show control you can style as you like. It even maintains the input focus when tapped in a touch browser.
Swipebox is a touchable jQuery lightbox. It is a jQuery “lightbox” plugin for desktop, mobile and tablet. It supports Swipe gestures for mobile, Keyboard Navigation for desktop, CSS transitions with jQuery fallback, Retina support for UI icons, and Easy CSS customization. It has been tested on Chrome, Safari, Firefox, Opera, IE8+, IOS4+, Android, windows phone. It is released under MIT License.
We all know the iOS folder interface: “clicking a folder changing the opacity of other elements and displaying the contents inside a sliding element”. App-Folders is a jQuery that mimics that behavior and works on both desktop + mobile browsers. Folders can include any HTML element (images, text, video ,etc.) and each folder gets its own URL that makes direct-linking possible. The look/feel doesn’t have to be iOS-like but it can be themed completely for creating attractive layouts.
jQuery/jQuery mobile plugin to give Flipboard app like effect. Flip effect uses css 3d transform. Flip effect currently works on WebKit browsers (e.g. Chrome, Safari, including iOS mobile safari) or Firefox 11. It still works with other browsers but the “slide” effect will be selected forecely.
The Google Map version 3 plugin for jQuery and jQM takes away some of the head aches from working with the Google Map API. Instead of having to use Google event listeners for simple events like click, you can use jQuery click events on the map and markers. It is also very flexible, highly customizable, lightweight (3.2kB or 3.9kB for the full) and works out of the box with jQuery mobile. But one of its best features (atleast for SEO people) is that you can populate a map from microformats, RDFa or microdata on your site, which can be used as a fallback when a user doesn’t have javascript enabled.
This is a jQuery Plugin that enables you to attach a function to a “Shake Event” for devices with iOS 4.2+
jQTouch is a jQuery plugin for mobile web development on forward-thinking devices. You can create powerful mobile apps with just HTML, CSS, and jQuery. It supports native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, G1, and Pre. jQTouch requires one basic theme to make page transitions work which is very small. One could use just the core CSS file to build a completely custom UI. Themes are additional CSS files which provide native-looking styles, mostly centered around the iPhone OS. Themes included are: Apple, jQT and Vanilla.
PhotoSwipe is a free and full-featured image gallery for mobile and touch devices. It is built with HTML, CSS + JavaScript and doesn’t depend on any frameworks. The interface is native-like and offers a similar experience with the ability of swiping items and support for orientation (also, resizes images automatically). PhotoSwipe works in iPhone, iPad, Android, Blackberry + desktop browsers and there is an optional jQuery implementation for the users of this framework.
Touch Gallery is a jQuery image gallery plugin which brings the native look and feel of native photo-viewing applications to the mobile browsers. It supports browsing through the images with gestures and also works with desktop browsers with limited functionality. The gallery depends on two other plugins: transform and activity-indicator where both is included in the download package.
| [jQuery] 15 JQuery Lightbox Plugins For Visually Enhancing Images (0) | 2013.11.28 |
|---|---|
| Best jQuery Plugins of the Week [17th November-23rd November] (0) | 2013.11.26 |
| [Bootstrap] 18 Essential Bootstrap UI Editors (0) | 2013.11.25 |
| [HTML5] Ionic: A hybrid mobile app framework (0) | 2013.11.25 |
| [javascript] microjs - a listing of small JS libraries (0) | 2013.11.18 |
http://mashable.com/2013/10/20/bootstrap-editors/
18 Essential Bootstrap UI Editors
Bootstrap has exploded since Twitter released it in 2011, becoming one of the most popular responsive frameworks available. It boasts an extensive library of pre-styled components, plugins and add-ons that make kickstarting your next web project a breeze.
There is no shortage of Bootstrap resources, but in this post, we will focus on the editing tools that allow you to customize the framework to suit your requirements.
We gathered 18 of the best free and paid Bootstrap editors, available online or as desktop tools, to help boost your web development productivity.
Are there any Bootstrap editors that you use and would recommend? If so, please share with our readers in the comments below.
Jetstrap is a web-based Javascript library for building rapid prototypes and applications with Bootstrap. It boasts a simple but extremely powerful interface with drag-and-drop functionality.
The workspace allows you to drop elements, customize them and then see a live preview, with the entire code neatly formatted. You can test on multiple device emulators within the workspace, easily export your code, and have your website up and running quickly.
Price: Basic plans start at $16 per month and go up to $99 per month.
Divshot allows for fast, visual front-end development, and works superbly with the most popular frameworks, including Bootstrap, Foundation and Ratchet. The included component libraries are completely customized for each framework, with the visual HTML editor supporting custom code, JavaScript, CoffeeScript, LESS and more.
The theme switcher is incredibly useful, meaning you can change the overall look of the entire theme with just a few clicks, or you can choose a custom option.
Price: Plans start at Free and go up to $300 per month for agencies.
Easel is an in-browser design tool to mock up and collaborate on projects, without shifting between your text editor and browser. It allows for rapid prototyping with the added ability of importing elements from your existing website.
If you already use Bootstrap, you can use Easel to create markup that you can drop directly into your site, or get started with Bootstrap quickly using the great collection of components. You can export either the entire document or just specific elements.
Price: Plans start at Free and go up to $99 per month for medium-sized teams.
Kickstrap is a front-end framework with the Bootstrap library bundled and layered, and you can decide which Bootstrap CSS and JS components to use as you develop. Since you never edit Bootstrap's code directly, you can keep its layers up-to-date without overwriting your existing code.
Kickstrap is ready to use "out of the box," so there is no installation or database required. This enables you to put Kickstrap right onto your server.
Price: Free
Bootstrap ThemeRoller is an intuitive web app for creating your own Bootstrap theme using a visual interface. You can customize the color, size, fonts, forms, buttons, tables, alerts, navigation bar, menus and more.
The appe generates a unique URL for every style you create, which saves your settings so you can pause and resume your customization where you left it. You can see your changes live and download the final theme in a single ZIP file.
Price: Free
Lavish is a Ruby on Rails application that generates a Bootstrap color scheme from an image, which you can customize to suit your requirements. Once you select an image, Lavish generates colors from the image for the body background, links, header, menu, tabs, text, dropdown and more. You can then swap these around until you're satisfied with the scheme, and then download the Boostrap.css file.
Price: Free
BootSwatchr is a visual tool, inspired by Bootswatch, for creating custom Bootstrap themes from the ground up. Just like Bootstrap it uses LESS to create dynamic, modular stylesheets to give you a live preview of the changes you make.
To get started, simply create a new BootSwatch and edit the variables you wish to change on the left. This will update the preview on the right. You can export in JSON format or download the full or minified CSS file.
Price: Free
LayoutIt! features a drag-and-drop interface for creating front-end code simply and quickly. It takes every element and component of Bootstrap to make coding easier, without needing to be an expert in JavaScript, HTML5 or CSS3.
It's easy to integrate LayoutIt! with any programming language; just download the HTML and start building the design into it. To begin, choose one of the base templates — starter, basic marketing or article — and being working on customizing the template as you see fit.
Price: Free
Using PaintStrap, you can generate beautiful Bootstrap themes with Adobe Kuler or COLOURLovers. To get started, input either the color scheme theme ID or a permalink URL, and then set the colors for corresponding elements such as text, navigation, buttons, background and links.
You can generate the resulting CSS as a ZIP of all the files, individually or as a theme. You can share your color scheme in the gallery or download another user's theme.
Price: Free
Pingendo is a visual desktop application to create prototypes of responsive websites based on the Bootstrap framework. You can start a project from the collection of ready-to-use layouts, drag elements into position, resize and customize, and insert your own content.
Using the Snippets CSS panel, you can insert new elements and drag and drop in the DOM structure, while previewing the changes you make instantaneously.
Price: Free
BootTheme allows you to create themes, mockups, websites and applications using the foundation of Bootstrap, with a drag-and-drop UI. You can instantly see your changes in the Live Preview panel, use In Place Editing to change the content in the preview panel and import Bootstrap variables.
You can also create your own personal collection of themes, templates and code snippets, and share your work through a unique URL. Projects are available to download in HTML, CSS and JavaScript.
Price: Plans start at Free and go up to $19 per month for the Pro Plan.
Bootply is a drag-and-drop visual editor to design, create prototypes and test the Bootstrap framework. It integrates well with other popular plugins, micro-libraries and frameworks, including FontAwesome, AngularJS, Isotope, jQuery and many others.
You can leverage the Bootply code repository to grab Bootstrap ready snippets, examples and templates. The active Bootply community makes it easy to discover, share and showcase code and snippets.
Price: Free
BootUI is a visual Bootstrap editor that doesn't require any HTML or CSS skills, and it features a diverse collection of responsive templates. It's easy to get started; just select a template and double-click to edit the content. It also works offline, has free updates and currently boasts 24 responsive template options.
The editor features real-time previews of the changes you make. If you require a specific Bootstrap template, simply email BootUI and the team will produce a responsive template to match your request at no extra cost.
Price: Free trial and $49.95 to purchase
Fancyboot is a simple but powerful customization tool for Bootstrap that allows you to edit Bootstrap installations and see live previews of your changes. You can select the plugins and components you want included, use the side menu and select the colors you wish to use.
Bootstrap includes extra variables that are not available in the official customization page. Once you have made your changes, you can download a ZIP file with the compiled and minified CSS, as well compiled jQuery plugins.
Price: Free
Bootstrap Live is a WYSIWYG editor for Bootstrap that offers a simple and elegant way to edit and beautify HTML, with Bootstrap-ready content and snippets. The HTML button allows you to open the default source view with code coloring and formatting.
The editor features advanced options including button configuration, custom tags, localization and more.
Price: Free
Bootstrap Magic is a Bootstrap theme generator using the latest Bootstrap 3 release and Angular JS. It provides a live preview of any changes as you make them, and includes variable importing, a color picker and smart typeahead. It also completely rebrands the framework to your own style.
Once you have customized your theme, you can instantly download it with personalized CSS and LESS variables in a minified version.
Price: Free
Style Bootstrap is an in-browser GUI utility to customize the Twitter Bootstrap look and feel. You can customize the body style, typography, buttons, navigation, forms, alerts and more. Once you've finished crafting your theme, you can download the generated CSS.
Price: Free
X-Editable provides in-place editing with Bootstrap, jQuery UI or pure jQuery, and the library allows you to create editable elements, including both "popup" and "inline" modes.
It boasts a wealth of features, including client-side and server-side validation, keyboard support, live events, customizable container placement and more. X-Editable provides faster development, easy adding and removing of fields, a simple backend script for data updates and is more convenient for small forms.
Price: Free
| Best jQuery Plugins of the Week [17th November-23rd November] (0) | 2013.11.26 |
|---|---|
| [jQuery] 15 jQuery Mobile Plugins for Mobile Devices (0) | 2013.11.25 |
| [HTML5] Ionic: A hybrid mobile app framework (0) | 2013.11.25 |
| [javascript] microjs - a listing of small JS libraries (0) | 2013.11.18 |
| component module list - all the components (0) | 2013.11.18 |
For the best info on Ionic, check out our great documentation page!
Note: Ionic currently best supports iOS 6+. Android support is okay but not great, but we are working to make Android kick ass in the coming weeks, so please let us know if you run into Android issues!
Ionic is the open source HTML5 Mobile Framework for building amazing, cross-platform native apps with HTML, JavaScript, and CSS.
We built Ionic because we wanted a framework that focused on building hybrid native apps, rather than mobile websites. We wanted this framework to be obsessive about great design and performance. A framework that left the past behind and focused on the future where mobile devices could make HTML5 feel native.
It's important to realize that Ionic is not a replacement for frameworks used for building mobile web apps. There are a lot of great solutions that work well for websites, like jQuery Mobile.
Ionic is also not a good solution if you need to support older generation devices. Our compatibility starts at iOS 6 and Android 4.1. We will never support versions earlier than those. This is a framework for the future.
Ionic is a front-end framework for developing hybrid mobile apps with HTML5, CSS, and JavaScript. It’s fast, uses AngularJS, and it’s beautifully designed with a focus on Native features.
| [jQuery] 15 jQuery Mobile Plugins for Mobile Devices (0) | 2013.11.25 |
|---|---|
| [Bootstrap] 18 Essential Bootstrap UI Editors (0) | 2013.11.25 |
| [javascript] microjs - a listing of small JS libraries (0) | 2013.11.18 |
| component module list - all the components (0) | 2013.11.18 |
| [jQuery] rlightbox – a jQuery UI mediabox (0) | 2013.11.14 |
| 방 청소 (0) | 2013.11.27 |
|---|---|
| 가난해서 춤을 추었다 (0) | 2013.11.26 |
| 겁먹지 말아라 (0) | 2013.11.23 |
| 구경꾼 (0) | 2013.11.22 |
| 부모가 찌르는 비수 (0) | 2013.11.21 |
만일 지금 성실하게 일하는 것밖에 내세울 것이 없다고 한탄하고 있다면
그 우직함이야말로 가장 감사해야 할 능력이라고 말하고 싶다.
천재나 위인이라고 불리는 사람들은
지속의 힘을 깨닫고 그것을 자기화한 사람들이다.
제아무리 위대한 업적도
사소한 것들을 착실하게 쌓는 데에서부터 출발한다.
- 이나모리 가즈오, ‘왜 일하는가’에서
지루한 일을 지속적으로 해나가는 힘,
그것은 평범한 사람을 비범한 사람으로 바꿀 정도로
무한한 파워를 가지고 있습니다.
하루하루의 더딘 걸음이야말로
진정한 창조와 성공을 낳게 됩니다.
| 관계의 달인이 되는 법 (0) | 2013.11.27 |
|---|---|
| 창의성의 원동력은 두려움이다. (0) | 2013.11.26 |
| 한 바구니에 모든 달걀을 담아라. (0) | 2013.11.22 |
| 투입의 양이 아닌 산출의 양과 질이 곧 일이다 (0) | 2013.11.21 |
| 세상은 거울이다. (0) | 2013.11.20 |
