05 rd posd tutorial_xhtml_to_html5_2016
TRANSCRIPT
Principles of Systems DevelopmentWeek 5 Tutorial:From XHTML to HTML5, Creating HTML 4.01 pages
Richard DronTechnical Innovation Officere: [email protected]: twitter.com/seniorenrico
2
Hi … it’s me, Richard, again …• University Technical Innovation Officer – one part of my role is to help in the development of students’ technical skills in the digital area.
• Originally from IS project management background, implementing solutions for Retail and hospitality companies
• Worked as a freelance consultant and IS project manager – various digital projects for large and small companies including web development
3
PoSD Aims• To introduce key principles relating to the development
of robust, reusable and appropriate information systems• To introduce the Systems Development Lifecycle• To introduce the principles of Systems Analysis • To develop understanding of contemporary
development environments • To provide an introduction to the development of web-
based software artefacts and their integration with existing popular web-based systems such as blogging, micro-blogging and other contemporary social media
4
PoSD Learning OutcomesKnowledge and Understanding • Recognise key technologies underlying social network
technologies • Analyse and identify the key elements of an information
system• Create an interactive website/business media presence• Understand the relationship of an information system to
the wider business context in which it is deployed• Develop code in a web-based context including user
interaction
5
PoSD Learning OutcomesTransferable/Key Skills and other attributesDevelop key professional skills, including:• Self management / time management skills• Communication• Learn and develop high professional standards• Use information technology:• Process and present information using common applications• Review the appropriate use of Information Technology • Develop communication skills: • Read and respond to written material • Produce written material• Use a range of different technologies to communicate and
collaborate In virtual spaces
6
Quiz about … what you already know
HTMLRecap!
Open Chrome or Firefox at, or use your phone:
http://b.socrative.comEnter room: SOCMEDQuiz = HTML Quiz
7
Week 5 Introduction• HTML4 Recap• XHTML – what is it?• XHTML – the differences• HTML5 Intro
8
Quick Exercise - Multi browser Test
• Visit http://browsershots.org/
• Enter your PoSD site URL• http://teaching.mysalford.
biz/bns286
• Scroll to bottom deselect all
• Select Windows• Hit Submit• We’ll come back to
here later on
9
HTML4 Recap - Structural Markup <html lang=“en-gb”> <head> ..WHAT GOES HERE?.. </head> <body> <div id=“header”><h1>Header</h1></div><div id=“menu”><ul><li>Navigation</li></ul></div><div id=“content”><h2>Content</h2><p>Detail</p></div>
<div id=“footer”><p>Footer</p></div></body> </html>
10
HTML4 Recap - Doctype and Charset
HTML 4.01: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML 4.01: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Careful when copy-pasting this from Microsoft to Notepad – the quotation marks are not
standard font
12
XHMTL
13
Defining XHTML
• Stands for Extensible Hyper-Text Mark-Up Language.
• Is a stricter version of HTML, thus aiming to replace HTML.
• Is actually HTML defined as an XML (EXtensible Mark-Up Language) application.
• Is a W3C (World Wide Web Consortium) Recommendation.
• Now superseded by HTML5
14
Differences between HTML & XHTML
• XHTML elements must be properly nested.
• XHTML elements must always be closed.
• XHTML elements must be in lowercase.
These things are GOOD PRACTICE and you should follow these rules with HTML4.01
15
Good Practice: Structure
• Structural Markup:• Sections with• Headings, Paragraphs & Lists• Headers
– H1, H2, H3, … H6• Paragraphs
– P• Lists
– UL, LI– OL, LI– DL, DT, DD
• Linear Structure
Heading1Paragraph
Heading2Paragraph
Heading3Paragraph
• List item• List item• List item
Heading3Paragraph
16
Good Practice: Testing
• Test it in as many browsers as you can, on Mac and Linux as well as on Windows
• Test your site on tablets• Test your site on smartphones
17
Quick Exercise - Mobile Testing
• Try it on your own phone!https://www.google.co.uk/webmasters/tools/mobile-friendly/
18
Quick Exercise - Multi browser Test
• Results• View your site in 3 browser versions, spot any differences?
19
HTML5
20
XHTML > HTML 5Web Hypertext Application Technology Working
Group (WHATWG)• June 2004: Opera and Mozilla set up the mailing list• HTML5 — Web Applications 1.0 & Web Forms 2.0• October 2006: Reinventing HTML — Tim Berners-Lee• May 2007: W3C HTML Working Group• January 2008: HTML 5
– ?: Last Call Working Draft– 2012?: Candidate Recommendation– 2022?: Proposed Recommendation
21
You don’t get rid of HTML4 standards – you just improve upon them!
Standard
Improved
22
It’s easy for web developers to upgrade their websites to HTML 5
Step 1: change the doctype at the top of the page.
OLD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
NEW:
<!DOCTYPE html>
23
HTML 5 differences
24
Why do Web Developers love HTML 5 ?
Better organization of page content and code
<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
25
HTML5 is a Collection of Features
• HTML5 is not an “all or nothing” capability.• The HTML5 features available to end users depend on what browser and what version of that browser they are using.
•Users: How well does your browser support html5? www.Html5test.com
Keep your browser updated so that as they add new feature support you will have access to these new features!
www.whatbrowser.org
26
Who will see your cool new HTML 5 features?
Changing the Doctype will not break your existing
websitePeople using OLDER browsers that don’t
support the new HTML5 features will simply miss
out on viewing the website the way others do.
27
Validation• Validation – validate at Strict HTML4 to get into good habits
then convert to HTML5
• DOCTYPE – declare the DTD before <html>– <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
• Character Encoding– Latin Western
• Good clean strict code = 90% accessible– Make sure your code validates correctly to HTML4 strict. Then turn it into
HTML5– Use of < /> self-closing tags for XHTML unnecessary
28
Practical Exercise - Update your PoSD site
• Edit your home page• FTP the file
<html><head><title>My first webpage</title></head><body><div id=“header”><h1>My first webpage</h1></div><div id=“nav”><ul><li><a href=“#”>Item 1</a></li><li>Item 2</li><li>Item 3</li></ul></div><div id=“content”><h1>Lorem Ipsum Dolor</h1><p>….lorem…</p><p>….ipsum…</p><p>….dolor…</p></div><div id=“footer”><p>Terms and Conditions</p></div></body> </html>
30
Practical Exercises – Speed Test
https://developers.google.com/speed/pagespeed/insights/
Thank you
Any questions?