Me encanta que los estándares salgan bien
•
2 recomendaciones•676 vistas
Es decir, que las web que cumplan los estándares se vean bien en todos los navegadores actuales. Me gustan que sean fáciles de mantener y de actualizar, que tengan una consistencia visual entre navegadores. Me gusta que sean fácilmente accesibles. Y por pedir… me gusta que sean rápidas, que se posicionen bien en los motores de búsqueda, buen UX, que consuman poco ancho de banda, que sean eficientes, hacerlas con menos esfuerzo y poder visitarlas desde cualquier dispositivo. La mayoría de las web a las que accedemos no respetan los estándares de la W3C, pero estamos viviendo un cambio y deberíamos encaminarnos a crear páginas bien hechas. Veremos cuáles son los estándares actuales, como actualizar un sitio web para que utilice los estándares sobre los que se basan la mayoría de los navegadores modernos y en qué me beneficia que mi web los siga. En resumen: buenas prácticas, qué funciona y las mejores herramientas para llevar a cabo todo esto.
Recomendados
Más contenido relacionado
Similar a Me encanta que los estándares salgan bien
Similar a Me encanta que los estándares salgan bien (20)
Me encanta que los estándares salgan bien
- 2. #Codemotion2015 ¿Quién es esta? a) d) b) c)
- 4. #Codemotion2015 Ada Code Group Beatriz García @BeRoces t-beatg@microsoft.com http://meetup.com/ada-code-group Isabel Cabezas @isabelcabezasm isacabe@microsoft.com
- 5. Isabel Cabezas Front-end developer MS Technical Evangelist @isabelcabezasm isabelcabezasm@outlook.com barcelonaJS / adaJS catDotNet / [T]echdencias Ada Code Group (Mad)#Codemotion2015
- 9. #Codemotion2015 Accesibilidad Estabilidad Visibilidad Tiempo de desarrollo Conversiones y migraciones Criterios comunes Sin estándares no hay paraíso Compatibilidad Degradación progresiva
- 10. #Codemotion2015 Accesibilidad Un poco más sobre accesibilidad 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)
- 11. ¿Cómo están las web españolas? Hemos hecho un estudio… Universo: 3000 webs españolas con más tráfico.
- 13. #Codemotion2015 Herramientas gratis para probar cross-browser https://dev.windows.com/microsoft-edge/
- 14. #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
- 15. #Codemotion2015
- 17. #Codemotion2015 The HTML5 Standard event does this! http://www.w3.org/html/wg/drafts/html/master/webappapis.html#client-identification
- 18. #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
- 19. #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
- 20. #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
- 22. #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/"
- 23. #Codemotion2015 Getting the right, modern content
- 24. @isabelcabezasm
- 25. #Codemotion2015
- 27. @isabelcabezasm if (Mobile) Basado en una historia real de terror
- 28. Please don’t do UA sniffing Por favor, no uses la detección del navegador
- 31. Please don’t do UA sniffing Please 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
- 32. #Codemotion2015 ¿Cómo evito la detección del navegador?
- 34. #Codemotion2015 Detección de características (Modernizr) Feature detection
- 37. #Codemotion2015 Feature detection Sin librerías de terceros Con Modernizr
- 40. #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
- 42. #Codemotion2015 Control Appearance Overrides Apple 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: radio etc..
- 43. #Codemotion2015 Control Appearance Overrides Some sites restyle input controls using -webkit-appearance: none for critical functionality. before after
- 44. #Codemotion2015 Gradients Proprietary Apple Markup (still in WebKit): Webkit-prefixed W3C Standard Gradient in WebKit: Unprefixed W3C standard: before after
- 45. #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
- 47. #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>
- 48. #Codemotion2015
- 49. #Codemotion2015 Nadie soporta estos malos modos http://www.w3.org/wiki/Doctypes_and_markup_styles#Other_doctypes => No uses otros DOCTYPEs (están obsoletos)
- 53. #Codemotion2015 ¿Cómo quito los plugins?
- 56. #Codemotion2015
- 58. Reto Microsoft Entra en http://aka.ms/edgescan y 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
- 60. #Codemotion2015
- 64. #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)
- 65. #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
- 66. A fork from the past
- 70. #Codemotion2015 To date, we’ve made of these types of fixes in Edge.
- 71. Removing code (yujuuu!) VML attachEvent() VB Script Conditional Comments X-UA-Compatible currentStyle currentStyle IE Layout Quirks MS-prefixed Events
- 72. 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
- 73. #Codemotion2015
- 74. #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
- 75. #Codemotion2015 ¡Tu opinion cuenta! Real World Usage Data Developer/Partner Feedback Standards Stability Development Capacity