• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Talk 02 html5-css3
 

Talk 02 html5-css3

on

  • 378 views

 

Statistics

Views

Total Views
378
Views on SlideShare
378
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Centraalmanneke > check infographic example + door trekkennaa r volgende slides
  • 1991 > a href tag > hyper in de text,linktpagina’saanelkaar, Robert Cailliau > Belgmedeoprichter WWW2008 > Ian Hickson > HTML5 vader
  • Veelvoudaan browsers en devices
  • Hiergaan we even in detail, ikgebruikhiervooreenmetafoor, verweg van de it wereld, alhoewel…
  • Eenbelangrijketoegevoegdewaarde is eenduidigheid
  • Declaratie van eenpaginavoor html js en csszieterzouit
  • Begin met structure over canvas en video omdantekomenbijelementen:attributen die meerinvloedhebben op UX
  • Begin met structure over canvas en video omdantekomenbijelementen:attributen die meerinvloedhebben op UX
  • Hierinzoomen op uxwerk
  • Nieuwe content tags en nieuwe types van input velden
  • Dekeuze van specifieke input types geeftmeteeneenpassendtoetsenbordwaardoorgebruiksgemaktoeneemt.Gebruikfunctiebijuitleg over toetsenborden
  • ContentediteerbaarheidLokaleopslag van ingevulde data
  • 1991 > a href tag > hyper in de text,linktpagina’saanelkaar, Robert Cailliau > Belgmedeoprichter WWW2008 > Ian Hickson > HTML5 vader
  • Zowel css1 als css2 warenalleen maar eenlijst met alle features
  • Hiergaan we weer even in detail, onze auto van daarstrak
  • De selector bepaaldwat het is, welk model en type, de declaratiebeschrijft hoe het erzaluitzienHoogteAfstandgrondopp > bodemplaat
  • Iknoemereenpaar die we hiernaverder in detail bekijken. Erzijnernatuurlijknogwelmeerzoals je hietkanzien.
  • Verzendknop
  • Verzendknop
  • Op de eersteplaats
  • Ten tweede
  • En nietvergeten
  • Hier logomonkeyshotals That’s all folks, grauww

