긍정적 사고, 음식의 절제, 규칙적인 운동

HelloWorld 블로그 반응형 웹 개편

http://helloworld.naver.com/helloworld/81480

http://www.firepad.io/

http://www.firepad.io/docs/

GitHub: https://github.com/firebase/firepad

오픈소스 실시간 협업 텍스트 에디터.

ot.js 의 Operational-Transform 활용. Firebase 를 이용해서 특별한 서버는 필요없음.

The answer is simple – Responsive Web Design

For those who are totally new to the concept, Responsive Web Design is a design technique that thoroughly focuses on a user’s environment and behavior based on the orientation and size of his screen as well as the platform. This methodology integrates a blend of cleverly laid out grids and images combined with the smart usage of CSS Media Queries. What happens is that, when a user switches from his desktop or laptop screen to his iPad or iPhone, the website will automatically itself to fit the device’s screen.

In a nutshell, you could say you are empowering a website with a kind of artificial intelligence which lets it respond to the user’s environment. Responsive Web Design has gained tremendous popularity in the Web Design World as it eliminates the need of having different development and design phases for every different gadget in the Industry.

So if you are looking for inspiration for your next website, you should look at these fresh and stylish responsive design layouts (in no particular order) which cover a wide range of companies and design strategies. Here, we will focus on the mobile side of these responsive websites and try to take a look at what practices make these websites an inspiration to everyone who’s looking to transform their web design to function across multiple platforms and devices.

1. Sony

Sony manages to get everything right in their elegantly designed website. My favorite part of their responsive design approach was seeing the way their navigation bars change when switching from desktop to mobile devices. On a mobile device, the main navigation menu will change places with the social media buttons. The menus also compact themselves into a single drop down button where the different pages can be accessed easily.

2. Starbucks

Starbucks is unarguably one of the biggest retailers in the world and it was one of the first to make the jump to responsive web design. The minute you switch to mobile from desktop on this website, you get the feeling that they have a sizable team with a substantial budget working on the transformation. The first noticeable thing was that the initial breakpoint arrives at the 769px mark (I assume this has been done to accommodate the portrait orientation of tablets). The best thing about the design is that the navigation adapts itself automatically across different breakpoints. For example, at the largest breakpoint, the top level menu allows you to jump across two levels of navigation for viewing a page.

3. Aids.gov

Aids.gov‘s website is probably the first US government website that has made the switch to responsive web design. I noticed that they use the HTML5 doctype without the use of any additional HTML5 elements like articles, headers or sections. Specific attention has been paid to the website for how it is viewed by users on Windows IE Mobile 7. Aids.gov employs the standard responsive web design approach as the website was redesigned from scratch. The theory lies in working with the smallest screen size and resolution first and then building up the additional required CSS code as the breakpoints are increased. Responsive images have been incorporated to make the website more visually appealing with special emphasis on how the script dynamically recalculates the appropriate height and width of each image based on the screen size.

4. Dairy Queen

If you want to feast your eyes on one of the most perfect examples of responsive web design, head over to the Dairy Queen’s official website. One of the best things about the design is the fluid slider motion for mobile devices. There is a strong emphasis on how visible the content is to users across multiple devices and screen sizes. The main navigation menu wraps up into a smart drop down box at the first breakpoint allowing users to easily navigate the different food categories. All in all, the website is a visual treat and a perfect execution of elegant and efficient responsive web design.

5. Alsacreations

This is one website that has taken a different responsive web design approach than most websites present on the Internet. Alsacreations doesn’t worry about maintaining all their elements and aspects of their desktop website when a reader switches to tablet or mobile. Instead, Alsacreations drops their image slider from widescreen display to square and even more, when the readers switch to mobile they will not be able to see any of the original elements except for the About button and the Email form in addition to the links for all other elements. This has been done keeping the views of the specific target audience in mind where the creators have kept in mind that most users opening websites from their mobile devices do it to get the brief company information only.

6. Gravitate

