Placed in: Home arrow Programming arrow Webdesign comprar viagra en espaƱa
comprar viagra online
comprar viagra generico barato
comprar cialis generico online
comprar cialis online seguro
Webdesign
Build native-looking apps for iOS

Lately, I've been messing around with cool HTML5 stuff a lot. One of the things that HTML5 is trying to reach, is the market of mobile devices. A long time ago (when I got my first iPhone), I wrote an article on how to add a webclip for easy access to your website. But since then, I've learned a couple of more things on how to build native-looking apps for iOS using only HTML.

iOS HTML Template

I've created a template/boilerplate that you can use for your next project to create native looking apps for iOS (more specifically: Mobile Safari) using nothing but HTML. Simply build your website starting with this template, bookmark it and you're done.

View or download the source code and read the comments carefully to see what's needed to create a native looking app using only HTML.

Demo iOS HTML Template   Download iOS HTML Template

If you don't feel like fully digging into the source, but learn the pieces bit by bit, feel free to read on further. Take note that this will only work when the user bookmarks your webpage. The changes to any existing projects can be made easily, just make the following changes in the head section of your page and you're ready to go!


Tags:  ios iphone ipad native html
 
Working with Websockets

HTML5 has some extremely cool features, and a couple of weeks ago I took a deep dive into Websockets. This protocol, which you can recognize by the ws:// and wss:// (secure websockets) URL prefix, enables "Server side push events".

Working with Websockets

During my deep dive, I learned a couple of things that are pretty interesting. If you're into/learning HTML5, you really should try out Websockets! In my opinion, it's one of the coolest technologies they've added. Are you ready to dive and learn more about Websockets? Here are a couple of things to keep in mind when working with Websockets.


Tags:  html5 websockets connectivity tips
 
jQuery quickie: Unlimited Scroll using the Twitter API

Time for another relatively simple jQuery tutorial, just like my previous jQuery quickie. At work, I'm currently working with Silverlight and implemented unlimited scroll. This is a great technique that could be used on loads of websites. Instead of the regular pagination, where the user has to click to see the next page, unlimited scroll automatically loads the next page when the user is at the bottom.

I wanted to take this technique and port it to another jQuery example. So the quickie for today is Unlimited scroll using jQuery. I've using the Twitter API to make the example, so you'll learn a little bit about JSON too.

Unlimited Scroll using the Twitter API

Simply check out the demo to see the first tweets from my Twitter stream. Scroll down to load more tweets and see the unlimited scroll in action.

Demo Unlimited Scroll using the Twitter API   Download Unlimited Scroll using the Twitter API

Of course, you can use this same technique for something else instead of loading tweets, for example for loading next blog posts etc. Now, let's take a look at how you can create this Twitter example.


Tags:  scroll twitter jquery tutorial simple
 
jHTML-Ipsum: HTML Ipsum using a jQuery plugin

Most webdesigners/developers know what Lorem Ipsum is. For those who don't, it's simply dummy text of the printing and typesetting industry. Although I hardly use it myself (others think it's killing your designs), I still think the idea behind it is pretty good. Chris Coyier took this idea to a whole new level and created HTML-Ipsum. You can copy HTML elements to your own project to see if you've styled all the elements in a proper way.

There is just one thing which bugged me for a long time about Lorem Ipsum. When you copied all the text (or HTML), style it etc., you'll need to remove everything afterwards. When you created loads of different pages, it might take a while to find all your Ipsum traces. Because of that, I created jHTML-Ipsum: a jQuery HTML Ipsum plugin.

jHTML-Ipsum: HTML Ipsum using a jQuery plugin

Simply set your selector and let jHTML-Ipsum do his work. It dynamically creates all the HTML elements so you can see if all your CSS works in a proper way. Using various parameters, you can set how the plugin behaves and see which elements it should create.

Demo jHTML-Ipsum   Download jHTML-Ipsum

When you fully designed your website, you simply delete the plugin and you don't need to delete or change the individual pages. Read below how you can install the plugin and which options you can set.


Tags:  jhtml-ipsum html ipsum jquery plugin
 
Nostalgia: Dragging the Windows XP error dialog

Remember the "good old days" when you were still using Windows XP? If so, I'm pretty sure you remember the loads of error dialogs that would pop up at a totally random time. Although these dialogs always show up at a bad time, you could do something pretty neat with them. Drag the window around and it would duplicate itself over and over!

Sadly, I haven't seen this effect alive in Windows 7, so to keep those memories alive for XP, I re-created the effect using HTML/CSS with jQuery and jQuery UI.

Dragging the Windows XP error dialog

Simply check out the demo to see if you can remember how it would look like. Be creative and fill up the screen with some beautiful error dialogs.

Demo Dragging the Windows XP error dialog   Download Dragging the Windows XP error dialog

I hope you understand that I'm pretty sarcastic; I don't like these kind of error messages that would make your PC crash. Yet, I wanted to give it a try to bring this effect to your browser. Now let's see on how you can create this fantastic effect yourself!


Tags:  windows xp error nostalgia jquery fun
 
jQuery DJ Hero - CSS3 and jQuery fun

Remember jTypingHero? This was a fun little game to test your typing skills based on the ever popular Guitar Hero. Lately, I came across some news about a new "Hero" game: DJ Hero. Since I really love Proof of Concepts/experimenting, I wanted to bring the vinyl to the browser. That's why I present to you: jQuery DJ Hero.

By combining CSS3 and jQuery, I created two records that you can start spinning (faster and slower) and even scratching is enabled. In a future version, this could be used together with some real sound (this version has no sound).

jQuery DJ Hero - CSS3 and jQuery fun

To achieve the desired effect, I made use of jQuery, Animate CSS Rotation and Scale jQuery Patch and the jQuery Easing library. The picture of the vinyl has been taken from stock.xchng.

Demo jQuery DJ Hero - CSS3 and jQuery fun   Download jQuery DJ Hero - CSS3 and jQuery fun

Since we're using CSS3's transform property (to rotate the vinyls), this example only works in browsers that support CSS3 (Currently, the latest versions of Safari, Firefox and Chrome support this). I've added a video for those people that don't use those browsers and still want to see how the effect looks like. Make sure to check out the demo and let's see how you can create that yourself.


Tags:  dj jquery css3 proof of concept experiment webdevelopment
 
<< Start < Prev 1 2 3 4 5 6 7 Next > End >>

Results 1 - 6 of 37