Me encanta que los estándares salgan bien
79
@isabelcabezasm #Codemotion2015 #Codemotion_ES
-
Upload
isabel-cabezas-martin -
Category
Software
-
view
571 -
download
1
Transcript of Me encanta que los estándares salgan bien
@isabelcabezasm #Codemotion2015
#Codemotion_ES
#Codemotion2015
¿Quién es esta?
a) d)
b) c)
#Codemotion2015
#Codemotion2015
Ada Code Group
Beatriz García
@BeRoces
http://meetup.com/ada-code-group
Isabel Cabezas
@isabelcabezasm
Isabel Cabezas Front-end developerMS Technical Evangelist
barcelonaJS / adaJS
catDotNet / [T]echdencias
Ada Code Group (Mad)#Codemotion2015
#Codemotion2015
#Codemotion2015
Accesibilidad
Estabilidad
Visibilidad
Tiempo de desarrollo
Conversiones y migraciones
Criterios comunes
Sin estándares no hay paraíso
Compatibilidad Degradaciónprogresiva
#Codemotion2015
Accesibilidad
Un poco más sobreaccesibilidad web…
http://blogs.msdn.com/b/esmsdn/archive/2015/11/05/est-225-ndares-y-accesibilidad.aspx
[Post Invitado]
Estándares y accesibilidad
por Juanjo Montiel (@kastwey)
¿Cómo están las web españolas?Hemos hecho un estudio…
Universo: 3000 webs españolas con más tráfico.
#Codemotion2015
desde alexa.com
#Codemotion2015
Herramientas gratis para probar cross-browser
https://dev.windows.com/microsoft-edge/
#Codemotion2015
Análisis del sitio
Versión de código abierto disponible en GitHub: https://github.com/MicrosoftEdge/static-code-scan
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
#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 don’t do UA sniffing
Por favor, no uses la detección del navegador
@isabelcabezasm
https://developer.mozilla.org/en-US/docs/Web/API/NavigatorID/userAgent
Please don’t 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
¿Cómo evito la detección del navegador?
#Codemotion2015
Browser detection
#Codemotion2015
Detección de características (Modernizr)
Feature detection
#Codemotion2015
Browser detection
#Codemotion2015
Browser detection
#Codemotion2015
Feature detectionSin librerías 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
@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 Apple’s 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 90’s
http://www.w3.org/QA/Tips/Doctype
http://www.w3.org/wiki/Doctypes_and_markup_styles#The_HTML5_doctype
<!DOCTYPE html>
#Codemotion2015
#Codemotion2015
Nadie soporta estos malos modos
http://www.w3.org/wiki/Doctypes_and_markup_styles#Other_doctypes
=> No uses otros DOCTYPEs (están obsoletos)
@isabelcabezasm #Codemotion2015
Comprometidoscon la seguridad
#Codemotion2015
¿Cómo quito los plugins?
#Codemotion2015
Reproductor de video
#Codemotion2015
HTML5 estándar
#Codemotion2015
@isabelcabezasm #Codemotion2015
Reto Microsoft
Entra en http://aka.ms/edgescany encuentra una web sin ninguna
sugerencia de cambio en la sección
“Modern Web Interoperability”.
#Microsoft
#Codemotion_es
¡El primero tiene premio en nuestro
stand!
#Microsoft #Codemotion2015
@isabelcabezasm #Codemotion2015
#Codemotion2015
#Codemotion2015
Netmarketshare.com
#Codemotion2015
StatCounter.com
@isabelcabezasm
¡Aquí hay gatoencerrado!
#Codemotion2015
2% 1%
30%
14%
10%
44%
IE6 IE7 IE8 IE9 IE10 IE11
Usage of different versions of Internet Explorer.
Source: NetMarketShare.com (January 2015 to Jun 2015)
#Codemotion2015
Standards & Features
• WebGL
• WebSockets
• CSS3 Gradients
• Blocked scoped variables
• Pointer Events
• Fullscreen API
• Device Orientation
• Flexbox
• Encrypted Media Extensions
• CSS3 Regions
• File API
• AppCache
• IndexedDB
• CSS3 Media Queries
• Canvas
• CSS3 Transforms
A fork from the past
#Codemotion2015
Interoperable intersection
Th
e M
ob
ile W
eb
#Codemotion2015
Interoperable intersection
Th
e M
ob
ile W
eb
#Codemotion2015
To date, we’ve made
of these types of fixes in Edge.
Removing code (yujuuu!)
VML
attachEvent()
VB Script
Conditional Comments
X-UA-Compatible
currentStyle
currentStyle
IE Layout Quirks
MS-prefixed Events
interface AesGcmEncryptResult{
readonly ciphertext
constructor
readonly tag
}
interface ApplicationCache : EventTarget{
function addEventListener
function dispatchEvent
function removeEventListener
}
interface Attr : Node {
readonly boolean expando
}
interface AudioTrackList : EventTarget{
addEventListener
dispatchEvent
removeEventListener
}
interface BookmarkCollection{
Todos los
“IEeisms” que
hemos tenido y
hemos quitado
#Codemotion2015
#Codemotion2015
¿Cuánto queda?
http://status.microsoftedge.com
130
140
150
160
170
180
190
200
210
May June July Aug Sept Oct Nov Dec Jan Feb Mar April
Under Consideration In Development Preview Release
#Codemotion2015
¡Tu opinion cuenta!
Real World Usage Data
Developer/Partner
Feedback
Standards Stability
Development Capacity
#Codemotion2015
¡Tu opinion cuenta!
uservoice.modern.ie
status.modern.ie
remote.modern.ie
insider.windows.com
#Codemotion2015
¡Tu opinion cuenta!
http://aka.ms/EvCodemotion1
