@isabelcabezasm #Codemotion2015

#Codemotion_ES

#Codemotion2015

Quin es esta?

a) d)

b) c)

#Codemotion2015

#Codemotion2015

Ada Code Group

Beatriz Garca

@BeRoces

t-beatg@microsoft.com

http://meetup.com/ada-code-group

Isabel Cabezas

@isabelcabezasm

isacabe@microsoft.com

Isabel Cabezas Front-end developerMS Technical Evangelist

@isabelcabezasmisabelcabezasm@outlook.com

barcelonaJS / adaJS

catDotNet / [T]echdencias

Ada Code Group (Mad)#Codemotion2015

#Codemotion2015

https://xkcd.com/927/

https://xkcd.com/927/

#Codemotion2015

https://xkcd.com/927/

https://xkcd.com/927/

#Codemotion2015

#Codemotion2015

Accesibilidad

Estabilidad

Visibilidad

Tiempo de desarrollo

Conversiones y migraciones

Criterios comunes

Sin estndares no hay paraso

Compatibilidad Degradacinprogresiva

#Codemotion2015

Accesibilidad

Un poco ms sobreaccesibilidad web

http://blogs.msdn.com/b/esmsdn/archive/2015/11/05/est-225-ndares-y-accesibilidad.aspx

[Post Invitado]

Estndares y accesibilidad

por Juanjo Montiel (@kastwey)

http://blogs.msdn.com/b/esmsdn/archive/2015/11/05/est-225-ndares-y-accesibilidad.aspxhttp://blogs.msdn.com/b/esmsdn/archive/2015/11/05/est-225-ndares-y-accesibilidad.aspxhttp://blogs.msdn.com/b/esmsdn/archive/2015/11/05/est-225-ndares-y-accesibilidad.aspxmailto:h@kastwey

Cmo estn las web espaolas?Hemos hecho un estudio

Universo: 3000 webs espaolas con ms trfico.

#Codemotion2015

desde alexa.com

#Codemotion2015

Herramientas gratis para probar cross-browser

https://dev.windows.com/microsoft-edge/

https://dev.windows.com/microsoft-edge/

#Codemotion2015

Anlisis del sitio

Versin de cdigo abierto disponible en GitHub: https://github.com/MicrosoftEdge/static-code-scan

http://aka.ms/edgescan

http://aka.ms/edgescan

#Codemotion2015

@isabelcabezasm #Codemotion2015

#Codemotion2015

The HTML5 Standard event does this!

http://www.w3.org/html/wg/drafts/html/master/webappapis.html#client-identification

http://www.w3.org/html/wg/drafts/html/master/webappapis.html#client-identification

#Codemotion2015

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)

Chrome/39.0.2171.71 Safari/537.36 Edge/12.0

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko)

Version/8.0 Safari/600.1.25

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)

Chrome/40.0.2214.93 Safari/537.36

Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0

User-Agent Strings

#Codemotion2015

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)

Chrome/39.0.2171.71 Safari/537.36 Edge/12.0

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko)

Version/8.0 Safari/600.1.25

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)

Chrome/40.0.2214.93 Safari/537.36

Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0

User-Agent Strings

#Codemotion2015

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)

Chrome/39.0.2171.71 Safari/537.36 Edge/12.0

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko)

Version/8.0 Safari/600.1.25

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)

Chrome/40.0.2214.93 Safari/537.36

Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0

#Codemotion2015

Mozilla/5.0

#Codemotion2015

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)

Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240

Detecting Microsoft Edge

"Edge/"

#Codemotion2015

Getting the right, modern content

@isabelcabezasm

#Codemotion2015

@isabelcabezasm

if (Mobile)

Open/Close?

@isabelcabezasm

if (Mobile) Basado en una historia real

de terror

Please dont do UA sniffing

Por favor, no uses la deteccin del navegador

@isabelcabezasm

https://developer.mozilla.org/en-US/docs/Web/API/NavigatorID/userAgent

https://developer.mozilla.org/en-US/docs/Web/API/NavigatorID/userAgent

#Codemotion2015

http://api.jquery.com/jQuery.browser/

http://api.jquery.com/jQuery.browser/

Please dont do UA sniffingPlease avoid UA sniffing as much as possible

Always do feature detection(If isolating a bug) Sniff for specific browser versions

Assume unknown browsers are good

#Codemotion2015

Cmo evito la deteccin del navegador?

