HTML/CSS

HTML/CSS Digipinguïns, 3 juni 2014

Mijn naam is Gregory

Ik werk voor mijn webdesign studio www.desikn.be

Ik tweet als @desiknr

HTML Inhoud (Content) CSS Opmaak (Style) JAVASCRIPT Gedrag (Behaviour)

GESCHIEDENIS RICH MEDIA WEB FORMS 2.0 SEMANTICS

GESCHIEDENIS

HTML (HyperText Markup Language) is de universele taal van het
wereldwijde web.

Sir Tim Berners-Lee schreef in 1991 een document “HTML Tags”,
waarin minder dan een dozijn elementen beschreven werd om webpagina's te maken. Tags bestonden al in SGML (Standard Generalized Markup Language).

Van HTML in 1991 tot HTML 4.01 in 1999. XHTML
(Extensible Hypertext Markup Language) was HTML als XML, maar Internet Explorer ondersteunde geen XHTML. XHTML 2 was de toekomst.

XHTML 2 en HTML 5 (met spatie) werden ontwikkeld door
W3C. HTML5 (zonder spatie) werd ontwikkeld door WHATWG. World Wide Web Consortium (W3C) Web Hypertext Application Technology Working Group (WHATWG)

HTML5 “Candidate Recommendation” (CR) in 2012. HTML5 “Proposed Recommendation” (PR)
in 2022.

HTML5 is voortzetting van HTML 4.01.

Vereenvoudiging

HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML5 <!DOCTYPE html>

HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="bestand.js"></script> <link
rel="stylesheet" type="text/css" href="bestand.css">

HTML5 <meta charset="UTF-8"> <script src="bestand.js"></script> <link rel="stylesheet" href="bestand.css">

Syntaxis <!DOCTYPE html> <html> <head> <title>Mijn eerste HTML-pagina</title> </head> <body>
<h1>Hello world!</h1> <p>Een regel met paragraaf-tags.</p> Een tweede regel zonder paragraaf-tags,<br /> met een regeleind na de komma en <a href=”pagina.html”>een link</a>. </body> </html>

HTML5 demo's HTML5 demo's en voorbeelden html5demos.com

RICH MEDIA

Canvas

Het canvas element is een variabele om dynamische afbeeldingen te
creëren. De inhoud kan op ieder moment geüpdatet worden via JavaScript. Ideaal voor tools en games die vroeger een plugin zoals bv. Flash nodig hadden. <canvas id=”mijn-eerste-canvas” width=”320” height”240”></canvas> speckyboy.com/2011/12/07/20-amazing-implementations-of-html5-canvas

Een audio bestand in een webpagina plaatsen. <audio src=”mijn-audio-bestand.ogg” loop
controls></audio> <audio autoplay loop controls> <source src=”mijn-audio-bestand.ogg”> <source src=”mijn-audio-bestand.mp3”> </audio>

Een video bestand in een webpagina plaatsen. <video src=”mijn-video-bestand.webm” controls
width=”320” height=”240”></video> <video autoplay controls width=”320” height=”240” poster=”mijn-video-poster.jpg”> <source src=”mijn-video-bestand.webm”> <source src=”mijn-video-bestand.mp4”> </video>

Browser controls

WEB FORMS 2.0

Input type “text” attributen

Placeholder Plaatst tekst in een veld. <label for=”hobbies”>Uw hobbies</label> <input
id=”hobbies” name=”hobbies” type=”text” placeholder=”bv. Vogels kijken”>

Placeholder in Firefox

Required Verplicht u om het veld in te vullen. <label
for=”wachtwoord”>Uw wachtwoord</label> <input id=”wachtwoord” name=”wachtwoord” type=”password” required>

Required in Firefox

Autofocus Plaatst cursor in een veld. <label for=”nieuws”>Deel uw laatste
nieuws ...</label> <input id=”nieuws” name=”nieuws” type=”text” autofocus>

Autofocus in Firefox

