Web Service Creation in HTML5

Web Service Creation
Tero Laiho
tero.laiho@gmail.com

Why web services not Web pages?
• There is always a reason for the creation of the web pages
• There are users. Audience. Customers.
• You are creating a service for someone to use. Just the format looks
like web pages

Making web services
• Register a domain
• Order web hosting
• Plan the service
• Develop the service
• Launch the service
• Measure
Go back to planning

Domain registration and Web hosting
• One option is to check the availability from the oma.domainmaailma.com
and reserve the domain from there
• However in my opinion this makes sense only with .fi domains
• In any case you should shop around and for the .fi domains one place to
see prices is
www.webhotellit.com
• With .com, .net, .org etc. domains it is much more efficient to use
combined web hosting and domain services like www.dreamhost.com,
www1.hostgator.com or www.000webhost.com
• The price of a domain is cheap. With web hosting it is often free.
• The price of the hosting a web site is less than $10 a month. And easily
much cheaper.

To WordPress or not to WordPress?
• WordPress makes sense if you don’t want to learn or pay for web
development or you know a really cool WordPress template you want
to use.
• Working in the WordPress will be
mostly tweaking options and
installing widgets. The good point of
the WordPress is that you can be up
and running very fast.
• The bad point of WordPress in my
opinion is that your site will look like
a WordPress site which is not good if
you want to appear as a serious
designer or developer.

More about the WordPress
• Two flavours
• https://wordpress.org/
• https://wordpress.com/
• In a nutshell if you just want a blog go for the .com
if you want to get creative go for the .org
• If you would rather not deal with anything technical and don’t have
the time to commit to ongoing maintenance and development, then
WordPress.com would be the best option for you.
• If having freedom and full control over your WordPress site is an
important factor for you, consider setting up your own site with
software from WordPress.org. But then you will do the maintenance.

If you want to do things your way?
• Time to get your hands dirty…or pay
someone to do it
• Welcome to HTML5
• The hard way is to learn from
http://www.w3.org/TR/html5/
• Fortunately there are many other
ways like
http://www.w3schools.com/

What is the HTML5?
• To make web services you will be using HTML5
• It is a direct successor for the previous HTML and other mark up
languages.
• It consists of many “technologies” but the most important ones are
HTML, CSS and JavaScript
• HTML provides the content like text
• CSS provides the formatting for the content
• JavaScript provides the programming and the interactions for
example for the animations and the user input

The most important change in the HTML5
from the previous one
FROM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
TO
<!DOCTYPE html>
Two things of note. Human readable vs. machine readable.
Backwards compatible - the browsers will display even the oldest
pages with obsolete tags.
However you need to test with the browsers and operating systems
you want to be sure that your web services will work with.

The design drivers for the HTML5
• The aim was to keep the language human readable. This also makes it
editable with a simple text editor
• It was also aimed to be device independent. This makes it possible to
use the same web services with variety of devices by making the web
services responsive for the device capabilities
• HTML5 also aim to support multimedia and animation through the
browser without plugins like Flash.
• The HTML5 mark-up should be semantically meaningful

HTML5 is a work in progress
The parts which useful are kept
The parts which are not are discarded
The developers of the services and
the browser vendors ultimately
decide what is available for use and
what is not

HTML mark-up provides structure for the web
services
<!DOCTYPE html>
<html>
<head>
<title>HTML 5</title>
</head>
<body>
<header>
<navigation></navigation>
</header>
<section>
<article>
<header></header>
<footer></footer>
</article>
</section>
<aside></aside>
<footer></footer>
</body>
</html>

HTML without CSS
<!DOCTYPE html>
<html>
<head>
<title>My first styled page</title>
</head>
<body>

<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="musings.html">Musings</a>
<li><a href="town.html">My town</a>
<li><a href="links.html">Links</a>
</ul>

<h1>My first styled page</h1>
<p>Welcome to my styled page!
<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere…
<p>There should be more here, but I don't know
what yet.

<address>Made 5 April 2004<br>
by myself.</address>
</body>
</html>