#Codemotion2015

Browser detection

#Codemotion2015

Deteccin de caractersticas (Modernizr)

Feature detection

#Codemotion2015

Browser detection

#Codemotion2015

Browser detection

#Codemotion2015

Feature detectionSin libreras de terceros

Con Modernizr

@isabelcabezasm #Codemotion2015

@isabelcabezasm

jQuery

52,8%

jQuery UI 19.4%

SWFObject

5,17% JQuery

Cookie

3,6%

#Codemotion2015

Actualiza ya!

https://github.com/jquery/jquery-migrate

http://www.asp.net/ajax/cdn

Usa un CDN

Usar versiones obsoletas es un peligro para la

interoperabilidad de tu web:https://github.com/jquery/jquery-migrate/blob/master/warnings.md

https://github.com/jquery/jquery-migratehttp://www.asp.net/ajax/cdnhttps://github.com/jquery/jquery-migrate/blob/master/warnings.md

@isabelcabezasm #Codemotion2015

#Codemotion2015

Control Appearance OverridesApple added ways to restyle HTML controls on the iPhone to match OS control look and feel.

Web developers add custom markup to disable Apples styles and provide their own.

before after

-webkit-appearance: none Most common value. -webkit-appearance: button-webkit-appearance: checkbox-webkit-appearance: radioetc..

#Codemotion2015

Control Appearance Overrides

Some sites restyle input controls using

-webkit-appearance: none

for critical functionality.

before after

#Codemotion2015

Gradients

Proprietary Apple Markup (still in WebKit):

Webkit-prefixed W3C Standard Gradient in

WebKit:

Unprefixed W3C standard:before after

#Codemotion2015

Aliasing webkit- prefixed APIs -webkit-align-content

-webkit-align-items

-webkit-align-self

-webkit-animation

-webkit-animation-delay

-webkit-animation-direction

-webkit-animation-duration

-webkit-animation-fill-mode

-webkit-animation-iteration-count

-webkit-animation-name

-webkit-animation-play-state

-webkit-animation-timing-function

-webkit-appearance

-webkit-backface-visibility

-webkit-background-clip

-webkit-background-origin

-webkit-background-size

-webkit-border-bottom-left-radius

-webkit-border-bottom-right-radius

-webkit-border-image

-webkit-border-radius

-webkit-border-top-left-radius

-webkit-border-top-right-radius

-webkit-box-align

-webkit-box-direction

-webkit-box-flex

-webkit-box-ordinal-group

-webkit-box-orient

-webkit-box-pack

-webkit-box-sizing

-webkit-column-break-after

-webkit-column-break-before

-webkit-column-break-inside

-webkit-column-count

-webkit-column-gap

-webkit-column-rule

-webkit-column-rule-color

-webkit-column-rule-style

-webkit-column-rule-width

-webkit-column-span

-webkit-column-width

-webkit-flex

-webkit-flex-basis

-webkit-flex-direction

-webkit-flex-flow

-webkit-flex-grow

-webkit-flex-shrink

-webkit-flex-wrap

-webkit-justify-content

-webkit-keyframes

-webkit-order

-webkit-text-size-adjust

-webkit-transform

-webkit-transform-origin

-webkit-transform-origin-x

-webkit-transform-origin-y

-webkit-transform-origin-z

-webkit-transition

-webkit-transition-delay

-webkit-transition-duration

-webkit-transition-property

-webkit-transition-timing-function

-webkit-user-select

@isabelcabezasm #Codemotion2015

#Codemotion2015

Welcome to the 90s

http://www.w3.org/QA/Tips/Doctype

http://www.w3.org/wiki/Doctypes_and_markup_styles#The_HTML5_doctype

http://www.w3.org/QA/Tips/Doctypehttp://www.w3.org/wiki/Doctypes_and_markup_styles#The_HTML5_doctype

#Codemotion2015

#Codemotion2015

Nadie soporta estos malos modos

http://www.w3.org/wiki/Doctypes_and_markup_styles#Other_doctypes

=> No uses otros DOCTYPEs (estn obsoletos)

http://www.w3.org/wiki/Doctypes_and_markup_styles#Other_doctypes

@isabelcabezasm #Codemotion2015

Comprometidoscon la seguridad

#Codemotion2015

Cmo quito los plugins?

#Codemotion2015

Reproductor de video

#Codemotion2015

HTML5 estn