It wouldn’t be fitting to have a design studio website without responsive website design on their own page, right? Even if you are a lone freelancer, you would want your website to reflect your design skills and portfolio and this is exactly the approach that Gravitate Design Studio has incorporated into their website. They have kept and simple yet elegant design without going over the top on borders or shadowing or other flashy elements. The menu buttons on the top compact and nicely re-arrange themselves when you switch to mobile giving users to access to every page on the website.

7. Spigot

This is another web design and development company that has flawlessly perfected the art of responsive web design for their website. Going through the pages, you cannot deny the fact that the entire layout has been designed to work without any errors on desktop and mobile devices. You would expect that the shifting and animated icons would lose their touch on mobile devices, but this is not the case with Spigot. Although it would have been difficult to make this design work across all devices yet they have pulled it off magnificently setting a truly inspiring example for others in the field.

8. Disney

Entertainment giants Disney have a website which is a perfect example of coherent designing across all devices and platforms. Smaller resolution doesn’t necessarily mean that you have to compromise on content. The beauty of this responsive design is that the focus stays always on the content that matters. Photos and Videos are the main focus of attention whether you open it on a mobile device, tablet or your PC. However the only drawback from usability point of view on mobile devices is that the navigation doesn’t have direct access in mobile version and you have to make up for it with an extra click.

9. Food Sense

Another excellent example of sharp responsive web design techniques is Food Sense. It uses wide screen resolutions to the maximum but when limited by width on mobile devices, it adjusts brilliantly by managing to still maintain its smooth flow and tidy outlook. However, one drawback I noticed with the Mobile version was the loss of the latest Tweets and Facebook plugin which can be seen on the full version under the navigation bar on the side column.

10. Skinny Ties

There is no better definition of perfect responsive web design execution than Skinny Ties. The design is even more impressive considering that it was a complex website – an ecommerce one. You will find a unique navigation experience across all breakpoints and viewpoint resolutions but the best thing about is its exceptionally responsive handling on mobile devices. Despite the use of the hovering function on touch devices, all visual aspects remain intact.

11. Coca Cola

Soft Drinks giant Coca-Cola made their entry into the fast changing web design world with one of the most complicated responsive web designs I have come across so far. One of the noticeable features is how the content boxes on the right hand side automatically align themselves below the slider so the user has no viewing problems. One drawback I came across however was some minor bugs with the navigation on 240×480 portrait screens.

12. Clean Air Challenge

First thing you notice about Clean Air Challenge are the moving clouds in the background. Like many, I expected the website to lose this animation on mobile devices, but amazingly the animation stays smooth and balanced. In addition to that, the website intelligently transforms into a vertical format while still maintaining its other aesthetic elements for example you will lose the images of the main navigation icons when you move to your mobile device but when you scroll down, they will be visible to you in the footer.

13. Contents Magazine

Contents Magazine gives one of the best illustrations of how effective responsive web designing can keep the content of the website at the center and front at all times – regardless of the device or platform used. The designers have managed to create a near perfect design where the pre-issued illustrations dynamically wrap around depending on the different breakpoints. The best thing about the design is that a reader will find genuine pleasure in reading the various content on his mobile site as the responsive images adjust themselves and never act as a distraction.

14. Crayola

Crayola gives us a perfect example of how cleverly used responsive web design can lead to navigation and content being scaled down for users operating a mobile device. When you look at the desktop version, the website has loads of tabs for navigation but when you switch to a mobile device, you get to see only the important ones whereas a user-friendly accordion pops up to accommodate the main navigation bar.

15. Time

In this day and age, it has become essential for every news site to have a responsive web design since they have to cater to the needs of a large population of their readers who want access to all the latest news and stories on the go. Time gives us an example of a minimalistic responsive web design approach while at the same time it sets an example for other News websites and companies on how to design grids and menus for easy viewing on a mobile device.

16. Smashing Magazine

Smashing Magazine sets the example for absolutely perfect responsive web designing where they demonstrate how the original design and content of a website does not need to be sacrificed on mobile devices. The developers of this website have paid attention to accommodating virtually every single screen size and resolution. One of the best things about viewing this website in your mobile device is that the ads simply disappear. The left side bar and the main navigation bar all wrap up into a drop down menu giving a mobile user easy accessibility to all pages of the site. One drawback is the absence of the social media buttons and the RSS feeds subscription button which are only visible in the desktop version.