Autocomplete Automatisch aanvullen van velden. <input name=”eenmalig-token” type=”text” autocomplete=”on”>

Datalist Mengt een input met een select. <label for=”wereld”>Mijn wereld</label>
<input id=”wereld” name=”wereld” type=”text” list=”planeten”> <datalist id=”planeten”> <option value=”Mercurius”> <option value=”Venus”> <option value=”Aarde”> <option value=”Mars”> <option value=”Jupiter”> <option value=”Saturnus”> <option value=”Uranus”> <option value=”Neptunus”> </datalist>

List in Firefox

Input types

HTML 4.01 <input id=”naam” name=”naam” type=”text”> <input id=”wachtwoord” name=”wachtwoord” type=”password”>
<input id=”keuze” name=”keuze” type=”radio”> <input id=”keuze” name=”keuze” type=”checkbox”> <input id=”annuleren” name=”annuleren” type=”reset”> <input id=”versturen” name=”versturen” type=”submit”>

Het type attribuut wordt uitgebreid in HTML5. Indien niet ondersteunt
door browser gedraagt het zich als een tekst-veld.

Contact informatie <input id=”e-mail” name=”e-mail” type=”email”> <input id=”website” name=”website” type=”url”>
<input id=”telefoon” name=”telefoon” type=”tel”>

Email in Opera

Email op iPhone

URL op iPhone

Tel op iPhone en Android

Zoeken <input id=”zoeken” name=”zoeken” type=”search”>

Search in Safari

Search op iPhone

Sliders en spinners <input id=”aantal” name=”aantal” type=”range”> <input id=”aantal” name=”aantal”
type=”number”>

Range in Chrome

Number in Opera

Number op iPhone en Android

Datum en tijd <input id=”datum” name=”datum” type=”date”> <input id=”datum” name=”datum”
type=”datetime”> <input id=”datum” name=”datum” type=”datetime-local”> <input id=”datum” name=”datum” type=”month”> <input id=”datum” name=”datum” type=”week”> <input id=”datum” name=”datum” type=”time”>

Date in Opera

Datetime in Opera

Datetime-local in Opera

Month in Opera

Week in Opera

Time in Opera

Kleurkiezer <input id=”kleur” name=”kleur” type=”color”> Nu ook in Firefox vanaf
versie 29.

Color in Opera

SEMANTICS

De semantiek of betekenisleer is een wetenschap die zich bezighoudt
met de betekenis van symbolen.

Nieuwe elementen

Mark Markeren van een woord of zin in bv. zoekresultaten.
<h1>Zoekresultaten voor 'Pinguïns'</h1> <ol> <li><mark>Pinguïns</mark> zijn een orde van niet-vliegende zeevogels.</i> </ol>

Time Tijd, dagen, weken en jaar aanduiding. <time datetime=”2013-06-03”>03 juni
2014</time>

Meter Iets dat al gemeten is. <meter>9 van de 10
pinguïns</meter> <meter max=”10”>9 pinguïns</meter>

Progress Vooruitgang of iets dat bezig is te meten. Uw
profiel is <progress>60 %</progress> compleet. <progress min=”0” max=”100” value=”60”></progress>

Structuur

Structuur gaat over inhoud, niet over plaats!

Header Bevat inleidende inhoud of navigatie. <section> <header> <h1>Een mooie
presentatie</h1> </header> <p>De presentatie over HTML5.</p> </section>

Footer Informatie over het bevattende element. <section> <header> <h1>Een mooie
presentatie</h1> </header> <p>De presentatie over HTML5.</p> <footer> <p>Door Gregory</p> </footer> </section>

Main Bevat de hoofdinhoud. <main> <p>De presentatie over HTML5.</p> </main>
Het <main> element mag maar één maal voorkomen in het document. Het <main> element mag geen descendant van <article>, <aside>, <footer>, <header> of <nav> element zijn.

Aside Inhoud dat los staat van de hoofdinhoud. <aside>Presentaties</aside>

