![Page 1: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/1.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Elartedecrear(buenos)sitiosweb:diseño,desarrolloyestándares
MiriamAvila,IsabelVillarrealeIvanSan2esteban
Monterrey,NuevoLeón,México
Agosto2008
Taller
![Page 2: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/2.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Objetivos• Conocerelprocesoparacrearunbuensi2oweb
• Iden2ficarlasnecesidadesdetuorganización
• Conocerestrategiasyconceptosclavepara
organizarypresentarsuinformación,programar
siguiendoestándaresydiseñarefec2vamente
• Conocerrecursosgratuitosparacrear,montarymantenerunsi2oweb
• Sabercómofacilitarquelosbuscadoresveana
susi2oycómoatenderasusvisitantes
![Page 3: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/3.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Parte1.
¿Quées
unbuensi2oweb?
![Page 4: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/4.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
ProgramaPARTE1:QUÉESUNBUENSITIOWEB(1.5h)
• Unsi2oweb
• Partesdeunsi2oweb
• Unbuensi2oweb
![Page 5: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/5.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unsitioweb
EsunafuentedeinformaciónadaptadaparalaWorldWideWeb(WWW)yaccesiblemedianteunnavegadordeInternet.
EstainformaciónsepresentageneralmenteenformatoHTMLypuedecontenerhiperenlacesaotraspáginasweb...
FuenteWikipedia
![Page 6: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/6.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unsitioweb
![Page 7: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/7.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Partesdeunsitioweb
![Page 8: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/8.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Partesdeunsitioweb
Encabezado• Elencabezadoiden2ficaaunsi2owebdemanerarápida.
![Page 9: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/9.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Partesdeunsitioweb
Navegación• Eseláreaquecon2eneloshipervínculoshaciaelcontenidodelapágina.
![Page 10: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/10.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Partesdeunsitioweb
Contenidoocuerpo• Eslapartemedulardelsi2oweb.
![Page 11: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/11.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Partesdeunsitioweb
Piedepágina• Usualmentecon2enelainformaciónquerespaldaelsi2oweb:desdecondicionesdeusohastaavisoslegales.
![Page 12: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/12.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
OK.Entonces…
¿quéesunbuensi2oweb?
![Page 13: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/13.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb• representalaesenciadeuna
organización• eslaexpresióndeunapersona• llevalosproductosyserviciosdeuna
organizaciónalaInternet• resuelvedudas• minimiza problemas• ahorradinero• generavalorysa2sfacción
FUNCIONA
![Page 14: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/14.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Elartedecrear(buenos)sitiosweb:diseño,desarrolloyestándares
MiriamAvila,IsabelVillarrealeIvanSan2esteban
Monterrey,NuevoLeón,México
Agosto2008
Taller
![Page 15: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/15.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Parte2.
Laplaneación
![Page 16: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/16.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
??
![Page 17: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/17.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿Cómosecreaunaexperienciadeusuarioenlaweb?
![Page 18: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/18.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
SegúnJJGarreP
![Page 19: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/19.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Estrategia
![Page 20: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/20.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Estrategia
Alcance
![Page 21: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/21.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Estrategia
Alcance
Estructura
![Page 22: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/22.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Estrategia
Alcance
Estructura
Esqueleto
![Page 23: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/23.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Estrategia
Alcance
Estructura
Esqueleto
Superficie
![Page 24: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/24.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Inves@gar
![Page 25: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/25.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Investigar
DeLouRosenfeld
![Page 26: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/26.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Investigarelcontexto
• Relacionespersonales
•Metas
• Tecnología
• Recursoshumanos
• Recursos
![Page 27: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/27.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Investigarelcontenido
• Elsi2oactual
• Estructura
• Análisisdelcontenido
• Flujo
• Benchmarking
![Page 28: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/28.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Investigaralosusuarios
• Estadís2cas
• Entrevistascondependientes
• Entrevistasconusuarios
![Page 29: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/29.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Organizar
![Page 30: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/30.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Organizar
![Page 31: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/31.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Organizar
![Page 32: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/32.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Organizar:clasi@icarynombrar
Considera:• ¿Mutuamenteexcluyentes?
• Profundooancho
Recurrea:• Cardsor2ng
• Pruebasconusuarios
• Benchmarking
![Page 33: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/33.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Organizar:clasi@icarynombrar
![Page 34: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/34.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Navegación
![Page 35: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/35.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Navegación
![Page 36: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/36.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Navegación
![Page 37: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/37.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Navegación
![Page 38: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/38.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Navegación
hPp://www.jjg.net/ia/visvocab/
![Page 39: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/39.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Navegación
![Page 40: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/40.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Navegación
![Page 41: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/41.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Navegación
Global
Contextual
Local
![Page 42: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/42.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿Quésabemosahora?
![Page 43: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/43.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Alpapel
![Page 44: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/44.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñodeinformación
![Page 45: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/45.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñodeinformación
![Page 46: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/46.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñodeinformación
![Page 47: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/47.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñodeinformación• Tiposdecontenido
• Patronesrepe2dos
• Importanciadecadaelemento
• Navegación/interacción
![Page 48: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/48.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñodeinformación
![Page 49: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/49.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñodeinformación:herramientas
Papelypluma
![Page 50: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/50.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñodeinformación:herramientas
SoHware
![Page 51: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/51.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñodeinformación:herramientas
Buenosejemplos
• Smashingmagazine.com
• Konigi.com
• PaPerntap.com
![Page 52: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/52.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
![Page 53: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/53.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Parte3.
Manosalaobra
![Page 54: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/54.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
ProgramaPARTE3:MANOSALAOBRA(6.5h)
• Cómoelegirunadministradordecontenido(cms)
• Buenasprác2casdeHTMLyCSS
• Diseñoweb
• Herramientasparadiseñaryprogramar
• Aprovechalosserviciosweb
• Escribiendoparalaweb
![Page 55: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/55.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Administradoresdecontenido(CMS)
¿Cómoelegirunadministradordecontenido?
![Page 56: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/56.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Administradoresdecontenido(CMS)• So#wareparalapublicaciónyorganizacióndelcontenidodeunapáginadeInternet.
• Sonú2lesparasi2osqueusancontenidovariado:– textosyimágenes,
– audioyvideo,
– seccionesdinámicasyestá2cas.
![Page 57: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/57.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
HerramientasdeunCMS• Administraciónonlinedelcontenido
• Fácilimportaciónyexportación
• Opcionesdeprivacidad,indexación,SPAM,etc.
• Editoresdecódigo
• Manejodeusuariosypermisos
• Retroalimentación
![Page 58: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/58.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Ventajas• Puedesadministrartusi2owebatravésdeInternet.
• Unusuariosinconocimientodeprogramaciónpuedeeditarcontenidofácilmente.
• Nonecesitastécnicosoprogramadoresparahacercambiosentusi2oweb.
![Page 59: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/59.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
ComparaciónCMSdepropietarios
CMSopensource
Licencia Costo Gratuita
Modificaciones Segúnlacompañía Libres,hechasporusuarios
Soportetécnico CentrodeatenciónCentrodeservicioContratacióndesoporte
DocumentaciónForosdediscusiónSoporteexterno
Ejemplos MicrosocSharepoint Wordpress
![Page 60: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/60.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CMSdepropietarios
• MicrosocSharepoint
• Documentum
• EM3
• Ingeniux
CMSopensource
• Joomla!
• Drupal
• PHPNuke
• MovableType
• Wordpress
• Lyceum
![Page 61: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/61.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
MicrosoftSharepoint
![Page 62: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/62.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Wordpress
![Page 63: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/63.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CriteriosparaseleccionarCMS• ¿Qué2podesi2oplaneasconstruir?
• ¿Quétangrandeplaneasqueserátusi2o?
• ¿Tendrásinformaciónestá2ca,dinámica,unaovariassecciones?
![Page 64: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/64.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CriteriosparaseleccionarCMS• ¿Tendrásoperacionesotransaccionesenlínea?
• ¿Cuálessonlos2posdecontenidoquepublicarás?– Arkculos,fotogralas,pistasdesonido,videos,…
• ¿Necesitashacermodificacionespar2cularesparatusi2o?
![Page 65: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/65.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CriteriosparaseleccionarCMS• ¿Quéherramientaspar2cularesnecesitarásentusi2o?– RSS,forosdediscusión,blogs,calendarios,podcasts,…
• ¿Cuántoscolaboradoresdecontenidotendrátusi2o?¿Conquépresupuestocuentas?
![Page 66: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/66.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Buenasprácticas
HTML,(X)HTML,CSS,etc.
![Page 67: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/67.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿QuéesXHTML?• Esellenguajebásicoparalaprogramaciónweb.
• Manejae2quetasencorchetesagudos(<y>),consusrespec2vosatributosentrecomillas(““).– Ejemplodeinsercióndeunaimagen:<imgsrc=“foto.jpg”width=“500px”/>
![Page 68: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/68.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿QuéesXHTML?• E2quetasdeunalínea
Ejemplo:<imgsrc=“foto.jpg”>
• E2quetasdeaperturaycierreEjemplo:<p>Estoesunpárrafo.</p>
![Page 69: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/69.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
DelHTMLalXHTML• ElXHTML2enecódigomásestrictoymejorasensusintaxis.– Minúsculas
– Cierredee2quetasconommitag(/>)obligatorio
– Correctajerarquíayanidación(nes1ng)delase2quetas
– YdejareldiseñoparaelCSS
![Page 70: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/70.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
![Page 71: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/71.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
![Page 72: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/72.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
![Page 73: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/73.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
EstructuraXHTML<html></html>
Todoelespaciodeldocumentodondehaycódigo
<head></head>Laseccióndedatosacercadeldocumento
<Itle></Itle>
Elktulodelapágina
<body></body>
Elcuerpo:estructura,texto,imágenes,videos,etc.
![Page 74: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/74.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CómomejorartucódigoXHTML• ValidaconherramientasdelW3Cantesdepublicar.
Esmásfácilhacerlosiusaslasbarrasdeherramientasdedesarrollowebqueterecomendamos.
Herramienta:hwp://www.w3.org/QA/Tools/#validators
![Page 75: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/75.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CómomejorartucódigoXHTML• Usalase2quetassegúnlaúl2marevisióndeXHTML
Ejemplo:Usare2quetasXHTMLcomostrong,em,header,p,br.
Incorrecto:Usare2quetasHTMLcaducascomofont,u,s,b,i,name,menu,center.
Herramienta:Catálogodee2quetasdelaW3Chwp://www.w3schools.com/tags/default.asp
![Page 76: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/76.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CómomejorartucódigoXHTML• Instalavariosnavegadores,almenosInternetExploreryFirefox.
Revisatupáginaendiversosnavegadoresendis2ntasversiones.
Herramienta:UsaBrowsershots(hwp://browsershots.org)pararevisardis2ntosnavegadoresyversiones.
![Page 77: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/77.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿Quénavegadoresusan?
![Page 78: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/78.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿Quétamañosdepantallausan?
![Page 79: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/79.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CómomejorartucódigoXHTML• Usalae2queta<div>paraestructurartupágina.Usalastablas(<table>)paraorganizarcuadrículasdedatos.
Curso:Cómohacerunapelículadesdetucelular
Dirigidoa: Jóvenesyadultos
Duración: Del9al20desep2embre
Horario: 19a21horas,exceptodomingos
Costo: $200pesosporsesión
![Page 80: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/80.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿Porquénodiseñarcontablas?• Lastablassonparapresentardatos
• Usarlasenestructuraimplicamenosaccesibilidad
• Hacenquelossi2osnoseanflexibles
![Page 81: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/81.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CómomejorartucódigoXHTML• Incluyeunadescripciónenlae2quetaALTparalasimágenescuandoéstastenganinformaciónoilustrentexto.
Ejemplo:<imgsrc=”arbol.jpg”alt=”Fotograladeunárbol”/>Incorrecto:<imgsrc=”arbol.jpg”/>
Incorrecto:<imgsrc=”borde.jpg”alt=”Esteesunbordedecora2vo”/>Ejemplo:<imgsrc=”borde.jpg”alt=“”/>
![Page 82: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/82.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CómomejorartucódigoXHTML• Usalase2quetas<p>y</p>paradividirpárrafosdetexto.
Ejemplo:<p>Estoesunpárrafo.</p>Incorrecto:Estoesunpárrafo.<br/><br/>
UsaelcódigodemanerasemánIca.
Cadae2quetadeXHTML2eneunaprioridadparalosservidoresdebúsqueda.
![Page 83: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/83.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CómomejorartucódigoXHTML• Definetusktulosatravésdelase2quetas<h1>,<h2>,<h3>,<h4>,<h5>y<h6>segúnsuimportancia.
Ejemplo:<h2>Estoesunsubktulo</h2>Incorrecto:<strong><em>Estoesunsubktulo</em></strong>
Evitacrearktuloscon<strong>y2pogralamásgrande.
![Page 84: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/84.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CómomejorartucódigoXHTML• AsegúratedeseñalarenelDocumentType(DTD)larevisióndeXHTMLquesigues.
• Escribelosatributosdeunae2quetasiempreenelmismoorden.
![Page 85: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/85.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CómomejorartucódigoXHTML• Asegúratequelainformaciónesencialdetusi2owebestéenlosprimeros3KBs.
• Dividetucódigoenapartadosusandocomentarios(<!‐‐)
Ejemplo:Encabezado,cuerpo,menú.<!‐‐encabezado‐‐>
![Page 86: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/86.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CómomejorartucódigoXHTML• Construyesi2osfluidosyflexibles,ytrabajaconunidadesdeproporción.
Herramienta:EmCalculator‐hwp://riddle.pl/emcalc/
Depuntosypicasa“ems”.Depixelesaporcentajes.
![Page 87: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/87.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CómomejorartucódigoXHTML• Usaplan2llasdecódigo(comolasdeDreamweaver)parafacilitarrediseñosoactualizacionesmasivas.
![Page 88: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/88.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿QuéeselCSS?• EsellenguajeparadiseñowebquepermitemodificarloselementosXHTMLdefinidosenunapáginaelectrónica.
• Estáorganizadoendocumentosllamadoshojasdees2lo(“stylesheets”).
![Page 89: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/89.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿QuéeselCSS?• EselcomplementodellenguajeXHTML.
• Podemosllamarlocomorecursoexternoenelencabezadodeunapágina(enlasecciónhead)oencadae2quetaquenecesitemos(enlasecciónbody).
![Page 90: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/90.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CSSyeldiseño• Unapáginapuedecambiarsuhojadees2loytenerundiseñocompletamentedis2ntoaunqueloselementosdeXHTMLnoseanalterados.
Ejemplo:ZenGarden–www.csszengarden.com
• Unahojadees2lopuedeserundiseñocompletamentedis2nto.
![Page 91: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/91.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
XHTMLeselqué,CSSeselcómo• ConCSSseparaseldiseñodelaestructuraparahacerloflexible.
Ejemplo:ZenGardenhwp://www.csszengarden.com/
• Beneficios:- Disminuireltamañodelapágina
- Diseñoflexible(mismocontenido,dis2ntosdiseños)
- Mejorindexación
![Page 92: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/92.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
VentajasdeusarCSS• XHTMLSeencargadelaestructuradeunapáginawebydefineloselementosquehabráenella:texto,tablas,imágenes,objetos.
• CSSModificaloselementosXHTML,ylesdacaracterís2cascomocolor,tamaño,2pograla,posición,alineación,eimágenesdefondo.
![Page 93: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/93.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
EstructuradelCSS<styletype="text/css">
.border{border:4pxsolid#CCCCCC;
}#encabezado{
color:#009966;background‐color:#FFFFFF;font‐size:2em;
}</style>
![Page 94: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/94.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
EstructuradelCSS
![Page 95: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/95.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
EtiquetasdeCSS• Cuatro2posdee2quetas(selectores):
– ids(#nombre)
– clases(.nombre),
– selectorescontextuales(nombre)
– ounacombinacióndelosanteriores.
![Page 96: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/96.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
EtiquetasdeCSS• IDs(#nombre)
Paraseccionesúnicascomolasbarrasdenavegaciónyelencabezado.
Esusadoprincipalmentecon<div>,comoespaciosrectangulares.
Ejemplo:#encabezado{width:80%;
}
…ydespuésllamarloenelcódigoXHTML:<divid=“encabezado”>
![Page 97: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/97.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
EtiquetasdeCSS• Clases(.nombre)
Paraes2losqueserepitenmásdeunavezenunapágina,comoformatodektulos,ligas,botonesytablas.
Ejemplo:
.h2{
color:#5A5A5A;background‐color:#EEEEEE;padding:.8em;border:1pxsolid#CCCCCC;
}
…ydespuésllamarloenelcódigoXHTML:<spanclass=“h2”>
![Page 98: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/98.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
EtiquetasdeCSS• Selectorescontextuales(nombre)
SonelementosdeXHTML(<entrebrackets>)quepuedensermodificadasconCSS.
Ejemplo:
img{
border:0px;
}
ul{
list‐style‐type:square;
}
![Page 99: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/99.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
EtiquetasdeCSS• Combinaciones
Losdis2ntosselectorespuedencombinarseparahaceres2loslocalesenlaspáginas.
Ejemplo:
ul.bullet{list‐style‐posi2on:outside;
}
ul.nobullet{list‐style‐type:none;
}
![Page 100: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/100.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
AlgunosatributosdeCSSfont:(nombredela2pograla)
color:#FF0000;(colorhexadecimal)
background‐color:#FFFFFF;(colorhexadecimal)
text‐align:lec,right,center
text‐decoraIon:blink,line‐through,underline,none
border‐style:solid,double,dowed,dashed
padding:(número,enpx,em,etc.)
margin:(númeroenpx,em,etc.)
float:lec,right,none
![Page 101: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/101.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Estiloslocalesyexternos• Comoelatributo“style”enlae2quetadeunelemento,demaneralocal.
Ejemplo:<divstyle=”background‐color:#000000;”>
• Comounahojadees2loexterna,importadacone2quetasen“camposextras”deWebability.Ejemplo:<linkrel="stylesheet“href=“es2lo.css"type="text/css"/>
![Page 102: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/102.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Estiloslocalesyexternos• Comounahojadees2loembebida,contodoslosatributosusados.
Ejemplo:
<styletype="text/css">
.border{
border:4pxsolid#CCCCCC;
}
.2tlev202{
color:#FFFFFF;background‐color:#CC0000;
}
</style>
Luego,enXHTML:<divclass=“border”>
![Page 103: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/103.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
HerenciaenCSS• Laspropiedadesdeunae2quetaseheredanalase2quetasqueéstacon2ene.
Ejemplo:Siindicamoselcolornegroparala2pograladelmenú…#menu{color:#000000;}…todoloqueestéadentro(párrafos,ktulos,viñetas)tendráelcolornegro,amenosdequeseñalemosotracosa.
Algunase2quetas(comomargin,paddingyborder)noheredansuspropiedades.
![Page 104: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/104.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
HerenciaenCSS• Cuandotenemosvariasindicacionesparaunmismoelemento,laúl2maeslaquesetomaencuenta.
Ejemplo:
h1{border:0;}h1{border:1pxsolid#cccccc;}
![Page 105: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/105.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb
Reglasbásicas:
¿Cómopiensanlosusuarios?
![Page 106: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/106.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:reglasbásicas
• LosusuarioswebnosonmuydiferentesdelosclientesdeunaIendaenlavidareal.
![Page 107: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/107.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:reglasbásicas
• Losclicsnacendelaatraccióny/olauIlidad.
![Page 108: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/108.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:reglasbásicas
• Losusuarioswebaprecianlacalidadylacredibilidad.
![Page 109: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/109.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:reglasbásicas
• Losusuariosnoleen.Escanean.
![Page 110: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/110.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:reglasbásicas
• Losusuarioswebsonimpacientesyesperangra2ficacionesinstantáneas.– unsi2odebesa2sfacerlasexpecta2vasdelosvisitantes
![Page 111: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/111.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:reglasbásicas
• Losusuarioswebnosiempretomanlasmejoresdecisiones.
![Page 112: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/112.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:reglasbásicas
• Losusuarioswebconfíanensuintuición.
![Page 113: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/113.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:reglasbásicas
• Losusuarioswebdeseantenerelcontrolsobresunavegador.
![Page 114: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/114.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb
Poreso…
Lasreglasdeoro
![Page 115: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/115.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Nohagaspensaralosusuarios
– Unapáginadebeserobviayexplicarseasímisma1.
– Lanavegacióndebeserclara,conpistasvisualesadecuadasyligasfácilmentereconocibles.
Del libro Don’t make me think de Steve Krug’s, primera ley de la usabilidad.
![Page 116: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/116.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Nohagaspensaralosusuarios
– Losusuariosen2endenmejorlossi2oswebdiseñadosenpatronesenF2.
– Reduciendolaincer2dumbredeunusuarioanteelsi2o,ayudarásaquelosusuarioscumplansusobje2vos.Silosusuariosnoencuentransucamino,teabandonarán.
Del artículo F-Shaped Pattern For Reading Web Content de Jakob Nielsen's
![Page 117: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/117.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Usuarioscuriososeimpacientes=cerocomplicaciones
– Ofreceserviciossencillos,prác2cosydirectos
– Lasa2sfaccióneselmejorgancho
– Aumentalaconfianzadelosusuarios,gra2ficandosusaccionescorrectasyayudandoaresolverlasincorrectas
![Page 118: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/118.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Unsi2owebformapartedelaimagencorporaIvadeunaorganización
– Sudiseñodebeseratrac2voynoexagerado
– Debecontarconunapaletadecolorapropiada,tantoalobje2voquesedeseaperseguircomoaldelaimagendelaorganización
![Page 119: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/119.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Creaundiscursovisualclaro
– OrganizaParaproveerunaestructuralimpia,consistente,yconnavegaciónclara
– EconomizaHazmásconmenosempleandolosprincipiosdesimplicidad,claridad,dis2nción,yénfasis
– ComunicaEmpataeldiseñoalaaudiencia,hazlolegible
![Page 120: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/120.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Jerarquizaysacaelmejorprovechodelospuntosfocales
– Organizaapropiadamentelapáginaprincipaldelsi2o
– Ofrecepistasqueevitenincer2dumbre
– Nodistraigasalosusuariosconimágenes,efectosoaccionesinnecesarias
– Diseñapensandoenelusuario
![Page 121: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/121.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoroJerarquíaypuntosfocales
hwp://www.subtrac2on.com/
![Page 122: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/122.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Escues2óndesimplicidad
– Lasimplicidadtraeelzenaunsi2o
– Unusuariosobretodobuscainformación– Ylosusuarios,prefierenversi2osbasadosentexto
![Page 123: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/123.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Notemasalespacioenblanco
– Elespacioblancorefierealasporcionesdeespacioquesecreanentreloselementos
– Elbuenusodeesteespaciogeneraequilibrio,favorecelalecturaycreaunacomposiciónesté2ca
– Lasestructurascomplejassevuelvenordenadasconespacionega2vosuficiente
– Separaloselementosvisuales,ayudaagenerarjerarquía
![Page 124: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/124.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoroUnsi1osimpleybienequilibrado
hwp://www.subtrac2on.com/
![Page 125: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/125.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Eligebienaloselementosestelares
– Ofrecealosusuariosunavisiónrápida,claraydirectadelasfuncionesdisponiblesentusi2o.Esunabuenaprác2cadediseñodeinterfacesyesunagarankadesa2sfaccióndetususuarios.
![Page 126: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/126.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoroUnestelarconénfasis
hwp://twiwer.com/
![Page 127: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/127.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Evitaelexcesodeinformación
– Lagentelee25%máslentoenpantallaqueenpapel
– El79%prefierenescanearvisualmentelainformaciónenvezdeleerlaadetalle
– Losusuariosleeránsóloel20%deltextoenunapáginapromedio
Fuente !"#$%&'()*+),:
-./,0$&*)),&*$+&.+."1($+&),&(,0)1,)0 - http://www.useit.com/alertbox/9710a.html
2.3&0",&4$5$&*)),&*$+&.+."1($+ - http://www.useit.com/alertbox/percent-text-read.htm l
![Page 128: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/128.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Escribeparaquetelean(yen2endan)
– Elwebnoeslomismoquelaprensa
– Eles2lodelaredaccióndebeserconcisoypreciso
– Vedirectoaloshechos
– Escribepárrafoscortos,conelementosenlistasyktulosclaros
![Page 129: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/129.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoroUnsi1opreciso
http://es.facebook.com/
![Page 130: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/130.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Loselementosconvencionalessontusamigos
– Usapatronesyelementosalosquelosusuariosyaestánacostumbrados
– Lospatronesdisminuyenlacurvadeaprendizajeporquelagenteyasabequehacer,cuándoyquéesperaracambio
– Lasconvencionesayudanagenerarconfianzaycredibilidad
– Cumplelasexpecta2vasdelosusuarios
![Page 131: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/131.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoroUsaelementosconvencionalesvscrea1vidad
http://www.usolab.com/wl/images/atm-eco-feedback.jpg
![Page 132: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/132.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Prueba,pruebayvuelveaprobar
– Todoproyectowebdebeprobarse,esunaleynaturaldelaspruebasdeusabilidad
– Hacerpruebasantes,duranteyfrecuentementeaunsi2osóloayudaránamejorarcadaaspectodelsi2o
– Erraresmalo,peoresnosaberloodejarlo
– Probaresunprocesoitera2vo
– Eldiseñador,desarrolladorocliente,nosonelusuario.Pruebaconusuariosreales.
![Page 133: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/133.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb
Tendencias
![Page 134: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/134.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendencias• Estructurassimples
– Usaestructurassimplesde1a3columnas– Losdiseñadoresentendieronqueundiseñosimplefuncionamejor(pocoselementos,bienorganizados)
– Losdiseñosengeneralsepuedenentenderalprimervistazo,sintenerqueestarvagandoparaentenderelconceptogeneral.Estoesmuchomástranquilizanteyefec2voencues2óndenavegaciónorientadaqueenañosanteriores.
![Page 135: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/135.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendencias
Alistapart 8020Publishing
Estructurassimples
![Page 136: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/136.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendencias• Diseñocentrado
– Eldiseñocentradoofrece:confianza,balance,simpleza,zen.
– Lospatronesdediseñoalineadoalaizquierdacadavezsonmenoscomunes,lomismoquelasestructuraslíquidas.
![Page 137: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/137.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendencias• Diseñodelcontenido
– Laarquitecturadeinformacióntrajoalaconcienciapopularelsen2dodeuncontenidobienestructurado
– Actualmentehaymásatenciónhaciacómolascosassepresentanentérminosdecontenido,queenelmaquillaje(backgrounds,coloresyformas)
– Hayqueseguirelprincipio“atraelavistadelusuarioalcontenido”
– Losdiseñosexitososdehoyendíahacenverbienalcontenidonoaldiseñador
– Losdiseñadoressoncomunicadoresnodecoradores
![Page 138: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/138.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendencias• Efectos3D,efectos3Dymásefectos3D– Eldiseñodeestaépocaestáenmarcadoenefectos:degradados,sombras,esquinasredondas,iconostridimensionales,etcétera.
– Sinembargoesinteresanteverqueelresultadodeestatendenciasimplificóeldiseñoengeneralenvezdesaturarlo,dandopasoaelementosdestacadospuntuales
![Page 139: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/139.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendencias
Reflejosysombras
Anunciosdeestrella
![Page 140: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/140.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendencias• Fondosclarosoneutros
– Lamayoríadelossi2os2enenfondosplanos,casisiempreblancosodegradadosengrises.Estagamaneutral,simple,yrelajadaesunabaseperfectaparacoloresvibrantes.
![Page 141: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/141.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendenciasFondosclarosoneutros
AbstractsManager AnthonyPhillips
TDGIntegratedArtypapers
![Page 142: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/142.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendencias• Tintesdecolorbrillantesusadosconprecisión– Eldiseñodelosúl2mosañossobresaleporloscoloresjuvenilesyvibrantes,nosóloparalosblogs,sinoparasi2oscomercialesimportantes.
– LaWeb2.0trajoalastendenciaenmodalosverdes,anaranjados,azulesyvioletasaplicadosagrandesktulos,iconosenormesydestellosdecoloralolargodelossi2os.
![Page 143: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/143.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendenciasTintesbrillantes
Iconosllama1vos
![Page 144: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/144.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendencias• Espacioblanco
– Elespacioblancononecesariamentedebeserblanco,simplementedeserunespacio.
![Page 145: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/145.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendencias• Textogrande
– Lostextosmásimportantedelapáginasonmásgrandesqueeltextoregular
Woothemes JasonSantaMaria
![Page 146: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/146.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas
Paradiseñaryprogramar
![Page 147: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/147.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:diseñoweb• Editoreswebdeimágenes
– PixenateEditorgratuitodefotogralasenlínea.PicnikenFirefox,PicnikenFacebook
– Herramientagratuitaenlíneadeedicióndeimágenes,funcionacomoextensióndeFirefoxoaplicaciónenFacebook.
– PicasaHerramientagratuitaparaeditarfotogralas,yaseaenlíneaoentucomputadora.Permitecrearálbumesdedistribucióndeimágenes.
![Page 148: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/148.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:diseñoweb• Paletasdecolor
– ProcolorpalewesocwaredeColourLoversHerramientacompleksimaparaelegircoloresypaletas.Loscolorescasinuncasonweb‐safe.
– 4096ColorwheelHerramientadeseleccióndecoloresconuncompara2vodecoloresweb‐safe,web‐smartyun‐safe.
– ColorcubedemoreCrayonsHerramientadeseleccióndecoloresweb‐smartportonalidad.
![Page 149: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/149.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:diseñoweb• Archivosdeimágenes
– GewyimagesElmásgrandeycompletoarchivofotográficoydeilustracionesenlaweb.Concosto.
– Stock.xchngAmplioarchivogratuitodefotografíasdeusolibre.Requiereregistro.
– PixelperfectdigitalBuenarchivodefotografíasdigitalesgratuitas,también2enetexturasygráficos3D.
– TrulyfreestockPequeñoarchivofotográficorealmentegratuito.
![Page 150: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/150.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:diseñoweb• Archivosdeiconos
– IconBuffetCatálogodeiconosdeexcelentecalidad.Algunosgratuitos.
– FreewaredeIconFactoryCatálogogratuitodeiconosdeunadelasmejorescompañíasdediseñodeiconosprofesionales.
– famfamfamIconsCatálogogratuitodeiconos,muypopular.
![Page 151: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/151.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:diseñoweb• Archivosdevector
– VectorStockCatálogodeilustracionesvectoriales.Concosto.
– DevianArtCatálogodeimágenes,ilustraciones,fondosdepantalla,texturas,etc.Descargasporregistrodeusuario.
![Page 152: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/152.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:diseñoweb• Favicons
– Favicongenerator1.0Generadorenlíneadefaviconsapar2rdeimágenesregulares.
– Favicon.ccHerramientaparadiseñarfavicons,permiteimportarimágenesycorregirlas.
![Page 153: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/153.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:diseñoweb• Inspiración
– AListApart:Webmagazineforpeoplewhomakewebsites
– BoxesandArrows:Thedesignbehindthedesign
![Page 154: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/154.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:programación• EditoresdeHTMLy(X)HTML
– NVU(newview)ConsoporteparaHTML,XHTML,CSSyJava.ConeditorWYSIWYG.Gratuito.
– Notepad++Editordecódigo.ConsoporteparaHTML,XHTML,CSS,asícomoPHP,Pascal,Pearl,entremuchosotros.Gratuitoydecódigoabierto.SineditorWYSIWYG.
– EvrsocFirstPage2006SocwaregratuitoparadesarrollowebcomparableconDreamweaver.
![Page 155: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/155.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:programación• Ayudaparacodificar
– w3schoolTutorialesgratuitosdelaWorldWideWebConsor2um(W3C)
– AcordeóndeHTMLHojasdereferenciaconlase2quetasdeusomáscomúndelhtml.
– AcordeóndeCSSHojadereferenciaconlase2quetasdeusomáscomúnparaprogramarhojasdees2lo.
![Page 156: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/156.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:programación• Formularios
– WufooEditorenlíneadeformulariosbasadosenCSS,configurables.
– IcebrrgEditorenlíneadeformulariosbasadosenCSS.
![Page 157: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/157.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:validadoresdeestándares• Código
– Sintaxisdelcódigo:HTML,(X)HTML,etc.W3CMarkupValida2onService
• Hojasdees2lo– W3CCSSValida2onService
[XHTML‐CSSvalidaonlinealavezelcódigoylaCSS(eninglés)]
• Accesibilidad– Cynthia
ValidaelestándarWAIparalaaccesibilidad.
![Page 158: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/158.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:validadoresdeestándares• Sindicacióndecontenido(RSS)
– W3CFeedValida2onServiceValidalasintaxisdeAtomoRSSfeeds.Esunaherramientaonline,eninglés,quepermitevalidarmedianteURLoinclusióndirectadecódigo.
– FeedburnerMantenimientoalosfeeds.Chicklets.Ordeneinformación.Asociaciónconotrosservicios.Newslewers.
– FeedmysearchConver2rbúsquedasdeGoogleaRSS.
![Page 159: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/159.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:validadoresdeestándares• Disposi2vosmóviles
– TAWmobileOKBasicEsunanalizadordebuenasprác2casparawebmóvil,enconcretocompruebalaadecuacióndeuncontenidomóvilalnivelmobileOKBasicsegúnsedefineenW3CmobileOKBasicTests1.0queestábasadoenW3CMobileWebBestPrac2ces1.0
Esunaherramientaonline,disponibleenespañol,quepermitevalidarmedianteURL.
[Alterna2vaonlineeninglés:W3CmobileOKChecker,permitevalidarmedianteURL]
![Page 160: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/160.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:validadoresdeestándares• Accesibilidad
– TAWValidaautomá2camentelaaccesibilidaddelapágina,señalandoquépuntosrevisarmanualmente.SepuedeseleccionarnivelA,AA,AAA.
– HERAHerramientaonline,disponibleenespañol,quevalidaautomá2camentelaaccesibilidaddelapágina,señalandoquépuntosrevisarmanualmente.
– FirefoxAccessibilityExtensiónExtensióndeFirefoxquepermiteverunlistadoconlasabreviacionesdelapágina,visualizarsinimágenes,sinimágenesdefondo,deshabilitarscripts,deshabilitareventosderatón,deventanaodeformulario,deshabilitarnuevasventanasodeshabilitarCSS.ParaExploreryOperaexistecomoalterna2valaWebAccessibilityToolbar
![Page 161: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/161.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:validadoresdeestándares• Mul2navegador
– BrowsershotsMuestrapantallazosdelaspáginasenprác2camentetodaslasversionesdelosnavegadoresmáscomunesenLinux,WindowsyMac.Estádisponibleeninglés,enversiónonline.
– Totalvalidator(Advanced)Muestrapantallazosdelaspáginasendis2ntosnavegadores(Explorerde5a7,Firefoxde1.0a2.0,Operade7a9,Mozilla,Netscape,Lynx,ect.),sistemasopera2vos(Linux,Mac,Windows)yresolucionesde640x480a1280x1024.Revisalaortograla,losenlacesrotosyproblemasdeaccesibilidad.Esunaherramientaonline,eninglés,aunquesepuededescargarunaversiónlocal.Estádisponibleenespañol,enversiónonline,localoextensiónparaFirefox(queañadelaopciónde"ValidarconTAW"almenúdeHerramientas).
![Page 162: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/162.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:validadoresdeestándares• Mul2navegador
– BrowsrcampEsunaherramientaonline,eninglés,quemuestraunpantallazodelawebenSafariparaMAC.
– IPhoneyAplicaciónlocalsólodisponibleparaMAC.Contrarioaloquepuedaparecer,noesunemulador,sinounentornodenavegaciónwebquesimulalaejecuciónorenderizacióndeu2lidadesypáginasde320por480(o480por320)enuniPhone.
![Page 163: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/163.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:validadoresdeestándares• Resoluciones
– ScreenSizeTesterHerramientaonlineeninglésquepermiterevisarunawebadis2ntasresoluciones.
TienemásopcionesqueTotalValidator.Otraalterna2vaeslaextensiónparaFirefoxBrowserWindowResizerolaWebAccessibilityToolbarparaInternetExploreryOpera.
![Page 164: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/164.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:validadoresdeestándares• Contrastedecolor
– ColourContrastAnalyser2.0Herramientalocalqueevalúasihaysuficientecontrasteentreuncolordefondoyuncolordeprimerplano.SebasaenelalgoritmoContrastRa2opropuestoporlaWorldWideWebConsor2um(W3C)
![Page 165: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/165.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:validadoresdeestándares• Epilepsiaporparpadeoyfotosensi2vidad– TestdeWebaccesible
Herramientaonline,quevalidaGIFanimados,bienindicandolaURLparaqueverifiquetodossusGIFobienindicandolaurldelGIF.
![Page 166: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/166.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:validadoresdeestándares• Pesoyvelocidaddecarga
– PingdomHerramientaonline,disponibleeninglés,queinformadelnúmerototaldeobjetosdeunapágina,supesoyvelocidaddecarga.
– Firebug(YSlow)ExtensiónparaFirefoxqueinformadeltamañodelapáginacacheadaysincachear.
– LoadTimeAnalyzerTemuestragráficamenteel2empodecargadecadaelemento.
![Page 167: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/167.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:validadoresdeestándares• Op2mizaciónparabuscadores(SEO)
– RavenColeccióndeherramientasenlínea,disponibleseninglés,queayudanaposicionarefec2vamenteunsi2oenbuscadoresyahacermejormercadotecnicaenlínea.
– WebsitegraderHerramientaonline,disponibleeninglés,queinformasobrelaefec2vidadmercadotécnicadelsi2o.
– AlexaHerramientaenlínea,disponibleeninglés,queproveeinformaciónacercadelacan2daddevisitasquerecibeunsi2owebdadoypermiteanalizareltráfico.
– GoogletrendsHerramientaenlínea,paracompararlastendenciasestadís2casentresi2osybúsquedasdesi2o.s
![Page 168: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/168.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Nuestrasherramientasfavoritas
• Webdevelopertoolbar
• GoogleWebmasterTools
• Másinformación– Testeverything
– 100recursosesencialesparadesarrolladoresweb
– Webdeveloperhandbook
![Page 169: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/169.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Manosalaobra
EscribirparalaWeb
![Page 170: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/170.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
![Page 171: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/171.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
![Page 172: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/172.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
![Page 173: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/173.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
![Page 174: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/174.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
![Page 175: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/175.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
“Laspalabrassoninterfaz”‐ErikaHall
![Page 176: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/176.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿Cuálessonsusfunciones?
• Orientar
• Informar
• Produciracciones
• Entablarrelaciones
![Page 177: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/177.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Laspalabrasdebenser:
• Precisas
• Necesarias
• Consistentes
• Apropiadas
![Page 178: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/178.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Laspalabrasproducenexperiencias.
![Page 179: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/179.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Tenerpersonalidad
![Page 180: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/180.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Tenerpersonalidad
![Page 181: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/181.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Mo>varaunaacción
![Page 182: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/182.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Informaroportunamente
![Page 183: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/183.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Informarsuficientemente
![Page 184: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/184.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Adaptarsealcontexto
![Page 185: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/185.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Seramables
![Page 186: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/186.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Tambiénproducenexperienciasnega>vas
![Page 187: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/187.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Cosasquenosuenannaturales
![Page 188: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/188.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Onosonconsistentes
![Page 189: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/189.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Quehacenperderel>empo
![Page 190: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/190.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Sonimpersonales
![Page 191: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/191.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Sonvagas
![Page 192: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/192.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Inapropiadasenelcontexto
![Page 193: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/193.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Inapropiadasenelcontexto
![Page 194: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/194.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Ogroseras
![Page 195: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/195.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Laspalabrasdebenser:
• Precisas=directo,informa2vo
• Necesarias=breve,sinintroduccionesinnecesarias,apoyándoseenviñetas,tablasencabezados
• Consistentes=unnombreparacadacosaytodasenunsistemaqueconcuerda
• Apropiadas=amigables,personales,ac2vas
![Page 196: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/196.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Parte4.
Publicatusi#oweb
![Page 197: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/197.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
ProgramaPARTE4:PUBLICATUSITIOWEB(1.5h)• Cómoelegirundominioyelhospedajeadecuado
• Conclusiones
• Ejercicio
![Page 198: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/198.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Escogiendodominio(domain)• Eselnombredetusi2oenInternet.
– www.madonna.com
• Losvisitantesdebenrecordareldominioparallegaratusi2odirectamente.
• Undominioserenta,nosecompra.
![Page 199: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/199.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Losbuenosdominios…• Seescogenantesdeempezarunsi2oweb.
• Coincidenconelnombredelsi2oweboconlamarcaquehayquevender.
• Sonsencillosycortos.
• Incluyenpalabrascompletas.
![Page 200: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/200.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Losbuenosdominios…• Sonpronunciablesynousanpalabrasdi^cilesdeescribir.
• Usannousanousanpocosguiones,guionesbajosopuntos.
• Ayudaracomunicarelgirodetucompañía(.gob.mx,.com,.org,...).
![Page 201: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/201.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Pormarca
www.apple.comwww.televisa.comy
www.televisa.com.mx
![Page 202: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/202.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Porpalabraclave
www.songmeanings.com
www.blog.com.mx
![Page 203: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/203.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Juguetones
del.icio.us
www.elbo.ws
![Page 204: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/204.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Alternos
www.google.com,www.gooogle.com,www.goooogle.com,...
![Page 205: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/205.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Alternos
todomimundoacolor.com(bandaNiña)
![Page 206: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/206.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Alternos
deathbypatch.comyorthoevrakills.com(JohnsonandJohnson,protegiendoalparcheOrthoEvra)
![Page 207: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/207.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Alternos
www.pithemovie.com(películaPi)
![Page 208: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/208.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Recomendacionesparadominios• Nocambiesconstantementededominio.
• Usatudominioalmáximo:creadirectoriosysubdominios.
• Monitoreatudominioysufechaderenovación.
![Page 209: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/209.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Recomendacionesparadominios• Siesposible,compradominiosalternosconnombressimilaresoerroresdeescrituracomunes.
Ejemplo:www.madonna.comywww.madona.com
• Amenosdequehayaunabuenarazón,registratudominioconeldominiotop‐level.comy.organtesde.com.mx.
![Page 210: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/210.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Recomendacionesparadominios• Asegúratequetudominiofuncioneconwwwysinéste.– Ejemplo:hdp://madonna.comyhdp://www.madonna.com
• Usatudominiodesdeunprincipio:contenidodinámico.
• Vendetudominiocomotumarca:tarjetasdepresentación,pósters,firmasdecorreos,etc.
![Page 211: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/211.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Escogiendohosting• Eselservicioquetepermitealojarunsi2owebenunservidoryqueestédisponibleenInternetlas24horasdeldía.
• Enespañol:hospedaje.
![Page 212: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/212.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Escogiendohosting• Serviciosrelacionados:
– Manejarbasesdedatos
– Administrarcorreoselectrónicosparatudominio
– Darestadís2casdeusodelsi2oweb
– Instalarso0ware
– Hacerrespaldosdearchivos
![Page 213: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/213.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
EjemplosEnMéxico• www.sysop.com.mx
• www.hos2ngmx.com
• www.triara.com(prodigy)
• www.alojate.com
• www.xpress.com.mx
Enotrospaíses•hostmonster.com
•www.lunarpages.com
•webhos2ngpad.com
•www.dreamhost.com•www.a2hos2ng.com
![Page 214: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/214.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿Quéofrecen?• Espacioendisco(enMbs,enGgs)
• Transferencia/bandwidth
• FTP(FileTransfer)
• Sistemaopera2vo
• Basesdedatos(MySQL)yPHP
• E‐mailconPOP3
![Page 215: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/215.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Criteriosparaescogerhosting• ¿Quéserviciostendréenmisi2oweb?
• ¿Quérequisitostécnicosnecesito?(Sistemaopera2vo,niveldeacceso)
• ¿Manejarécontenidomul2mediacomovideos,mp3s,galeríasdefotosdealtaresolución?
![Page 216: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/216.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Criteriosparaescogerhosting• ¿Tendrési2oswebsecundarios?¿Tienda,blogs,foros?
• ¿Usarésoowarelibreodepropietario?
• ¿Necesitocuentasdecorreo,FTPparalosmiembrosdemiorganización?
• ¿Qué2podesoportetécniconecesitoparamantenermisi2oweb?
![Page 217: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/217.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Recomendacionesparaescogerhosting• Antesdecomprarunhos6ng,conocetusnecesidades.
• Amenosdequetengasunabuenarazón,optaporloshos6ngsextranjeros.
• Manténtusi2owebytudominioconunamismacompañíasiesposible.
• Cuidalacuentamaestradetuhos6ng.
![Page 218: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/218.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Recomendacionesparaescogerhosting• Situsi2owebusarásoowarelibreasegúratedetenerunplandehos6ngamplioybuensoportetécnico.
• Conocelasrestriccionesdecontenidodetuhos6ng.Serándeacuerdoalasleyesdelpaísenelqueestánlosservidores.
• Aprovechatodotuespacio.Sihacessi2ospequeños,probablementepodrásalojarmásdeunsi2oweb.
![Page 219: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/219.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CONCLUSIONES
![Page 220: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/220.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Esfácildeusar
![Page 221: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/221.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Tieneinformaciónprác#ca,simpleybienredactada
![Page 222: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/222.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Requieredepocosclicsparanavegarlo
![Page 223: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/223.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
No2eneseccionesenconstrucciónnicontenidoincompleto
![Page 224: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/224.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Nousapop‐ups
![Page 225: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/225.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Nousaflash,animaciones,frames(marcos)niimágenesinnecesarias
![Page 226: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/226.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Pesapoco(menosde100–150kbs)
![Page 227: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/227.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Usa#pograIasgenéricasdisponiblesparacualquierusuario
![Page 228: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/228.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Eslegibleaúnycuandoeltextocambiedetamaño
![Page 229: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/229.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
IncluyearchivosenformatoscomunesDOC,RTF,PDF,JPG,MP3,etc.
![Page 230: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/230.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Usaligascontextosdescrip#vosyevitaelusodeindicacionescomo“hazclicaquí”
![Page 231: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/231.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Usametadatosparacatalogaryjerarquizarcorrectamentesucontenido
![Page 232: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/232.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
• Usa(X)htmlparasuestructura
• UsaCSSparasudiseño
• SuprogramaciónesválidaconelW3C
![Page 233: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/233.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
UnbuensitiowebEsaccesible:
– usacolorescontrastantesparafacilitarlalectura
– usae2quetasALTenlasimágenes
– 2eneíndicesdecontenido
– puedeserleído(uoído)aúnsinCCSniimágenes
– proveetodosufuncionamientosinnecesidaddeJavascript
– incluyetextosalterna2vosparatodoelementosnotextual.
![Page 234: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/234.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Permitelaretroalimentaciónocontacto,queademás,esaccesibleymonitoreadaconstantemente.
![Page 235: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/235.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Tieneunbuscadorqueproduceresultadosrelevantes,especialmenteparalaspáginasmásconsultadas
![Page 236: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/236.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Ponteenpráctica
Ejercicio
![Page 237: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/237.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Ejercicio1. Formengruposde5a6personas
2. Analicenelproyecto
3. Iden2fiquen:– Obje2vodelproyecto
– Seccionesprincipales
– Layoutdelapágina
– Erroresyaciertos
4. Diseñensupropiapropuesta
5. Compartansusconclusiones
![Page 238: Taller El arte de crear (buenos) sitios web: diseño, desarrollo y estándares](https://reader034.vdocuments.site/reader034/viewer/2022052412/557dadf5d8b42a11428b46ed/html5/thumbnails/238.jpg)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Imágenesutilizadas• hdp://www.codinghorror.com/blog/images/following‐instruc2ons‐for‐dummies.png• hdp://uponthepath.files.wordpress.com/2008/03/0613‐life‐instruc2ons.jpg• hdp://www.1‐click.jp/• hdp://www.clioonms.org/images/sec2on_under_construc2on.jpg• www.sysfix.co.uk/Stop‐Popups‐Spyware‐Adware.html• hdp://img.photobucket.com/albums/v442/el_amo_de_todo/flash.jpg• hdp://bp3.blogger.com/_J0H‐3Fm0S3U/R0NI8FKCb1I/AAAAAAAAAgo/mABnsA3zsQM/s1600‐h/reir_bascula.jpg• www.ascendercorp.com/porfolioart/verdana.gif• hdp://www.ccs.uodawa.ca/webmaster/templates/assets/img/faq/font‐resize‐tool‐en.jpg• hdp://bp0.blogger.com/_nS7jXbl_qjA/R72B‐btwnqI/AAAAAAAAAEY/b4CY4VrMK8c/s400/heroe.jpgç• hdp://www.simpsonstrivia.com.ar/fotos/superman‐logo.jpg• hdp://www.dotnetjunkies.com/WebLog/images/dotnetjunkies_com/metablog/2085/r_MetaTag%20link%20chart.jpg• hdp://cscie12.dce.harvard.edu/lecture_notes/2007‐08/20080130/handout.html• hdp://blog.wynfor.com/wp‐content/uploads/e‐mail_icon.jpg