17. Polygon

Polygon stands out from the rest of the crowd in the Gaming websites industry combining stunning artwork and responsive web design architecture for a superb display across desktop and mobile devices. But one very obvious drawback is that the social media buttons disappear when you switch from desktop to mobile.

18. Ableton

Even if you have a relatively heavy sight, Abelton demonstrates that with intelligently written code, you can still deliver a vibrant color combination with a mix of bold imagery across all platforms and devices. With the need to incorporate both video and music, Abelton have managed to do keep the focus on the content while making sure the design is not sacrificed.

19. Burton

Although Snowboard retail giant Burton have incorporated responsive web design nicely for most elements of their page, there is still a lot left to be desired. For instance, the main menu navigation bar on a mobile device is nothing but a simple drop down button. The Board Finder tool is also missing which would have been a great feature for customers who are on the go and who want to find the perfect snowboard for themselves.

20. Abduzeedo

Although Abduzeedo has a lot going on for itself on the Desktop, it doesn’t quite live up to the same expectations on a Mobile device. For starters, the posts automatically align themselves on the grid which makes them look clustered and improper. Regarding the sticky navigation on the Desktop, it has become more of a trend these days although there are two different opinions regarding this.

75+ Mobile App Development Tutorials – Start Your App Success Today!

Mobile app development is big business and one of the areas of opportunities for creative individuals and small teams of developers to make a stand. It may take several attempts to design and implement a blockbuster App; however, if your App hit the top charts of e.g. Apple App Store your opportunities are amazing.

Apps are simply defined small software programs executed on mobile devices such as iPads, Android smartphones etc. Apps are often designed with a very specific and simplified set of functions and to be easy to use on small screens and everyone seems to love downloading tons off Apps. Just check out this collection of mobile stats to get an idea of the popularity and opportunities related to App development. Some of the numbers are from 2012, but 400 million accounts in Apple App Store and $5 billion in payouts to App developers sounds like sweat music for anyone with a development talent.

So how do you get started? First, you need to choose the target platform and architecture to use. I have previously described the different App architectures in an article at LinkedIn that you may want to check out. Please note that you may choose to develop hybrid and cross device compatible Apps, but often these may not be as powerful as native Apps for e.h. iOS or Android.

To help you get started with the decision and learning process, I have collected some of the best tutorials available free online and categorized them into the following sections: iOS, Android and Hybrid App and App-framework tutorials.

iOS App tutorials

How to Make an HTML5 iPhone App – MORE INFO

This iPhone 5 app development tutorial will show you how to create an offline HTML5 iPhone application. More specifically it will walk you through the process of building a Tetris game.

How To Create Your First iPhone App (2012 Edition) – MORE INFO

The first thing to look at when embarking on any product development or entrepreneurial venture is your goals for the project.

User interface design for iPhone apps – MORE INFO

Designing for iOS4 devices is totally different from designing for the web. Sarah Parmenter explains how to create the perfect user interface for your app

How to Prototype Web and Mobile Apps in 30 Minutes – MORE INFO

A crash course on designing and testing interactive user interfaces using Apple Keynote or Microsoft Powerpoint + Keynotopia User Interface Libraries.

Beginner’s Guide To IOS Development: The Interface – Part I – MORE INFO

The good news is, iPhone application development is not as hard as you might think, and this post exists as a comprehensive guide to walk you through the complete process of building an application for iPhone.

Getting Started with iPhone Development – MORE INFO

In this article we take a look at the tools involved and go through the main steps in getting your first “Hello World!” iPhone app off the ground.

Design an iOS interface – MORE INFO

The main functions of the radio app that we’re going to look at here are the ‘browser’, which enables users to browse through different radio stations; and the ‘player’

Build an iPhone arcade game – MORE INFO

Hello Monday walks you through how to turn a rejected concept into a GPS-based arcade game

Get started with geofencing on iOS – MORE INFO