Nav Navigatie. <nav> <ul> <li><a href=”http://cgcvzw.be/”>Home</a></li> <li><a href=”presentaties”>Presentaties</a></li> <li><a href=”over-ons”>Over
ons</a></li> <li><a href=”contact”>Contact</a></li> </ul> </nav>

Section Gelijkaardig gerelateerde generieke inhoud. <section> <header> <h1>Een mooie presentatie</h1>
</header> <main> <p>De presentatie over HTML5.</p> </main> <footer> <p>Door Gregory</p> </footer> </section> Het <section> element moet een heading bevatten.

Article Gelijkaardig gerelateerde specifieke inhoud. <article> <header> <h1>Een mooie presentatie</h1>
</header> <p>De presentatie over HTML5.</p> <footer> <p>Gepubliceerd <time date=”2013-05-25” pubdate>Zaterdag, 25 mei 2013</time> Door Gregory</p> </footer> </article> Het <article> element moet een heading bevatten.

GESCHIEDENIS TRANSITIONS EN TRANSFORMS FORMS VERRIJKEN RESPONSIVE WEBDESIGN

GESCHIEDENIS

CSS (Cascading Style Sheets) is een mogelijkheid om de vormgeving
van webpagina's los te koppelen van hun feitelijke inhoud. csszengarden.com

Het begrip "cascading" (als een waterval) verwijst naar de mogelijkheid
van het overerven van opmaak-eigenschappen.

Vanaf het begin van het World Wide Web heeft elke
browser zijn eigen interne stylesheet gehad, die er voor zorgde dat de tags in een document werden geïnterpreteerd. Stylesheets bestonden al sinds SGML (Standard Generalized Markup Language).

Håkon Wium Lie stelde in 1994 CHSS voor. Bert Bos
werkte aan SPP.

Van CSS1 in 1996 tot CSS2.1 in 2011.

CSS3 bestaat uit modules. 2012-06-19: Media Queries 2011-09-29: Namespaces 2011-09-29:
Selectors Level 3 2011-06-07: Color

Microsoft Internet Explorer 5.0 voor MacIntoch was in 2000 eerste
browser met volledige CSS1 ondersteuning.

Syntaxis

tagname.classname:pseudoclass { gespecificeerde stijlen } a.pinguin:hover { background-color: black; color:
white; }

Box model

Margin: maakt een gebied rond de border vrij Border: een
boord rond de padding en content Padding: maakt een gebied rond de content vrij Content: inhoud van de 'box', zoals tekst en afbeeldingen

Box model demo <!DOCTYPE html> <html> <head> <title>Box model demo</title>
<style> .boxmodel { background-color: ivory; border: 5px solid gold; margin: 10px; padding: 20px; width: 300px; } </style> </head> <body> <div class=”boxmodel”> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet metus vulputate, rhoncus risus vitae, semper sapien. </div> </body> </html>

TRANSITIONS EN TRANSFORMS

Transitions

