Archives For html5

I’m sure many of you have some crazy or not so crazy video game ideas in your head. Most of these ideas don’t become real games because people think making games is something very complicated. It is, to be 100% honest with you, true up to a certain extent, but it’s not as hard as you think.

If you have basic knowledge of of HTML, CSS and JavaScript you have all you need to get started with simple game projects. There is an awesome Open Source HTML5 game development framework called LimeJS which allows you to create mobile games that work well on any HTML5 supporting device (desktop, phones, tabets, tvs..) and support touch screen from day one. Using LimeJS, if you get your hands a bit dirty with some coding for a couple of hours you can get closed to making that crazy game idea, a reality.

Continue Reading…

jQuery Mobile 1.3 has a great new feature called panels. Panels are very common in native iOS applications and most commonly seen on YouTube and Facebook apps. jQuery Mobile panels are extremely simple to use but there are a few things to be remembered when working with panels. Follow along below, or watch the video to learn how to use jQuery Mobile panels.

Continue Reading…

Responsive design is awesome because it allows a web designer to design for any screen size including, but not limited to, mobile, tablet, TV, computer and the 400 different tablet/mobile screen sizes. The core of responsive design is really media queries, but it’s still an art. Below is a list of ten resources that will help you start learning responsive web design. Even if you’re not a web designer, you need to know how to use and modify code that is built responsive.

First, get started by understanding The Possibilities and Restrictions of Responsive Web Design.

Continue Reading…

Pinehead.tv is hosting a jQuery Mobile For Newbies seminar on August 18, 2012, 10am central time. This seminar is a live seminar which encourages user interaction. It will allow you to ask questions, and participate as you choose. Only 10 seats are available, so register now to ensure your spot!

Learn to build web apps using the rapid development jQuery Mobile framework.
The internet is going mobile and jQuery Mobile allows you to develop for the web and native apps for the iPhone and Android operating systems!
Anybody can learn jQuery Mobile as long as you have a computer and internet connection!
Course video and docs available for download after session.

Learn Through Building!

Sign up for our interactive webinar and build a webapp from scratch using the following concepts:


Continue Reading…

There is a rather large difference between a jQuery Mobile (or HTML5, appMobi, sencha etc) web app and using those same technologies in PhoneGap to create a native app. The main difference is how the code interacts when built directly on a server and run in a web browser versus running directly on the user’s device. By definition, a mobile web app is a remote site that runs off a web server at all times. That allows us to easily use programming languages such as PHP, Ruby and Python to create them. Using those languages, we can perform easy functions such as creating contact forms and sending mail directly from the server.

However, when you package your web app into PhoneGap you have to build your code with HTML5/CSS3/JavaScript and you cannot use server side programming languages such as PHP. The other difference is when an action is ran on PhoneGap it is native/local to your device, meaning the device doesn’t have to be connected to the internet.
Continue Reading…

PhoneGap is a wrapper type application that allows you to package HTML5/CSS3 Web Apps inside of a native app. This is a great feature because it gives you the ability to distribute your app via the app stores and have a so called “native app” without having to learn Java and Objective-C to code in the operating system native languages.
Continue Reading…

HTML5 has been evolving super fast. Not only that, Apple, the driving force (and owner) of webkit, has been making changes as well. In IOS 4.0 a tag called x-webkit-airplay was needed in order to give controls to the video to airplay stream to an Apple TV.

The exact command needed was x-webkit-airplay=”allow”. By default the x-webkit-airplay was actually set to “disallow.” If you wanted your video to have the ability to use AirPlay and stream to an Apple TV you needed to turn it on or “allow” it with the x-webkit-airplay parameter. However, this changed in IOS 5.0. Apple changed the default behavior of x-webkit-airplay to be x-webkit-airplay=”allow.”

So by default if you’re using the video HTML5 tag it will be able to use AirPlay and stream to an Apple TV. You only need to worry about the parameter x-webkit-ariplay if you want to set x-webkit-airplay=”disallow” and not allow streaming over AirPlay to an Apple TV.

1. FitText.js