Explore the location-based services provided by the iOS Core Location framework in Kevin McMahon’s guide to building and testing a geofencing-enabled application

Design a photorealistic app icon in Photoshop – MORE INFO

Roman Jusdado reveals how to use Photoshop’s layer styles to create an Instagram-esque iOS icon from scratch

How To Create A Simple iPhone App on iOS 5 Tutorial: Part 1/3 – MORE INFO

Create an entire functional app from scratch. By the end, you’ll have tried out many areas of iPhone development, and ready to dig in further.

Create an explosive iPad game – MORE INFO

Appcelerator Titanium is a fantastically versatile tool for creating mobile apps, as Anton Mills demonstrates with this game for the iPad.

Building a Caterpillar Game with Cocos2D: Introduction – MORE INFO

Recreating the popular Atari game Centipede using the Cocos2D game engine for iOS. Centipede was originally developed for Atari and released on the Arcade in 1980.

Design an iPad app UI – MORE INFO

Apposing’s Dave Brown reveals how to prototype a user interface for an iPad app in Photoshop

Get started as an iOS developer – MORE INFO

Got an idea for a killer app but don’t know where to begin? Daniel Bramhall of Visioa explains everything you need to know to start programming for Apple devices

Build an iPad app with Sencha Touch – MORE INFO

Create a web app that feels native on the iPad and other mobile devices, using the Sencha Touch library. Robert Douglas of mobile design specialists ribot explains how

Getting Started Building iPhone Apps in Xcode 4.2 – MORE INFO

The newest version of Xcode comes packaged with a few noticeable interface changes. For beginners and intermediate users it can be difficult figuring out even the most basic functionality.

Preparing an application for distribution – MORE INFO

Creating an application can be extremely exciting for any developer but before you get your application published, you need to get it ready. iOS and Mac developer/designer Daniel Bramhall explains how

iOS Newsstand Tutorial – MORE INFO

A new way to distribute magazines

iOS SDK: Send E-mail In-App – MORE INFO

Demonstrate how to allow your users to send e-mail without leaving your application using the MFMailComposeViewController class.

iPhone Programming Tutorial – Local Notifications – MORE INFO

Push notifications solved many of the issues associated with background processing.

Showing an Alert in iPhone – MORE INFO

In this blog, we’ll see how to show an alert.

Simple iPhone app development tutorial – MORE INFO

This tutorial will help you create a simple app. The app will not do anything special but it will implement stuff inorder to make simple stuff.

Learn How To Develop For The iPhone – MORE INFO

How to build an alternate page and style sheet for the iPhone and iTouch. We will cover how to detect if the user is using an iPhone to view your page as well as the orientation of the device – whether it be landscape or portrait.

Introduction to iPhone SDK Development – MORE INFO

This tutorial looks at development with the iPhone SDK. You will learn information about the iPhone platform, how to setup and configure your development environment, and the steps necessary to create a simple fortune cookie application!

Design & Build a Small Business App: Project Setup – MORE INFO

In this three part tutorial series, it will show you how to design and build a small business app from scratch.

Building a Hangman iPad App with Flash – Programming Gameplay – MORE INFO

This tutorial will focus on the ActionScript and game logic necessary to actually program hangman

Importing & Exporting Documents in iOS – MORE INFO

This article will walk you through the different techniques you can employ to allow documents to be imported or exported from your iOS application

SMS Bubble UI in iPhone Apps – MORE INFO

This article will walk you through the steps to create an UI that is similar to the SMS application.

EmailSend Application in iPhone – MORE INFO

In this application we will see how to Email Send in iPhone. So let see how it will worked.

Design & Build a 1980s iOS Phone App: Design the Contacts Screen – MORE INFO

Application will function much like the default iPhone version with one very important aesthetic twist: our design is inspired by the 1980s.

ImageClick Application in iPhone – MORE INFO

In this application we will see how to image capture in iPhone without using camera. So let see how it will worked.

Android App tutorials

Google Maps Android API v2 – Tutorial – MORE INFO

This tutorial describes the usage of Google Maps in your Android application. It is based on Eclipse 4.2, Java 1.6 and Android 4.2.