Lets add CSS
body {
padding-left: 11em;
font-family: Georgia, "Times
New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
<!DOCTYPE html>
<html>
<head>
<title>My first styled page</title>
</head>
<body>

<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="musings.html">Musings</a>
<li><a href="town.html">My town</a>
<li><a href="links.html">Links</a>
</ul>

<h1>My first styled page</h1>
<p>Welcome to my styled page!
<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere…
<p>There should be more here, but I don't know
what yet.

<address>Made 5 April 2004<br>
by myself.</address>
</body>
</html>
h1 {
font-family: Helvetica, Geneva,
Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }

HTML with CSS
HTML without CSS

What you need to do before starting the
coding?
• HTML5 is just a technology that makes it possible to do web
services. The important thing is what you want to do with it.
• Therefore before starting any coding it your should think deeply and
decide and document at least about the following:
• The purpose of the service? Requirements. (with a UX designer)
• The information architecture? Site map.(with a UX designer)
• User Interface. Wireframes? (with a UX/UI designer)
• Branded Look and Feel? Mock-ups. (with a UI designer)

coding – The Purpose
• Purpose
What is the purpose of the service? Do you want to provide information, promote a
service, sell a product… ?
• Goals
What do you hope to accomplish by building this web service? Two of the more common
goals are either to make money or share information.
• Target Audience
Is there a specific group of people that will help you reach your goals? It is helpful to
picture the “ideal” person you want to visit your web service. Consider their age, gender,
interests… – this will later help determine the best design style for your site.
It might make sense to create Persona(s) to communicate these assumptions.
• Content
What kind of information will the target audience be looking for on your site? Are they
looking for specific information, a particular product or service, online reservations…?
=> These will define the Technologies the web service will be build with

What you need to do
before starting the
coding – The Site Map
• The Site Map describes the web
site structure. The main page
and subpages and the
persistent links
• This is also a very good time to
do a card sorting UX workshop
to create the hierarchy that is
going to be described by the
web site

coding – the User Interface wireframes
• The user interface is usually the best
communication with wireframes
depicting only the UI elements and
not their content
• The aim of the wireframes is to get
feedback. From the customers, the
users, the client etc.
• I personally prefer to keep the
wireframes rough in order to get
feedback for the interaction without
getting bogged down with the
discussion about colours and icons.

What you need to do
before starting the
coding – Look and Feel
• Look ad Feel is best
communicated with Mock-
ups
• Mock-ups will contain all the
Brand elements like colours.
• And they can also contain
real content like pictures and
copy text.

Crash course on web design.
Gutenberg Diagram, Z-pattern and F-pattern

Gutenberg diagram
• Important elements should be placed along the reading gravity path.
For example placing logo or headline in the top/left, an image or
some important content in the middle, and a call-to-action or contact
information in the bottom right.
• Works well with heavy textual content with a minimum of visual
hierarchy

Z-pattern
• The Z-pattern layout follows the shape of the letter z. Readers will
start in the top/left, move horizontally to the top/right and then
diagonally to the bottom/right before finishing with another
horizontal movement to the bottom/right.
• The Z-pattern is good for simple designs with a few key elements that
need to be seen.

F-pattern
• The eye starts in the top/left, moves horizontally to the top/right and
then comes back to the left edge before making another horizontal
sweep to the right. This second sweep won’t extend as far as the first
sweep.
• Additional sweeps move less and less to the right and for the most
part after the second major sweep the eye sticks close to the left
edge as it moves downs.
• F-pattern is good for lists of articles, search results and similar lists of
textual information
• Start paragraphs, subheads, and bullet points with enticing keywords.

Design can either reinforce these patterns or
not
• As soon as you begin adding elements
of varying visual weight, the path the
eye will take through your design is the
one you create. You can choose to
reinforce Gutenberg, F, or Z patterns if
you want, but you aren’t limited by
them.

Grid design
• It makes a lot of sense to do the design of the web service with a pre
set grid that is used to keep all the blocks in line with each other
• This will make your design clean by default and it will also help to
make your web service responsive

Responsive web design
• You should make your website
responsive for different screen sizes
at least for the computers, tablets
and smart phones
• How to?
• Technically you are making media
queries to determine the style sheet
to use with the device screen. And
using fluid grid and fluid images…
• However the important thing is to
decide what you want to show on the
screen with all these different device
screens
Laptop screen Tablet screen

Video and Audio
• HTML5 intends the media to be played by the browser without a need for plugins.
• However there is no video or audio format that is guaranteed to work with all the browsers and
devices
• Therefore you must provide the media in many formats and let the browser to decide which one
to use. Or play with Flash. Or even let the user to download the file to play in the computer.
• And remember to take into account the hearing impaired users with an transcript of the audio
An example
:
<audio controls>
<source src="witchitalineman.ogg" type="audio/ogg">
<source src="witchitalineman.mp3" type="audio/mpeg">
<object type="application/x-shockwave-flash"
data="player.swf?soundFile=witchitalineman.mp3">
<param name="movie" value="player.swf?soundFile=witchitalineman.mp3">
<a href="witchitalineman.mp3">Download the song</a>
</object>
</audio>
<p>I am a lineman for the county...</p>

A snapshot of the media support in the browsers => Remember to provide many formats and test a lot.

Usability testing
• Now is a great time to start the usability
testing with paper prototypes in case you
didn’t start even earlier.
• And continue testing while coding your
web service.

What about SEO?
• First of all make a great relevant service with a good User Experience
• Name it and describe it accurately
• Then market it well
• Forget gimmicks

The Coding tools?
• Coding tools include at least
• Text editor  like Notepad++ (Free)
to do the coding of the service
• Photoshop or GIMP (Free)
to make graphics for the service
• Illustrator or Inkscape (Free)
to make scalable vector graphics for the pages
• FTP (Free)
to move the web service files to the web hosting server

The end result of coding?
• You end up with a lot of text files
• And you probably have also a lot of media files that are referenced
from the text files
• Move the files to your web hosting server using FTP
• And you are done 

What happens after the coding has been
done?
• Testing, testing, testing… or just launch as an eternal beta?
• The Lean way is to Launch, Measure, Learn, Redesign, Develop, Re-launch i.e.
eternal beta
Launch
Measure
Learn
Redesign
Develop

State of the Art – selected items
• Clear division between content, presentation and interactions
• HTML for the content
• CSS for the presentation
• JavaScript/JQuery for the interactions
• Responsive design
• One web site to serve all the devices and use contexts regardless of their capabilities
• Minimize the use of plugins that the browsers might not have
• No Flash. Use Canvas instead.
• Link to many alternative media formats for the browser to decide which to use
• Use semantic elements to describe the type of the content
• <section>, <article>, <aside>, <details>, <footer>, …

And please remember
• Google-Sensei
and
• YouTube-Sensei
are there to help you 24/7 with any of
your questions

Web Service Creation in HTML5

More Related Content

What's hot (20)

Similar to Web Service Creation in HTML5 (20)

Recently uploaded (10)

Web Service Creation in HTML5

Editor's Notes