Voor overgangseffecten bij interacties. a.pinguin { padding: 5px 10px; background:
#9c3; transition-property: background; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0.5s; } a.pinguin { padding: 5px 10px; background: #9c3; transition: background 0.3s ease 0.5s; }

Transforms

Voor transformaties in 2D. ul.galerij li a:hover img { transform:
scale(1.5) rotate(-10deg); transform-origin: bottom left; } ul.galerij li a:hover img { transform: scale(1.5) skew(-5deg, 30deg); } ul.galerij li a:hover img { transform: scale(1.5) translate(20px, 40px); }

Voor transformaties in 3D. div { transform: rotateY(130deg); } div
{ transform: scale3d(0.5, -0.5, 1.5); } div { transform: perspective(600px); }

FORMS VERRIJKEN

Selectors, gradients en animaties

Forms verrijken met selectors fieldset:last-child { margin: 0; } fieldset
input[type=”text”] { border-radius: 5px; padding: 5px 10px; } fieldset input[type=”submit”] { border-radius: 5px; padding: 5px 10px; }

Forms verrijken met gradients fieldset input[type=”submit”] { background: linear-gradient(#999, #333);
border: none; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,0.5); color: #fff; font-weight: bold; padding: 5px 10px; text-shadow: 0 1px 1px rgba(255,255,255,0.8); }

Forms verrijken met animaties fieldset input[type=”submit”]:hover, fieldset input[type=”submit”]:focus { animation-name:
pulse; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } fieldset input[type=”submit”]:hover, fieldset input[type=”submit”]:focus { animation: pulse 1.5s infinite ease-in-out; }

RESPONSIVE WEBDESIGN Foto Happy Cog

Responsive webdesign (RWD) Het ontwerp van een responsive website schaalt
mee met de afmetingen van een scherm. <meta name="viewport" content="width=device-width, initial-scale=1" />

Foto Happy Cog Responsive webdesign

Technieken

Media queries Media queries geven de webpagina een indicatie van
de afmetingen van het apparaat waarop de website wordt geladen. /* Smartphones (portrait and landscape) */ @media screen and (min-width: 320px) and (max-width: 480px) { /* Gespecifieerde stijlen */ } /* Tablets (portrait) */ @media screen and (max-width: 768px) { /* Gespecifieerde stijlen */ }

Breekpunten Zijn browserbreedtes (viewports) die een media query declaratie hebben
om de lay-out te veranderen eens de breedte van de browser in dat gedeclareerde gebied is. Breekpunten staan niet vast.

Flexibele grids Zorgen ervoor dat breedtes en hoogtes van elementen
niet in pixels worden bepaald, maar in relatieve eenheden als percentages en em's.

Mobile first Is een ontwerpfilosofie waarvan men eerst voor kleinste
scherm ontwerpt (bv. smartphone) en vervolgens de mogelijkheden opgeschaald worden naarmate de viewport groter wordt.

Desktop, tablet en mobile

Front-end frameworks

Bootstrap getbootstrap.com Foundation foundation.zurb.com

Unsemantic unsemantic.com Skeleton getskeleton.com

HTML5 Shiv / HTML5 Shim HTML5 Shiv is een JavaScript
workaround om HTML5 elementen in versies lager dan Internet Explorer 9 een stijl te geven.  code.google.com/p/html5shim

Validatie

W3C Validator W3C Markup Validation Service validator.w3.org

X-UA-Compatible Valideert niet! <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> Verstuur header over
HTTP (in een .htaccess bestand). Header set X-UA-Compatible "IE=edge" 456bereastreet.com/archive/201103/x-ua-compatible_and_html5

HTML5 en CSS3 vandaag

Can I use... Compatibiliteitstabellen voor ondersteuning van HTML5, CSS3, SVG
en meer in desktop en mobiele browsers. caniuse.com

Vendor prefix CSS vendor prefixen of CSS browser prefixen zijn
een manier voor browsers om ondersteuning aan nieuwe en/of experimentele CSS features te geven tijdens een overgangsperiode. button { -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }

HTML-editors

Tekst HTML-editors Bluefish bluefish.openoffice.nl Brackets brackets.io Sublime Text sublimetext.com

Wysiwyg HTML-editor BlueGriffon bluegriffon.org

HTML-editor voor animaties Google Web Designer google.com/webdesigner

Do websites...

Do websites need to look exactly the same in every
browser? NO! dowebsitesneedtolookexactlythesameineverybrowser.com

Do websites need to be experienced exactly the same in
every browser? Nope. dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

Dank u voor uw aandacht!

Bronnen HTML5 for Web Designers (Jeremy Keith) CSS3 for Web
Designers (Dan Cederholm) Wikipedia (www.wikipedia.org) W3 Schools (www.w3schools.com)

HTML/CSS

HTML/CSS

More Decks by Desikner

Other Decks in Technology

Featured

Transcript