Talk 02 html5-css3 Talk 02 html5-css3 Presentation Transcript

  • Ward Monteyne / UX DesignerHTML/CSS, Design, Informatie Architectuur
  • Internetvandaag
  • Verschillendedevices
  • Verschillendebrowsers
  • Veel gebruikers Wie gebruikt wat,Verschillende locaties ?
  • ProbleemVerschillende standaarden Oplossing 1 standaard
  • Laatste versie van html Hyper Text Markup Language Basistaal voor alle websites/webapps Universeel en connectief
  • 1991HTML 17 tags + a href > Tim Berners-Lee (Robert Cailliau)1992HTML+1994HTML 2 Oprichting IETF (Internet Engineering Task Force) & W3C1995HTML 3 IETF ontmanteld1997HTML 3.21998HTML 42000XHTML 1.02001XHTML 1.12004HTML 5 Schisma W3C >< WHATWG (Web Hypertext Application Working Group)2008HTML5 Ian Hickson
  • Meer danzoveelste upgrade… Aanpak grondig vanuit basis
  • } EenduidigSemantisch { Browsers devices
  • Wat houdt dit in?
  • Syntax
  • element attributen auto 4x4 - 4 deurs – open dak input type=“email” class=“bigField” tag auto 4x4 met 4 deuren en open dak <Input type=“email” class=“bigField”>
  • Eenduidig
  • Notitiewijze/Declaratie <!DOCTYPE html> <link rel=“stylesheet” href=“style.css”> <script src="external.js”></script> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <link type=“text/css” rel=“stylesheet” href=“style.css” media=“all” /> <script type=“text/javascript” src=“external.js”></script>
  • Semantiek
  • Semantics, Waarom?Hoeksteen in html ontwikkeling Toegankelijkheid (screenreaders) Zoek- en vindbaarheid (SEO) Internationalisatie (bi-directional (“bidi”) writing) Interoperatieel (cross system/devices)
  • Structuur
  • NieuweContent elementen
  • Canvas<canvas>…</canvas>• http://www.thewildernessdowntown.com/• http://www.cuttherope.ie/
  • Video<video>…</video>Videocodex > H.264 – Ogg - WebM/VP8
  • Aandacht voorgebruiksgemak
  • Content <meter>…</meter> <progress>…</progress> <audio>…</audio> <input type=“tel” /> <input type=“search” /> <input type=“startdate” /> <input type=“number” /> …
  • <input type=“email” /> <input type=“url” /> <input type=“numbers” />
  • En niet te vergeten Live notifications Contenteditable Drag „n Drop LocalStorage …
  • Probleem HTML5Browser ondersteuning OplossingBackwards compatibility Javascript fallback (Modernizr, html5shiv)
  • Hooray we‟re halfway…
  • Laatste versie van CSS Cascading Style Sheets Basistaal omverschillende stijleigenschappen te definieren van elementen binnen een HTML pagina.
  • 1995CSS 1 1ste concept Cascading StyleSheets1997CSS 1 Finale aanbeveling1998CSS 2 1ste concept1999CSS 3 1ste concept2011 CSS 2.1 Finale aanbeveling2011 CSS 4 1ste concept2012CSS 3 Werkend concept20?? CSS 3 Finale aanbeveling
  • CSS 1 als CSS 2 =lijst met alle features
  • CSS 3 =Collectie van aparte modules(50) Elk apart niveau van concept & aanbeveling Gefaseerde implementatie en ondersteuning
  • Enkele modules The Box Model Lists Module Hyperlink Presentation Speech Module Backgrounds and Borders Text Effects Multi-Column Layout …
  • Syntax
  • selector declarationauto Citroën 2CV 4x4 grijs – hoogte 66cmsection #first .bigField {color: #222; font-size: 1em}
  • Belangrijkstenieuwigheden
  •  Masks & effects – ronde hoeken, schaduwen Gradients @fontface Flex box layout Multi-column layout Animaties, rotaties & 2 & 3d transformaties Transities Media queries …
  • a{ color: #FFF; padding: 20px; text-decoration:none; font-size: 24px; background-color: #C00; font-family: Susa; background: linear-gradient(to bottom, #ef979e 0%,#C00 100%); border-radius: 15px; box-shadow: 2px 2px 2px #797979; text-shadow: -1px -1px 0 #873b46 }
  • Probleem CSS3 Browser ondersteuning OplossingProgressive enhancement Gracefull degradation
  • Gracefull degradation = Best mogelijke ervaring voorde breedste groep van gebruikers, Rekeninghoudend metbeperkingen bepaalde browsers Zonder in te boeten aan functies en mogelijkheden
  • Voor de kenners Gracefull degradation =Conditional statements, browser hacks en prefixes
  • a.button{ color: #FFF; padding: 20px; text-decoration:none; font-size: 24px; background-color: #C00; font-family: Susa; border-radius: 15px; box-shadow: 2px 2px 2px #797979; ; text-shadow: -1px -1px 0 #873b46; background: linear-gradient(to bottom, #ef979e 0%,#C00 100%);}
  • a.button { color: #FFF; padding: 20px; text-decoration:none; font-size: 24px; background-color: #C00; font-family: Susa; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: 2px 2px 2px #797979; -moz-box-shadow: 2px 2px 2px #797979; ; box-shadow: 2px 2px 2px #797979; ; text-shadow: -1px -1px 0 #873b46; background: linear-gradient(to bottom, #ef979e 0%,#C00 100%); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from (#C00 ), to(#ef979e )); background: -webkit- linear-gradient(top, #ef979e , #C00 ); background: -moz-linear-gradient(top, #ef979e , #C00 ); background: -ms-linear-gradient(top, #ef979e , #C00 ); background: -o-linear-gradient(top, #ef979e , #C00 ); -pie-background: linear-gradient(top, #ef979e , #C00 ) behavior: url (/PIE.htc);}
  • Conclusie
  • WaaromHTML5 & CSS3 gebruiken als UX-ster?
  • Voor degebruikservaring van de gebruiker…
  • Volledig traject van analyse en wireframe over design tothtml template
  • In discussie met designers &ontwikkelaars
  • Hoger niveau van interfaces en gebruikservaring Inzicht in mogelijkheden en resultaat…
  • HTML5 & CSS3Geen doelwel middel
  • Bedankt !