Android SDK Tutorial – Learn how to install Android SDK – MORE INFO

This page describes how to install the Android SDK and set up your development environment for the first time.

Android Development For Absolute Beginners – MORE INFO

Videos for Android development for beginners.

Android Application Development Tutorial – 4 – MORE INFO

Setting up an Android project

ICanLocalize – Android Localization Tutorial – MORE INFO

In this tutorial we show how to write multilingual Android apps.

Android Sample Apps – MORE INFO

The Android SDK includes many sample apps that can help you learn Android by inspecting how different APIs are used to build a mobile application.

Android Google Maps Tutorial – MORE INFO

The Android platform provides easy and tight integration between Android applications and Google Maps.

Android Application Development Tutorial – 13 – MORE INFO

Introduction to Android manifest

User interface design for Android apps – MORE INFO

Android apps can be just as beautiful as their iOS counterparts. Richard Leggett, co-director of Bitmode Ltd, digs deep into the styling and theming and explains how to use just XML and image files to add a fresh look and feel to your app

Getting Started with Android Development – MORE INFO

In this inaugural article of the Android series, it will get you started with Android development without requiring you to wade through pages of technical documentation.

Making Android apps voice output accessible – MORE INFO

Integrating core accessibility into Android app development is relatively straightforward to do and should be considered as business as usual for every project

Mobile HTML5: PhoneGap vs Appcelerator Titanium – MORE INFO

PhoneGap and Appcelerator Titanium are both very popular open-source JavaScript frameworks for packaging and deploying mobile applications.

Getting To Know The Android Platform: Building, Testing And Distributing Apps – MORE INFO

The number of apps for iOS grew exponentially, and every company, big and small, rushed to create their own app to support their business.

Android Text-To-Speech Application – MORE INFO

In this tutorial will going to show you how to quickly introduce TTS capabilities into your application.

Discover Facebook’s developer tools – MORE INFO

Techlightenment’s systems architect Chas Coppard gives us a rundown of the APIs and plug-ins available to connect your site to Facebook

How to build an Android app – MORE INFO

Two ways to create simple applications for Android

PhoneGap Tutorial Series – #6 Writing Your Own Plugin – MORE INFO

Creating your own PhoneGap plugin for iOS development.

Android Bootcamp Series 2012 Video Tutorials – MORE INFO

Back by popular demand and updated for Android 4.0 (Ice Cream Sandwich), Marakana is excited to bring you Android Bootcamp 2012.

Build a Facebook Open Graph app – MORE INFO

Facebook recently unveiled the Open Graph as its next generation platform. Mat Clayton shows you how to build a simple demo app on the Open Graph

Automate your Android app testing – MORE INFO

Don’t trust humans to do all of your testing – not even experts. John Senner, Koa Metter and Emory Myers of MokaSocial reveal how to delegate the dirty work

Android Application Development Tutorial – 17 – MORE INFO

Adding music with media player

Write and Publish an app for your Android Smartphone – MORE INFO

Will walk you through the tedious process of writing your first app on the Android cellphone.

Android Full App, Part 8: Creating an AppWidget for the home screen – MORE INFO

This is the eight part of the “Android Full Application Tutorial” series. The complete application aims to provide an easy way of performing movies/actors searching over the internet.

Android Application Development Tutorial – 47 – MORE INFO

Passing a string between activities

Hybrid App and App-framework tutorials and resources

Get Started with Hybrid Application Frameworks – MORE INFO

This wiki page will give an overview of what hybrid applications are, what tools and frameworks are out there to help create them, and some teasers for upcoming examples if you wanted to get involved.

Mobile Frameworks Comparison Chart – MORE INFO

Looking for the right mobile framework? Compare all major mobile frameworks and choose the one that fits best.

App Framework Cookbook – MORE INFO

This cookbook presents fundamental App Framework concepts and features, by way of example, to give you the practical knowledge needed to begin creating more sophisticated applications for your domain.

PhoneGap From Scratch: Introduction – MORE INFO

