Web Service Creation in HTML5
37
-
Upload
tero-a-laiho -
Category
Small Business & Entrepreneurship
-
view
67 -
download
0
Transcript of Web Service Creation in HTML5
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 progressThe parts which useful are keptThe parts which are not are discardedThe 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>
<!-- Site navigation menu -->
<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>
<!-- Main content -->
<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.
<!-- Sign and date the page, it's only polite! -->
<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>
<!-- Site navigation menu -->
<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>
<!-- Main content -->
<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.
<!-- Sign and date the page, it's only polite! -->
<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)
What you need to do before starting the coding – The Purpose• Purpose
What is the purpose of the service? Do you want to provide information, promote a service, sell a product… ?
• GoalsWhat 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 AudienceIs 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.
• ContentWhat 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
What you need to do before starting the 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 audioAn 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
Coding
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 betaLaunch
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-Senseiand• YouTube-Senseiare there to help you 24/7 with any of your questions
