Herramientas para construcción y prueba de sitios...
Transcript of Herramientas para construcción y prueba de sitios...
![Page 1: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/1.jpg)
“Herramientas para construcción y pruebade sitios Web”
Rogelio Ferreira Escutia
![Page 2: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/2.jpg)
Control de Versiones
![Page 3: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/3.jpg)
“GitHub", https://github.com/, noviembre 2013 3
![Page 4: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/4.jpg)
“Kenai", https://kenai.com/, noviembre 2013 4
![Page 5: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/5.jpg)
Diseño de tipografía
![Page 6: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/6.jpg)
“TypeWonder", http://typewonder.com/show, noviembre 2013 6
![Page 7: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/7.jpg)
“FontFonter", http://typewonder.com/show, noviembre 2013 7
![Page 8: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/8.jpg)
“Webtype Font Swapper", http://www.webtype.com/tools/swapper/, noviembre 2013 8
![Page 9: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/9.jpg)
“Web Fonts Preview", http://www.webfontspreview.com//, noviembre 2013 9
![Page 10: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/10.jpg)
Análisis de Código
![Page 11: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/11.jpg)
11- .
El validador de la W3C nos permite evaluar si un sitioWeb cumple con los estándares de HTML.
Validar código HTML5
“The W3C Markup Validation Service", http://validator.w3.org/, noviembre 2013
![Page 12: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/12.jpg)
12- .“The W3C Markup Validation Service", http://validator.w3.org/, noviembre 2013
![Page 13: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/13.jpg)
13- .
El validador de la W3C nos permite evaluar si un sitioWeb cumple con los estándares de CSS3.
Validar CSS3
“El servicio de validación de CSS del W3C", http://jigsaw.w3.org/css-validator/, noviembre 2013
![Page 14: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/14.jpg)
14- .“El servicio de validación de CSS del W3C", http://jigsaw.w3.org/css-validator/, noviembre 2013
![Page 15: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/15.jpg)
“infohound", http://infohound.net/tidy/, noviembre 2013 15
![Page 16: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/16.jpg)
“Firebug", https://addons.mozilla.org/es/firefox/addon/firebug/, noviembre 2013 16
![Page 17: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/17.jpg)
“Firebug", https://addons.mozilla.org/es/firefox/addon/firebug/, noviembre 2013 17
![Page 18: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/18.jpg)
Análisis de Navegadores
![Page 19: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/19.jpg)
19- .
Con “html5test.com” podemos verificar el grado desoporte del navegador con respecto al estándarHTML5.
Soporte de HMTL5 de un navegador
“HTML5test", http://html5test.com/, noviembre 2013
![Page 20: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/20.jpg)
20- .
Soporte de HMTL5 (Chrome 31)
“HTML5test", http://html5test.com/, noviembre 2013
![Page 21: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/21.jpg)
“Browsershots", http://browsershots.org/, noviembre 2013 21
Previsualizar en diferentes navegadores
![Page 22: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/22.jpg)
“Fishbowl", http://ie.microsoft.com/testdrive/Performance/FishBowl/, noviembre 2013 22
![Page 23: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/23.jpg)
23- .
Por medio de esta página web podemos verificar sinuestro navegador soporta el estándar de WebGL.
Soporte de WebGL
“Your browser supports WebGL", http://get.webgl.org/, noviembre 2013
![Page 24: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/24.jpg)
24- .
Soporte de WebGL
“Your browser supports WebGL", http://get.webgl.org/, noviembre 2013
![Page 25: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/25.jpg)
Análisis de Accesibilidad
![Page 26: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/26.jpg)
26- .
El validador nos permite evaluar si un sitio cumple conlos estándares de Accesibilidad.
Validar Accesibilidad
“TAW - Servicios de Accesibilidad y movilidad Web", http://www.tawdis.net/, noviembre 2013
![Page 27: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/27.jpg)
27- .
Validar Accesibilidad
“TAW - Servicios de Accesibilidad y movilidad Web", http://www.tawdis.net/, noviembre 2013
![Page 28: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/28.jpg)
28- .
Validar Accesibilidad
“TAW - Servicios de Accesibilidad y movilidad Web", http://www.tawdis.net/, noviembre 2013
![Page 29: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/29.jpg)
Análisis de Navegabilidad
![Page 30: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/30.jpg)
30- .
Por medio de Lynx, se puede navegador en modotexto, sin CSS, ni fotos, ni videos, verificando lafacilidad de navegación.
Análisis de Navegabilidad
“Lynx", http://lynx.browser.org/, noviembre 2013
![Page 31: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/31.jpg)
31- .
Análisis de Navegabilidad (Lynxlet)
“Lynxlet", http://habilis.net/lynxlet/, noviembre 2013
![Page 32: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/32.jpg)
Análisis deRWD
![Page 33: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/33.jpg)
“RWD", http://jhanno.net/RWD/ejercicio002/c/, noviembre 2013 33
![Page 34: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/34.jpg)
“Layoouit!", http://www.layoutit.com/build, noviembre 2013 34
![Page 35: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/35.jpg)
Análisis deDispositivos Móviles
![Page 36: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/36.jpg)
36- .
El validador nos permite evaluar si un sitio cumple conlos estándares de Accesibilidad.
Validar Accesibilidad Móvil
“TAW - Servicios de Accesibilidad y movilidad Web", http://www.tawdis.net/#mobileok, noviembre 2013
![Page 37: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/37.jpg)
37- .
Validar Accesibilidad Móvil
“TAW - Servicios de Accesibilidad y movilidad Web", http://www.tawdis.net/#mobileok, noviembre 2013
![Page 38: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/38.jpg)
38- .
Validar Accesibilidad Móvil
“TAW - Servicios de Accesibilidad y movilidad Web", http://www.tawdis.net/#mobileok, noviembre 2013
![Page 39: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/39.jpg)
“Screenfly", http://quirktools.com/screenfly/, noviembre 2013 39
![Page 40: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/40.jpg)
Análisis de Velocidadde carga/descarga
![Page 41: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/41.jpg)
“Speedtest", http://www.speedtest.net/, noviembre 2013 41
![Page 42: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/42.jpg)
“pingdom", http://tools.pingdom.com/fpt/, noviembre 2013 42
![Page 43: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/43.jpg)
“Web Page Analyzer", http://websiteoptimization.com/services/analyze/, noviembre 2013 43
![Page 44: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/44.jpg)
Análisis de Ranking
![Page 45: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/45.jpg)
“Alexa", http://www.alexa.com/siteinfo/xumarhu.net, noviembre 2013 45
![Page 46: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/46.jpg)
“Load Impact", http://loadimpact.com/, noviembre 2013 46
![Page 47: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/47.jpg)
“woorank", http://www.woorank.com/es/, noviembre 2013 47
![Page 48: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/48.jpg)
“Google Analytics", http://www.google.com/analytics/features/index.html, noviembre 2013 48
![Page 49: Herramientas para construcción y prueba de sitios Websagitario.itmorelia.edu.mx/~rogelio/web_herramientas.pdf · - .13 El validador de la W3C nos permite evaluar si un sitio Web](https://reader033.fdocuments.net/reader033/viewer/2022052500/5f1068187e708231d448f48d/html5/thumbnails/49.jpg)
Rogelio Ferreira Escutia
Instituto Tecnológico de MoreliaDepartamento de Sistemas y Computación
Correo: [email protected] [email protected]
Página Web: http://antares.itmorelia.edu.mx/~kaos/http://www.xumarhu.net/
Twitter: http://twitter.com/rogeplusFacebook: http://www.facebook.com/groups/xumarhu.net/