Want to learn how to use PhoneGap, but don’t know where to get started? Join us as we put together “Sculder”, not only a tribute to an excellent science fiction TV series, but a fully-fledged native mobile application for the believer in you!

Getting Started with PhoneGap and PhoneGap Build – MORE INFO

Are you brand new to PhoneGap? Where do you start? What about PhoneGap Build? There are a ton of resources out there and I’ve pulled it all together to help you get started, get some tips, and figure out where to get help.

Getting started with PhoneGap – MORE INFO

In this excerpt from the PhoneGap Beginner’s Guide, Nitobi/Adobe’s Andrew Lunny goes over the biggest roadblock developers find with the mobile development framework: getting started and building simple apps for iOS, Android and BlackBerry

Build a game for iOS and Android with Corona – MORE INFO

Jonathan Beebe of Ansca, Inc explains how to easily create a fun 2D physics game for iOS and Android mobile platforms using the Corona SDK

Introduction to PhoneGap Development – MORE INFO

PhoneGap is an open source framework for building cross-platform mobile applications with HTML, CSS, and JavaScript.

Create cross-platform games with GameMaker: Studio – MORE INFO

Make simple games without code and learn to program as you go along. Gavin Smart introduces GameMaker: Studio

Two-Minute Tutorial 1 Part 1 – MORE INFO

This Two-Minute Tutorial (TMT1 Part1) shows how to use AppLaud and the PhoneGap Media API to play an audio file, and use jQuery Mobile for a simple UI using buttons and updated text display. It also shows two ways to access the audio file: as a url, and locally (from the device) using the project’s /assets folder.

Code a real-time survey with HTML5 WebSockets – MORE INFO

Phil Leggetter explains how to use WebSockets and Pusher to build a demo application, plus how to layer a user experience on to an app using progressive enhancement

PhoneGap basics: What it is and what it can do for mobile developers – MORE INFO

Joe Bowser on using PhoneGap to develop across mobile platforms.

PhoneGap Tutorial Series – #1 Project Structure and Internals – MORE INFO

PhoneGap is an open source framework for writing applications using typical web technologies like HTML, CSS, and javascript.

Build a login form for your mobile app with DHTMLX Touch – MORE INFO

In this introduction to open source JavaScript framework DHTMLX Touch web developer Alexandra Klenova explains how you can implement a login form for a mobile web app and send form values to the server with Ajax

Create a custom theme in jQuery Mobile – MORE INFO

We present an exclusive excerpt from jQuery Mobile Web Development Essentials, on the basics of theming and building and using a custom theme for your app

Developing Better PhoneGap Apps – MORE INFO

If you’ve started researching what it would take to get from mobile web to native app, you’ve likely come across PhoneGap—a framework allowing you to wrap a mobile web app and deploy it as if it were written natively.

Styling the user interface of a Sencha Touch application – MORE INFO

In this exclusive excerpt from their book on the Sencha Touch mobile JavaScript framework, John Clark and Bryan Johnson explain how to customise your app and use the Sencha theme engine with SASS and Compass

Tutorial – building a Phonegap app – MORE INFO

PhoneGap is an open-source framework for quickly building cross-platform mobile apps using HTML and JS. It is used for building something called hybrid apps which are a mix between native smartphone apps and web apps.

Hook into native events with PhoneGap – MORE INFO

Develop cross-platform apps with web standards: Matt Gifford introduces PhoneGap

Tagged as: android developement, android tutorials, app developement, app developement tutorials, app tutorials, ios developement, ios tutorials, Tutorials

http://jsfiddle.net/jasongennaro/pdXRx/8/

fiddle , jsfiddle

페이지 로드시 해당 영역에 텍스트를 입력하고, 글자색을 회색으로 변경.

해당 영역에 포커스가 오면 글자 삭제.

해당 영역 blur시 입력된 글자가 없으면 다시 placeholer에 넣을 글자 입력.

$('textarea').attr('value', 'This is a line \nthis should');

$('textarea').focus(function(){
    $(this).attr('value', '');
});

$('textarea').blur(function(){
    if($(this).val() ==''){
        $(this).attr('value', 'This is a line \nthis');
    }   
});