Upload
ua-web-ac
View
5.007
Download
0
Embed Size (px)
DESCRIPTION
Este taller explora, en dos días, temas relacionados al diseño y desarrollo de sitios bajo estándares de calidad internacional en un nivel intermedio - avanzado. Ayudará a los creadores de sitios web a que actualicen o desarrollen habilidades como planeación, usabilidad, accesibilidad, diseño de información, diseño visual, desarrollo y gestión de contenido para Internet. Está dirigido a administradores de sitios web pequeños y medianos, diseñadores gráficos, desarrolladores de sistemas, ejecutivos y empresarios interesados en crear o mejorar un sitio web.
Citation preview
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Elartedecrear(buenos)sitiosweb:diseño,desarrolloyestándares
MiriamAvila,IsabelVillarrealeIvanSan2esteban
Monterrey,NuevoLeón,México
Agosto2008
Taller
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Objetivos• Conocerelprocesoparacrearunbuensi2oweb
• Iden2ficarlasnecesidadesdetuorganización
• Conocerestrategiasyconceptosclavepara
organizarypresentarsuinformación,programar
siguiendoestándaresydiseñarefec2vamente
• Conocerrecursosgratuitosparacrear,montarymantenerunsi2oweb
• Sabercómofacilitarquelosbuscadoresveana
susi2oycómoatenderasusvisitantes
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Parte1.
¿Quées
unbuensi2oweb?
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
ProgramaPARTE1:QUÉESUNBUENSITIOWEB(1.5h)
• Unsi2oweb
• Partesdeunsi2oweb
• Unbuensi2oweb
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unsitioweb
EsunafuentedeinformaciónadaptadaparalaWorldWideWeb(WWW)yaccesiblemedianteunnavegadordeInternet.
EstainformaciónsepresentageneralmenteenformatoHTMLypuedecontenerhiperenlacesaotraspáginasweb...
FuenteWikipedia
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unsitioweb
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Partesdeunsitioweb
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Partesdeunsitioweb
Encabezado• Elencabezadoiden2ficaaunsi2owebdemanerarápida.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Partesdeunsitioweb
Navegación• Eseláreaquecon2eneloshipervínculoshaciaelcontenidodelapágina.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Partesdeunsitioweb
Contenidoocuerpo• Eslapartemedulardelsi2oweb.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Partesdeunsitioweb
Piedepágina• Usualmentecon2enelainformaciónquerespaldaelsi2oweb:desdecondicionesdeusohastaavisoslegales.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
OK.Entonces…
¿quéesunbuensi2oweb?
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb• representalaesenciadeuna
organización• eslaexpresióndeunapersona• llevalosproductosyserviciosdeuna
organizaciónalaInternet• resuelvedudas• minimiza problemas• ahorradinero• generavalorysa2sfacción
FUNCIONA
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Elartedecrear(buenos)sitiosweb:diseño,desarrolloyestándares
MiriamAvila,IsabelVillarrealeIvanSan2esteban
Monterrey,NuevoLeón,México
Agosto2008
Taller
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Parte2.
Laplaneación
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
??
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿Cómosecreaunaexperienciadeusuarioenlaweb?
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
SegúnJJGarreP
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Estrategia
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Estrategia
Alcance
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Estrategia
Alcance
Estructura
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Estrategia
Alcance
Estructura
Esqueleto
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Estrategia
Alcance
Estructura
Esqueleto
Superficie
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Inves@gar
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Investigar
DeLouRosenfeld
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Investigarelcontexto
• Relacionespersonales
•Metas
• Tecnología
• Recursoshumanos
• Recursos
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Investigarelcontenido
• Elsi2oactual
• Estructura
• Análisisdelcontenido
• Flujo
• Benchmarking
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Investigaralosusuarios
• Estadís2cas
• Entrevistascondependientes
• Entrevistasconusuarios
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Organizar
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Organizar
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Organizar
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Organizar:clasi@icarynombrar
Considera:• ¿Mutuamenteexcluyentes?
• Profundooancho
Recurrea:• Cardsor2ng
• Pruebasconusuarios
• Benchmarking
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Organizar:clasi@icarynombrar
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Navegación
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Navegación
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Navegación
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Navegación
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Navegación
hPp://www.jjg.net/ia/visvocab/
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Navegación
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Navegación
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Navegación
Global
Contextual
Local
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿Quésabemosahora?
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Alpapel
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñodeinformación
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñodeinformación
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñodeinformación
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñodeinformación• Tiposdecontenido
• Patronesrepe2dos
• Importanciadecadaelemento
• Navegación/interacción
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñodeinformación
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñodeinformación:herramientas
Papelypluma
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñodeinformación:herramientas
SoHware
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñodeinformación:herramientas
Buenosejemplos
• Smashingmagazine.com
• Konigi.com
• PaPerntap.com
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Parte3.
Manosalaobra
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
ProgramaPARTE3:MANOSALAOBRA(6.5h)
• Cómoelegirunadministradordecontenido(cms)
• Buenasprác2casdeHTMLyCSS
• Diseñoweb
• Herramientasparadiseñaryprogramar
• Aprovechalosserviciosweb
• Escribiendoparalaweb
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Administradoresdecontenido(CMS)
¿Cómoelegirunadministradordecontenido?
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Administradoresdecontenido(CMS)• So#wareparalapublicaciónyorganizacióndelcontenidodeunapáginadeInternet.
• Sonú2lesparasi2osqueusancontenidovariado:– textosyimágenes,
– audioyvideo,
– seccionesdinámicasyestá2cas.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
HerramientasdeunCMS• Administraciónonlinedelcontenido
• Fácilimportaciónyexportación
• Opcionesdeprivacidad,indexación,SPAM,etc.
• Editoresdecódigo
• Manejodeusuariosypermisos
• Retroalimentación
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Ventajas• Puedesadministrartusi2owebatravésdeInternet.
• Unusuariosinconocimientodeprogramaciónpuedeeditarcontenidofácilmente.
• Nonecesitastécnicosoprogramadoresparahacercambiosentusi2oweb.
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
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CMSdepropietarios
• MicrosocSharepoint
• Documentum
• EM3
• Ingeniux
CMSopensource
• Joomla!
• Drupal
• PHPNuke
• MovableType
• Wordpress
• Lyceum
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
MicrosoftSharepoint
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Wordpress
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CriteriosparaseleccionarCMS• ¿Qué2podesi2oplaneasconstruir?
• ¿Quétangrandeplaneasqueserátusi2o?
• ¿Tendrásinformaciónestá2ca,dinámica,unaovariassecciones?
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CriteriosparaseleccionarCMS• ¿Tendrásoperacionesotransaccionesenlínea?
• ¿Cuálessonlos2posdecontenidoquepublicarás?– Arkculos,fotogralas,pistasdesonido,videos,…
• ¿Necesitashacermodificacionespar2cularesparatusi2o?
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CriteriosparaseleccionarCMS• ¿Quéherramientaspar2cularesnecesitarásentusi2o?– RSS,forosdediscusión,blogs,calendarios,podcasts,…
• ¿Cuántoscolaboradoresdecontenidotendrátusi2o?¿Conquépresupuestocuentas?
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Buenasprácticas
HTML,(X)HTML,CSS,etc.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿QuéesXHTML?• Esellenguajebásicoparalaprogramaciónweb.
• Manejae2quetasencorchetesagudos(<y>),consusrespec2vosatributosentrecomillas(““).– Ejemplodeinsercióndeunaimagen:<imgsrc=“foto.jpg”width=“500px”/>
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿QuéesXHTML?• E2quetasdeunalínea
Ejemplo:<imgsrc=“foto.jpg”>
• E2quetasdeaperturaycierreEjemplo:<p>Estoesunpárrafo.</p>
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
DelHTMLalXHTML• ElXHTML2enecódigomásestrictoymejorasensusintaxis.– Minúsculas
– Cierredee2quetasconommitag(/>)obligatorio
– Correctajerarquíayanidación(nes1ng)delase2quetas
– YdejareldiseñoparaelCSS
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
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.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CómomejorartucódigoXHTML• ValidaconherramientasdelW3Cantesdepublicar.
Esmásfácilhacerlosiusaslasbarrasdeherramientasdedesarrollowebqueterecomendamos.
Herramienta:hwp://www.w3.org/QA/Tools/#validators
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
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CómomejorartucódigoXHTML• Instalavariosnavegadores,almenosInternetExploreryFirefox.
Revisatupáginaendiversosnavegadoresendis2ntasversiones.
Herramienta:UsaBrowsershots(hwp://browsershots.org)pararevisardis2ntosnavegadoresyversiones.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿Quénavegadoresusan?
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿Quétamañosdepantallausan?
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
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿Porquénodiseñarcontablas?• Lastablassonparapresentardatos
• Usarlasenestructuraimplicamenosaccesibilidad
• Hacenquelossi2osnoseanflexibles
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=“”/>
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.
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.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CómomejorartucódigoXHTML• AsegúratedeseñalarenelDocumentType(DTD)larevisióndeXHTMLquesigues.
• Escribelosatributosdeunae2quetasiempreenelmismoorden.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CómomejorartucódigoXHTML• Asegúratequelainformaciónesencialdetusi2owebestéenlosprimeros3KBs.
• Dividetucódigoenapartadosusandocomentarios(<!‐‐)
Ejemplo:Encabezado,cuerpo,menú.<!‐‐encabezado‐‐>
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CómomejorartucódigoXHTML• Construyesi2osfluidosyflexibles,ytrabajaconunidadesdeproporción.
Herramienta:EmCalculator‐hwp://riddle.pl/emcalc/
Depuntosypicasa“ems”.Depixelesaporcentajes.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CómomejorartucódigoXHTML• Usaplan2llasdecódigo(comolasdeDreamweaver)parafacilitarrediseñosoactualizacionesmasivas.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿QuéeselCSS?• EsellenguajeparadiseñowebquepermitemodificarloselementosXHTMLdefinidosenunapáginaelectrónica.
• Estáorganizadoendocumentosllamadoshojasdees2lo(“stylesheets”).
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿QuéeselCSS?• EselcomplementodellenguajeXHTML.
• Podemosllamarlocomorecursoexternoenelencabezadodeunapágina(enlasecciónhead)oencadae2quetaquenecesitemos(enlasecciónbody).
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CSSyeldiseño• Unapáginapuedecambiarsuhojadees2loytenerundiseñocompletamentedis2ntoaunqueloselementosdeXHTMLnoseanalterados.
Ejemplo:ZenGarden–www.csszengarden.com
• Unahojadees2lopuedeserundiseñocompletamentedis2nto.
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
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.
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>
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
EstructuradelCSS
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
EtiquetasdeCSS• Cuatro2posdee2quetas(selectores):
– ids(#nombre)
– clases(.nombre),
– selectorescontextuales(nombre)
– ounacombinacióndelosanteriores.
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”>
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”>
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
EtiquetasdeCSS• Selectorescontextuales(nombre)
SonelementosdeXHTML(<entrebrackets>)quepuedensermodificadasconCSS.
Ejemplo:
img{
border:0px;
}
ul{
list‐style‐type:square;
}
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
EtiquetasdeCSS• Combinaciones
Losdis2ntosselectorespuedencombinarseparahaceres2loslocalesenlaspáginas.
Ejemplo:
ul.bullet{list‐style‐posi2on:outside;
}
ul.nobullet{list‐style‐type:none;
}
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
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"/>
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”>
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.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
HerenciaenCSS• Cuandotenemosvariasindicacionesparaunmismoelemento,laúl2maeslaquesetomaencuenta.
Ejemplo:
h1{border:0;}h1{border:1pxsolid#cccccc;}
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb
Reglasbásicas:
¿Cómopiensanlosusuarios?
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:reglasbásicas
• LosusuarioswebnosonmuydiferentesdelosclientesdeunaIendaenlavidareal.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:reglasbásicas
• Losclicsnacendelaatraccióny/olauIlidad.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:reglasbásicas
• Losusuarioswebaprecianlacalidadylacredibilidad.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:reglasbásicas
• Losusuariosnoleen.Escanean.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:reglasbásicas
• Losusuarioswebsonimpacientesyesperangra2ficacionesinstantáneas.– unsi2odebesa2sfacerlasexpecta2vasdelosvisitantes
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:reglasbásicas
• Losusuarioswebnosiempretomanlasmejoresdecisiones.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:reglasbásicas
• Losusuarioswebconfíanensuintuición.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:reglasbásicas
• Losusuarioswebdeseantenerelcontrolsobresunavegador.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb
Poreso…
Lasreglasdeoro
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.
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
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Usuarioscuriososeimpacientes=cerocomplicaciones
– Ofreceserviciossencillos,prác2cosydirectos
– Lasa2sfaccióneselmejorgancho
– Aumentalaconfianzadelosusuarios,gra2ficandosusaccionescorrectasyayudandoaresolverlasincorrectas
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Unsi2owebformapartedelaimagencorporaIvadeunaorganización
– Sudiseñodebeseratrac2voynoexagerado
– Debecontarconunapaletadecolorapropiada,tantoalobje2voquesedeseaperseguircomoaldelaimagendelaorganización
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
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Jerarquizaysacaelmejorprovechodelospuntosfocales
– Organizaapropiadamentelapáginaprincipaldelsi2o
– Ofrecepistasqueevitenincer2dumbre
– Nodistraigasalosusuariosconimágenes,efectosoaccionesinnecesarias
– Diseñapensandoenelusuario
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoroJerarquíaypuntosfocales
hwp://www.subtrac2on.com/
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Escues2óndesimplicidad
– Lasimplicidadtraeelzenaunsi2o
– Unusuariosobretodobuscainformación– Ylosusuarios,prefierenversi2osbasadosentexto
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Notemasalespacioenblanco
– Elespacioblancorefierealasporcionesdeespacioquesecreanentreloselementos
– Elbuenusodeesteespaciogeneraequilibrio,favorecelalecturaycreaunacomposiciónesté2ca
– Lasestructurascomplejassevuelvenordenadasconespacionega2vosuficiente
– Separaloselementosvisuales,ayudaagenerarjerarquía
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoroUnsi1osimpleybienequilibrado
hwp://www.subtrac2on.com/
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Eligebienaloselementosestelares
– Ofrecealosusuariosunavisiónrápida,claraydirectadelasfuncionesdisponiblesentusi2o.Esunabuenaprác2cadediseñodeinterfacesyesunagarankadesa2sfaccióndetususuarios.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoroUnestelarconénfasis
hwp://twiwer.com/
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
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Escribeparaquetelean(yen2endan)
– Elwebnoeslomismoquelaprensa
– Eles2lodelaredaccióndebeserconcisoypreciso
– Vedirectoaloshechos
– Escribepárrafoscortos,conelementosenlistasyktulosclaros
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoroUnsi1opreciso
http://es.facebook.com/
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoro• Loselementosconvencionalessontusamigos
– Usapatronesyelementosalosquelosusuariosyaestánacostumbrados
– Lospatronesdisminuyenlacurvadeaprendizajeporquelagenteyasabequehacer,cuándoyquéesperaracambio
– Lasconvencionesayudanagenerarconfianzaycredibilidad
– Cumplelasexpecta2vasdelosusuarios
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:lasreglasdeoroUsaelementosconvencionalesvscrea1vidad
http://www.usolab.com/wl/images/atm-eco-feedback.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.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb
Tendencias
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.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendencias
Alistapart 8020Publishing
Estructurassimples
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendencias• Diseñocentrado
– Eldiseñocentradoofrece:confianza,balance,simpleza,zen.
– Lospatronesdediseñoalineadoalaizquierdacadavezsonmenoscomunes,lomismoquelasestructuraslíquidas.
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
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
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendencias
Reflejosysombras
Anunciosdeestrella
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendencias• Fondosclarosoneutros
– Lamayoríadelossi2os2enenfondosplanos,casisiempreblancosodegradadosengrises.Estagamaneutral,simple,yrelajadaesunabaseperfectaparacoloresvibrantes.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendenciasFondosclarosoneutros
AbstractsManager AnthonyPhillips
TDGIntegratedArtypapers
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendencias• Tintesdecolorbrillantesusadosconprecisión– Eldiseñodelosúl2mosañossobresaleporloscoloresjuvenilesyvibrantes,nosóloparalosblogs,sinoparasi2oscomercialesimportantes.
– LaWeb2.0trajoalastendenciaenmodalosverdes,anaranjados,azulesyvioletasaplicadosagrandesktulos,iconosenormesydestellosdecoloralolargodelossi2os.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendenciasTintesbrillantes
Iconosllama1vos
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendencias• Espacioblanco
– Elespacioblancononecesariamentedebeserblanco,simplementedeserunespacio.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Diseñoweb:tendencias• Textogrande
– Lostextosmásimportantedelapáginasonmásgrandesqueeltextoregular
Woothemes JasonSantaMaria
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas
Paradiseñaryprogramar
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.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:diseñoweb• Paletasdecolor
– ProcolorpalewesocwaredeColourLoversHerramientacompleksimaparaelegircoloresypaletas.Loscolorescasinuncasonweb‐safe.
– 4096ColorwheelHerramientadeseleccióndecoloresconuncompara2vodecoloresweb‐safe,web‐smartyun‐safe.
– ColorcubedemoreCrayonsHerramientadeseleccióndecoloresweb‐smartportonalidad.
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.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:diseñoweb• Archivosdeiconos
– IconBuffetCatálogodeiconosdeexcelentecalidad.Algunosgratuitos.
– FreewaredeIconFactoryCatálogogratuitodeiconosdeunadelasmejorescompañíasdediseñodeiconosprofesionales.
– famfamfamIconsCatálogogratuitodeiconos,muypopular.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:diseñoweb• Archivosdevector
– VectorStockCatálogodeilustracionesvectoriales.Concosto.
– DevianArtCatálogodeimágenes,ilustraciones,fondosdepantalla,texturas,etc.Descargasporregistrodeusuario.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:diseñoweb• Favicons
– Favicongenerator1.0Generadorenlíneadefaviconsapar2rdeimágenesregulares.
– Favicon.ccHerramientaparadiseñarfavicons,permiteimportarimágenesycorregirlas.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:diseñoweb• Inspiración
– AListApart:Webmagazineforpeoplewhomakewebsites
– BoxesandArrows:Thedesignbehindthedesign
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.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:programación• Ayudaparacodificar
– w3schoolTutorialesgratuitosdelaWorldWideWebConsor2um(W3C)
– AcordeóndeHTMLHojasdereferenciaconlase2quetasdeusomáscomúndelhtml.
– AcordeóndeCSSHojadereferenciaconlase2quetasdeusomáscomúnparaprogramarhojasdees2lo.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:programación• Formularios
– WufooEditorenlíneadeformulariosbasadosenCSS,configurables.
– IcebrrgEditorenlíneadeformulariosbasadosenCSS.
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.
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.
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]
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
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).
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.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:validadoresdeestándares• Resoluciones
– ScreenSizeTesterHerramientaonlineeninglésquepermiterevisarunawebadis2ntasresoluciones.
TienemásopcionesqueTotalValidator.Otraalterna2vaeslaextensiónparaFirefoxBrowserWindowResizerolaWebAccessibilityToolbarparaInternetExploreryOpera.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:validadoresdeestándares• Contrastedecolor
– ColourContrastAnalyser2.0Herramientalocalqueevalúasihaysuficientecontrasteentreuncolordefondoyuncolordeprimerplano.SebasaenelalgoritmoContrastRa2opropuestoporlaWorldWideWebConsor2um(W3C)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Herramientas:validadoresdeestándares• Epilepsiaporparpadeoyfotosensi2vidad– TestdeWebaccesible
Herramientaonline,quevalidaGIFanimados,bienindicandolaURLparaqueverifiquetodossusGIFobienindicandolaurldelGIF.
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.
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
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Nuestrasherramientasfavoritas
• Webdevelopertoolbar
• GoogleWebmasterTools
• Másinformación– Testeverything
– 100recursosesencialesparadesarrolladoresweb
– Webdeveloperhandbook
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Manosalaobra
EscribirparalaWeb
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
“Laspalabrassoninterfaz”‐ErikaHall
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿Cuálessonsusfunciones?
• Orientar
• Informar
• Produciracciones
• Entablarrelaciones
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Laspalabrasdebenser:
• Precisas
• Necesarias
• Consistentes
• Apropiadas
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Laspalabrasproducenexperiencias.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Tenerpersonalidad
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Tenerpersonalidad
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Mo>varaunaacción
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Informaroportunamente
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Informarsuficientemente
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Adaptarsealcontexto
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Seramables
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Tambiénproducenexperienciasnega>vas
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Cosasquenosuenannaturales
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Onosonconsistentes
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Quehacenperderel>empo
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Sonimpersonales
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Sonvagas
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Inapropiadasenelcontexto
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Inapropiadasenelcontexto
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Ogroseras
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Laspalabrasdebenser:
• Precisas=directo,informa2vo
• Necesarias=breve,sinintroduccionesinnecesarias,apoyándoseenviñetas,tablasencabezados
• Consistentes=unnombreparacadacosaytodasenunsistemaqueconcuerda
• Apropiadas=amigables,personales,ac2vas
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Parte4.
Publicatusi#oweb
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
ProgramaPARTE4:PUBLICATUSITIOWEB(1.5h)• Cómoelegirundominioyelhospedajeadecuado
• Conclusiones
• Ejercicio
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Escogiendodominio(domain)• Eselnombredetusi2oenInternet.
– www.madonna.com
• Losvisitantesdebenrecordareldominioparallegaratusi2odirectamente.
• Undominioserenta,nosecompra.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Losbuenosdominios…• Seescogenantesdeempezarunsi2oweb.
• Coincidenconelnombredelsi2oweboconlamarcaquehayquevender.
• Sonsencillosycortos.
• Incluyenpalabrascompletas.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Losbuenosdominios…• Sonpronunciablesynousanpalabrasdi^cilesdeescribir.
• Usannousanousanpocosguiones,guionesbajosopuntos.
• Ayudaracomunicarelgirodetucompañía(.gob.mx,.com,.org,...).
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Pormarca
www.apple.comwww.televisa.comy
www.televisa.com.mx
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Porpalabraclave
www.songmeanings.com
www.blog.com.mx
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Juguetones
del.icio.us
www.elbo.ws
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Alternos
www.google.com,www.gooogle.com,www.goooogle.com,...
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Alternos
todomimundoacolor.com(bandaNiña)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Alternos
deathbypatch.comyorthoevrakills.com(JohnsonandJohnson,protegiendoalparcheOrthoEvra)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Alternos
www.pithemovie.com(películaPi)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Recomendacionesparadominios• Nocambiesconstantementededominio.
• Usatudominioalmáximo:creadirectoriosysubdominios.
• Monitoreatudominioysufechaderenovación.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Recomendacionesparadominios• Siesposible,compradominiosalternosconnombressimilaresoerroresdeescrituracomunes.
Ejemplo:www.madonna.comywww.madona.com
• Amenosdequehayaunabuenarazón,registratudominioconeldominiotop‐level.comy.organtesde.com.mx.
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.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Escogiendohosting• Eselservicioquetepermitealojarunsi2owebenunservidoryqueestédisponibleenInternetlas24horasdeldía.
• Enespañol:hospedaje.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Escogiendohosting• Serviciosrelacionados:
– Manejarbasesdedatos
– Administrarcorreoselectrónicosparatudominio
– Darestadís2casdeusodelsi2oweb
– Instalarso0ware
– Hacerrespaldosdearchivos
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
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
¿Quéofrecen?• Espacioendisco(enMbs,enGgs)
• Transferencia/bandwidth
• FTP(FileTransfer)
• Sistemaopera2vo
• Basesdedatos(MySQL)yPHP
• E‐mailconPOP3
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Criteriosparaescogerhosting• ¿Quéserviciostendréenmisi2oweb?
• ¿Quérequisitostécnicosnecesito?(Sistemaopera2vo,niveldeacceso)
• ¿Manejarécontenidomul2mediacomovideos,mp3s,galeríasdefotosdealtaresolución?
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Criteriosparaescogerhosting• ¿Tendrési2oswebsecundarios?¿Tienda,blogs,foros?
• ¿Usarésoowarelibreodepropietario?
• ¿Necesitocuentasdecorreo,FTPparalosmiembrosdemiorganización?
• ¿Qué2podesoportetécniconecesitoparamantenermisi2oweb?
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Recomendacionesparaescogerhosting• Antesdecomprarunhos6ng,conocetusnecesidades.
• Amenosdequetengasunabuenarazón,optaporloshos6ngsextranjeros.
• Manténtusi2owebytudominioconunamismacompañíasiesposible.
• Cuidalacuentamaestradetuhos6ng.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Recomendacionesparaescogerhosting• Situsi2owebusarásoowarelibreasegúratedetenerunplandehos6ngamplioybuensoportetécnico.
• Conocelasrestriccionesdecontenidodetuhos6ng.Serándeacuerdoalasleyesdelpaísenelqueestánlosservidores.
• Aprovechatodotuespacio.Sihacessi2ospequeños,probablementepodrásalojarmásdeunsi2oweb.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
CONCLUSIONES
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Esfácildeusar
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Tieneinformaciónprác#ca,simpleybienredactada
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Requieredepocosclicsparanavegarlo
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
No2eneseccionesenconstrucciónnicontenidoincompleto
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Nousapop‐ups
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Nousaflash,animaciones,frames(marcos)niimágenesinnecesarias
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Pesapoco(menosde100–150kbs)
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Usa#pograIasgenéricasdisponiblesparacualquierusuario
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Eslegibleaúnycuandoeltextocambiedetamaño
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
IncluyearchivosenformatoscomunesDOC,RTF,PDF,JPG,MP3,etc.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Usaligascontextosdescrip#vosyevitaelusodeindicacionescomo“hazclicaquí”
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Usametadatosparacatalogaryjerarquizarcorrectamentesucontenido
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
• Usa(X)htmlparasuestructura
• UsaCSSparasudiseño
• SuprogramaciónesválidaconelW3C
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
UnbuensitiowebEsaccesible:
– usacolorescontrastantesparafacilitarlalectura
– usae2quetasALTenlasimágenes
– 2eneíndicesdecontenido
– puedeserleído(uoído)aúnsinCCSniimágenes
– proveetodosufuncionamientosinnecesidaddeJavascript
– incluyetextosalterna2vosparatodoelementosnotextual.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Permitelaretroalimentaciónocontacto,queademás,esaccesibleymonitoreadaconstantemente.
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Unbuensitioweb
Tieneunbuscadorqueproduceresultadosrelevantes,especialmenteparalaspáginasmásconsultadas
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Ponteenpráctica
Ejercicio
Elartedecrear(buenos)si2osweb:diseño,desarrolloyestándares
Ejercicio1. Formengruposde5a6personas
2. Analicenelproyecto
3. Iden2fiquen:– Obje2vodelproyecto
– Seccionesprincipales
– Layoutdelapágina
– Erroresyaciertos
4. Diseñensupropiapropuesta
5. Compartansusconclusiones
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