Me encanta que los estándares salgan bien

Click here to load reader

  • date post

    15-Feb-2017
  • Category

    Software

  • view

    570
  • download

    1

Embed Size (px)

Transcript of Me encanta que los estándares salgan bien

  • @isabelcabezasm #Codemotion2015

    #Codemotion_ES

  • #Codemotion2015

    Quin es esta?

    a) d)

    b) c)

  • #Codemotion2015

  • #Codemotion2015

    Ada Code Group

    Beatriz Garca

    @BeRoces

    [email protected]

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

    Isabel Cabezas

    @isabelcabezasm

    [email protected]

  • Isabel Cabezas Front-end developerMS Technical Evangelist

    @[email protected]

    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:[email protected]

  • 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