These postings are provided "AS IS" with no warranties, and confers no rights. You assume all risk for your use.
Frédéric HarperDeveloper Evangelist
Even if the actual version of HTML as been discussed for a couple of years now, it is fairly new. We see a lot more enthusiasts around this new version of this Web standard, and trust me; it's just a beginning. If you have already started to give a closer look to the new features and elements, you probably asked yourself where are the tools to help you build your next amazing HTML5 website or application?
We are starting to see more and more IDE (Integrated Development Environment) adding HTML5 support to their existing tool. When we talked about support of HTML5, most of the time we talked about syntax helper. You don’t have to always remember all elements from a programming language so these tools will help you create your code easily. As the usage of HTML5 is growing considerably, we will see soon more IDEs that will help us create the UI without coding. Let me introduce you some of them, that you may or may not know:
WebMatrix is my IDE of choice when I do HTML5. It’s a simple free tool that let you code some HTML5 magic with some IntelliSense help. The IntelliSense will help me find the right element I was trying to use, but also close the tag for me. Even if you are a HTML5 pro, sometimes your memory needs some help. What is great with this tool too is that I can easily publish, direct from the interface, to my FTP account: no need of a thirs party application.
If you are looking forward to use something with UI preview, Expression Web in the next tool in my Web developer weapon list. It’s a great software that also has IntelliSense for HTML5 and CSS3, but it let you preview directly in the tools your masterpiece with the SuperPreview feature. It’s not just about Internet Explorer 9; you can see the rendering of your website on other browsers like Firefox, Chrome and Safari. You can try it for free.
I’m serious. You can even use Notepad. In fact, you can use any text editor as HTML5 is a markup language, so you don’t need any compiler. The applications I showed you before are there to help you code more quickly and easily, but you have the freedom to use anything you want!
I know there are more tools available on the Web, but I wanted to introduce you to the tools we have at Microsoft. I really think that we are doing great stuff with this three IDEs, but let me tell you something that is not a secret: these tools will get better and better with their new releases, so keep on eyes on them! Did you use WebMatrix, Expression Design or Visual Studio for your HTML5 needs? What is your IDE, Microsoft or not, of choice? Share your thoughts!
As a Web developer, we need to think about many devices, screen sizes and orientations. It’s not enough now to build our application or website to target only desktop screens: you need to keep in mind that your visitors will come to your site with their smartphones, their netbooks, their tablets, their slates and even their living room TV. We need to give them a good experience.
Instead of creating a specific version for the most common screen resolution or for specific mobile experience, Responsive Web Design is all about creating an experience that will keep in mind the user’s needs instead of ours. Flexibility is the keyword as we adapt to various devices' capabilities, instead of configurations.
How many times did you tried to see a website that is not mobile-friendly? Everything is too big for the size of the screen. You have to zoom-in, zoom-out, and it’s very frustrating. With a fixed-width design, the owner will have to create a version for each device that their customers use.
So what is really this Responsive Design thing? It’s base on three technical aspects:
<link href="mobile.css" rel="stylesheet" media="screen and (max-width:480px)“ type="text/css" />
<link href="netbook.css" rel="stylesheet“ media="screen and (min-width:481px) and
(max-width: 1024px)“ type="text/css" />
<link href="laptop.css" rel="stylesheet" media="screen and (min-width:1025px)“ type="text/css" />
A flexible grid-bases layout
Everybody loves pixels. We used pixels for a long time in the Web, and Designer loves them too. The problem is that the screen representation of a pixel is different on every device or screens. The answers in using a flexible grid-bases layout reside in percentage or em for sizing. The idea is to use relative size for text, width and margins.
Flexible images and media
The last part, but not the less important is about your media. The images and videos needs to be flexible too. It’s a basic principle that allows you to scale or shrink your media with CSS. You can also use a technique with alternate version of the media or sometimes, when it makes sense, no media at all.
If you want to see Responsive Web Design in action, you can go to http://mediaqueri.es/ that list some great examples. Use your smarthphone, your tablet or resize your desktop Web browser: you will see the magic of Responsive Web Design. This blog post is a good start to understand the idea behind it, but if you have an interest in this topic, I will be more than happy to make other blog posts to dive deeper into the subject. For those of you that can’t wait, one of the best book out there is the one from A Book Apart. Oh and if you are in Montreal, I’ll do a presentation on Responsive Web Design (in French) at HTML5mtl next week.
Do you think Responsive Web Design is the way to go? Do you already use it? Did you see amazing implementation of this technique on the Web? Share your thoughts.
Creative Commons image: http://www.flickr.com/photos/adactio/5818096043/
You are in front of your computer, wanting to learn a new technology for your job, or because you have this awesome idea on what will be the next Angry Birds. Whether you are a professional, a student or a hobbyist, learning a technology is sometimes a challenge. Where to start? In this blog post, I will give you my tips around getting up to speed with a new technology.
Before your start
If you are not limited to a specific technology, like someone who has to learn the next programming language for their work, you may ask yourself, which one fit the best my needs. A good way to see what the industry is using or what is the thoughts about this new HTML5 thing you saw on the Web last day, online community is the best place to start. I go often to a place call Stack Overflow. It’s really a good place for technical and sometimes, more high level discussion/questions. You can also go to places like LinkedIn.
I know which programming language I want to learn
Now you know what you want to learn. Personaly, I'm still a fan of book, or in a digital world, eBook. You can buy great books on site like Amazon or directly from the publisher like O’reilly or Microsoft Press. You can also go on a site like the MSDN blog to find great resources. If you are ready to invest some money, you can use website like Lynda.com that gives you a lot of tutorial for a monthly fee. Furthermore, never underestimate good music for the learning process!
I want to go further
If you want to learn more, you can also go to conference or users group. There are so many conferences about technology that you have plenty of choices. Just in the top of my head for the next month, I can suggest you PrairieDevCon for Calgary people, Confoo for Montreal people or Le Web à Québec for French people. OK, I know more conferences from Quebec since I’m living there, but search the Web, and you will find a lot more. Don’t forget user groups: there are so many that offer top quality presentation for free or a minimal fee. Here is a list to start.
Prove your knowledge
What happening after I learn the technology? For sure, you will use it for the project or the work you had in mind, but there are more ways to test your competencies. You can take a certification exam or participate in some competitions, hackfests or even take advantage of things like the Developer Movement. A great way to build your next idea, have some fun, be creative, win some prize and for sure, validate your learning process.
It’s not a big step by step process, but these are my tricks to get up to speed with a new technology, what are yours? How do you start the learning process?
Image Creative Commons: http://www.flickr.com/photos/jitze1942/4292084185/