The first one I’d like to discuss is a JavaScript plugin that makes font sizes flexible. It’s called FitText and is pretty simple to use. You can download it, for free, on github. In the zip file you’ll find 3 files: a readme file, the actual JavaScript file and an example.

Like I said, it’s fairly easy to use. If you open the example, you’ll see that the headers (h1) all got an id. It’s these parts that will be resized when you resize the window. Their are a couple of things you have to pay attention to in the css file, or script if you put in the html file. However FitText ignores the font-size you specify in the css file (body tag), you have to be sure to set one as a fallback in case JavaScript is turned off. You also have to make sure that the h1 tag has a display block with a specified width.

So in the example, they just call the function for the first id (fittext1) which has all the default values. For the second id (fittext2) they set a “compressor” value. If you set a high compressor value, the text will shrink more aggressively. If you give a lower value, for instance .fitText(0.8), the text will shrink less aggressively. For the third id (fittext3) they set a min- and maxFontSize, this allows users to specify two optional pixel values.

More information, and the link to github, can be found on their website http://fittextjs.com.

2. Adaptive Images

This tool detects your visitor’s screen size and automatically creates, caches and delivers device appropriate re-scaled versions of your web page’s embedded HTML images. It’s a bit more difficult to use because, you don’t only have to know the basics of html and css, you also have to have some basic server knowledge. You can also download this tool for free on github. When you unzip this file it’s best to first read the instructions file. Here you’ll find a very detailed list of instruction to create your adaptive images.

They say the setup is really easy and quick (just 3 steps). You first have to add the .htaccess and adaptive-images.php to your document-root folder. Than you have to add just one line of JavaScript between the head tags. And finally you have to add your css media query values into $resolutions in the php file.

You can find all the information you need on http://adaptive-images.com.

3. Responsive Testing

My prayers have been answered with this tool. I find it really dreadful to constantly have to resize my huge window so I can test a responsive website. No more I tell you! Just visit http://mattkersley.com/responsive and enter the url of the website you’d like to test. You can test only on the width or the device sizes. You have a beautiful overview for each device and their fore you can easily see where you have to tweak some more. The only downside I could find is the fact that it only covers apple’s products. So if you create for Android tablets or phones you still have to figure out their device sizes. But even for them it will be a great help!

4. Less Framework 4

“Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 set of typography presets, all based on a single grid.” You can download Less Framework for free on github.

If you want to see what it does, you just create a new webpage with some dummy text in it from lipsum.com. you just have to copy the css you want (I choose the main-16px.css) and paste it in your css file. If you run the page now you can already see it in action. If you want something more sophisticated, you can always tweak a couple of things in the css file.

There are a couple of rules you have to keep in mind when you want to use this tool for your website. So for more information about this useful grid tool, visit their website http://lessframework.com.

5. Responsive Web Design Sketch Sheets

If you still use paper and pencil to create your mockups, you could use these sketch sheets for your responsive web sites. You can download the sheets at http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets.

jQuery Mobile has rocked the web with an easy way of quickly developing mobile applications. Not just mobile web apps but using PhoneGap you can build native applications that can be downloaded in the available app stores. jQuery Mobile can be as flexible as you want it to be, but out of the box it’s built to quickly launch your applications with pre-built design templates or using the jQuery Mobile theme roller.

Below is a detailed plan that will help you learn jQuery Mobile and all the possibilities. Use it as a reference guide when your looking to figure something out or trying to determine if there is something you can do in jQuery Mobile. If your looking for a tut that is not here, please request it in the comments and we’ll look into making it.


Continue Reading…

As you may have read, I’m a student Interactive Multimedia Design at the college of Mechelen. I’m in my final year, and as all graduates we have to create a final project. Me and my partner have decided to create a mobile website so motorists can pay their parking fee with their phone or tablet. This will be my very first responsive web site I’ve ever made.

There are a couple of things I wish I knew before I started this project and the major one has to be that working together with a city brings a lot of extra difficulties to a project. For instance we HAVE to work together with their ICT department, which basically means we always have to ask for their approval after coding a page (which may take a couple of weeks).

Continue Reading…