Sop Inf t20 Final

Tcnico de Soporte
Informtico
TEMA 20
DISEO WEB
Promocin Interna de
Tcnico de Soporte Informtico
TEMA 20 Tcnico de Soporte informtico 2
TEMA20.DISEOWEB
CONTENIDO
1. DISEODEPGINASWEBEINTERFACESWEBDEUSUARIO ...............................................................2
1.1INTRODUCCINALDISEODEPGINASWEB...................................................................................2
1.2CONCEPTODEINTERFAZWEBDEUSUARIO ......................................................................................4
2. HTML,LENGUAGEDESCRIPT,PROGRAMACINWEB. ........................................................................5
2.1HTML ..................................................................................................................................................5
PrimerospasosconHTML ....................................................................................................................6
EtiquetasHTML ....................................................................................................................................9
2.2LENGUAJEDESCRIPT........................................................................................................................14
Incrustarelscript................................................................................................................................15
Partesdelscript ..................................................................................................................................16
2.3INTRODUCCINPROGRAMACINWEB ...........................................................................................16
3. PRINCIPIOSDELDISEODEINTERFACES. ..........................................................................................21
Elementosdelainterfaz.....................................................................................................................22
4. FORMULARIOSELECTRNICOS ..........................................................................................................25
FormulariosconHTML .......................................................................................................................25
5. ACCESIBILIDAD,DISEOUNIVERSALYUSABILIDAD...........................................................................32
5.1ACCESIBILIDAD..................................................................................................................................32
5.2.DISEOUNIVERSAL .........................................................................................................................33
5.3.USABILIDAD .....................................................................................................................................35

Promocin Interna de

WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
1. DISEODEPGINASWEBEINTERFACESWEBDEUSUARIO
1.1INTRODUCCINALDISEODEPGINASWEB
El diseo web es una actividad multidisciplinar y tan reciente como Internet. Se alimenta de
fuentes como el diseo grfico y las artes visuales, la programacin de aplicaciones
informticas,eldiseodeinterfaces,laredaccindecontenidos,laanimacin,lapublicidad,el
mrketingyunsinfndecosas.
Disear es un proceso creativo que combina arte y tecnologa para comunicar ideas. El
diseadorutilizaunaseriedeherramientasquecombinaparahacerqueelmensajequequiere
transmitirllegueaunaaudienciadeterminada.
El diseador es la persona que se encarga de comunicar el mensaje al pblico, creando,
eligiendo, organizando y disponiendo toda la informacin para la visualizar textos, grficos,
sonido,yporquno,elespacioenblanco.
Tcnicamente,unapginawebesundocumentoHTML.
HTML es un lenguaje llamado de marcado. Consiste en la insercin de etiquetas entre los
contenidos. Estas etiquetas no se muestran al usuario, lo que hacen es dar indicaciones al
navegadorweb(InternetExplorer,Mozilla,Chrome)sobrelosdiferenteselementosysobre
cmodebemostrarlos.
Unapginawebsecomponedeunoovariosdocumentoshtmlqueserelacionanentre sa
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
travsdehipervnculos(enlaces,links).
Se exponen a continuacin una serie de conceptos bsicos que se deben aprender para
comenzarenelmundodeldiseoweb:
SITIO WEB: Pgina principal y sus otras pginas, grficos, documentos, multimedia y otros
archivosasociadosquesealmacenanenunservidorWeboeneldiscodurodeunequipo.
PGINA WEB:Documento elaboradoenHTMLqueformaparte deunsitioWeb.Adems del

HTMLsepuedenutilizarotroslenguajescomplementarioscomoPHP,ASP,Javascript...
HIPERVNCULO: (Enlace, Link) Un hipervnculo es la conexin de una pgina a otro destino
como puede ser otra pgina o una ubicacin diferente en la propia pgina. El destino es
normalmente otra pgina Web, pero tambin puede ser otro tipo de documento como una
imagen, una direccin de correo electrnico, un archivo, o un programa. Un hipervnculo
puedesertextoounaimagen.
SERVIDOR WEB: Mquina conectada a Internet que alberga pginas web haciendo que estn
accesiblesdesdecualquierpuntodeInternet.
CLIENTEFTP:Aplicacinquepermiteconectarsealservidorparapublicarpginasweb.
Promocin Interna de
HOSTING: Hospedaje web. Espacio de disco donde se almacenan las pginas webs para que
seanaccesiblesatravsdeInternet.
HOUSING:Esunamodalidaddehostingquevadirigidoagrandesempresasyaempresasdeservicio
Web.Loqueconsisteestetipodealojamientoesenvenderoalquilarunespaciodeuncentrodedatos,
paraqueelclientecoloquesupropioordenador.LaempresaledacorrienteyconexinaInternet,yel
servidor lo elige el cliente, incluso el hardware. Tambin la empresa suele ofrecer servicios de
mantenimiento de instalacin, tambin administracin pero el servidor lo construye y es dueo el
cliente.
DOMINIO:Direccinwebasociadaaunapginaweb.
URL:(UniversalResourceLocation/Localizadorderecursosuniversal)Cadenaqueproporciona
la direccin de Internet de un sitio Web o un recurso del World Wide Web, junto con el
protocolomedianteelcualsetieneaccesoalsitiooalrecurso.Eltipomscomndedireccin
URL es http://, que proporciona la direccin de Internet de una pgina Web. Otros tipos de
direccinURLsongopher://,queproporcionaladireccindeInternetdeundirectorioGopher,
yftp://,queproporcionalaubicacindereddeunrecursoFTP.
APPLETS:ProgramasdesarrolladosconprogramacinJavaparamejorarlapresentacindelas
pginasWebquerealizananimaciones,juegoseinteraccinconelusuario.
FRAMES(MARCOS):reasrectangularesquesubdividenlasventanasdealgunaspginasWeb,
cadaunadelascualescontieneundocumentohtmlindependientedelosdems.
WEBMASTER:Unwebmastereslapersonaencargadadecrear,disear,estructurar,maquetar,
publicar,promocionarymantenerunsitioweb.
BANNER:Elementogrfico,normalmenteanimado,cuyocontenidoespublicidad.
EDITOR: Programas que se utilizan para crear pginas web sin la necesidad de tener que
aprenderellenguaje.Ejemplos:M.FrontPage2000yMacromediaDreamweaver.
Promocin Interna de
1.2CONCEPTODEINTERFAZWEBDEUSUARIO
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES

Unainterfazeslaconexinfsicayfuncionalentredosaparatososistemas
independientes(RAE).Lainterfazdeusuarioeslaformaenquelosusuariosse
puedencomunicarconunordenador.
Hay dos tipos de interfaces de usuario segn su manera de interactuar: Alfanumricas
intrpretesdepedidosygrficasdeusuariosGUI,GraphicUserInterface.Estasltimas
permiten comunicarse con el ordenador de una forma rpida, intuitiva y grfica (ventanas,
botones,etc.).
Segnsuconstruccin,puedenserdehardwareodesoftware:
Enelprimercasosetratadeunconjuntodedispositivosquepermitenlainteraccin
hombremquina,deformaquepermitenaccederycogerdatosdelordenador.
LasInterfacesdesoftwaresonprogramasopartedeellosquepermitencomunicarse
conelordenador.
LallavedelxitodeunSitioWebvienedadaporlamaneraenquesepresentalainformacin
alosvisitantes.Esmuyimportantequelainformacinofrecidacumplaconciertasreglasy/o
estndares,paraquesususuariospuedansacarletodoelprovechoposible.
Se debe crear un entorno en donde los usuarios puedan explorar fcilmente y a la vez
conseguirtransmitirleselmensajequenuestraspginasofrecen.
WWW.ECLAP.JCYL.ES
Estas interfaces deben servir de intermediarias entre unos usuarios genricos, no
acostumbrados generalmente al uso de aplicaciones informticas, y unos sistemas de WWW.ECLAP.JCYL.ES
informacin y procesos transaccionales que corren por debajo, debiendo posibilitar la
localizacin de la informacin deseada, el entendimiento claro de las funcionalidades
ofrecidas,larealizacinprcticadetareasespecficasporpartedelosusuariosylanavegacin
intuitivaporlasdiferentespginasqueformanelsitioweb.
Buscandounahomogeneidadentrelosmillonesdepginaswebqueexistenenlaactualidad
enInternet,eldiseodelasmismashaevolucionadoconeltiempohaciaunesquemageneral
perfectamente definido, ofreciendo unas interfaces bien definidas, con un conjunto de
componentes grficos y funcionales similares que hacen posible que sea cual sea el usuario
queaccedeaunsitiowebcualquieralacomunicacinentreellosseaposibleyefectiva.
De esta forma se han definido elementos y agrupaciones de estos que han demostrado su
utilidad y su comprensin por los usuarios, entre los que podemos destacar los sistemas de
navegacin, los dinteles, los pies de pgina, los formularios de entrada de datos, etc., que
normalmente encontraremos en todas las pginas web y cuyo diseo y funcionalidad son
similaresentodasellas.
Promocin Interna de
Msadelanteenestemismocaptulo,ampliaremoslainformacinsobrelasinterfaceswebde
usuario.
2. HTML,LENGUAGEDESCRIPT,PROGRAMACINWEB.
2.1HTML

Como ya hemos visto, HTML es el lenguaje con el que se "escriben" la mayora de pginas
web.
Los diseadores utilizan el lenguaje HTML para crear sus pginas web, los programas que
utilizanlosdiseadoresgeneranpginasescritasenHTMLylosnavegadoresqueutilizamoslos
usuariosmuestranlaspginaswebdespusdeleersucontenidoHTML.
El lenguaje HTML es un estndar reconocido en todo el mundo y cuyas normas define un
organismo sin nimo de lucro llamado World Wide Web Consortium (http://www.w3.org/),
ms conocido como W3C. Como se trata de un estndar reconocido por todas las empresas
relacionadas con el mundo de Internet, una misma pgina HTML se visualiza de forma muy
similarencualquiernavegadordecualquiersistemaoperativo.
La ltima versin oficial de HTML es la 5, muy recientemente estrenada y de momento muy
pocoextendida.
De forma paralela a su actividad con HTML, W3C ha continuado con la estandarizacin de
XHTML, una versin avanzada de HTML y basada en XML. La primera versin de XHTML se
denominaXHTML1.0ysepublicel26deEnerode2000.
XHTML1.0esunaadaptacindeHTML4.01allenguajeXML,porloquemantienecasitodas
susetiquetasycaractersticas,peroaadealgunasrestriccionesyelementospropiosdeXML.
LaspginasydocumentoscreadosconXHTMLsonmuysimilaresalaspginasydocumentos
HTML.LasdiscusionessobresiHTMLesmejorqueXHTMLoviceversasonrecurrentesenel
mbito de la creacin de contenidos web, aunque no existe una conclusin ampliamente
aceptada.
Actualmente,entreHTML4.01yXHTML1.0,lamayoradediseadoresescogenXHTML.Enun
futurocercano,silosdiseadoresdebenelegirentreHTML5yXHTML1.1oXHTML2.0,quizs
laeleccinseadiferente.
HTMLYCSS
Originalmente, las pginas HTML slo incluan informacin sobre sus contenidos de texto e
imagenes. Con el desarrollo del estndar HTML, las pginas empezaron a incluir tambin
informacinsobreelaspectodesuscontenidos:tiposdeletra,coloresymrgenes.
Promocin Interna de
La posterior aparicin de tecnologas como JavaScript, provocaron que las pginas HTML
tambin incluyeran el cdigo de las aplicaciones (llamadas scripts) que se utilizan para crear
pginaswebdinmicas.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Incluir en una misma pgina HTML los contenidos, el diseo y la programacin complica en
exceso su mantenimiento. Normalmente, los contenidos y el diseo de la pgina web son
responsabilidaddediferentespersonas,porloqueesconvenientesepararlos.
CSS es el mecanismo que permite separar los contenidos definidos mediante XHTML y el
aspectoquedebenpresentaresoscontenidos.

XHTML

(Contenidos)

Pgina
+ Web

CSS

(Presentacin)

PRIMEROSPASOSCONHTML
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
YahemosvistoqueHTMLesunlenguajedeetiquetasomarcado.Laspginaswebestn
formadaspormilesdeestasetiquetas.(OtroslenguajesdeetiquetassonXML,SGML).
La principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer y escribir
porpartedelaspersonasydelossistemaselectrnicos.Laprincipaldesventajaesquepueden
aumentar mucho el tamao del documento, por lo que en general se utilizan etiquetas con
nombresmuycortos.
UnaetiquetaHTMLdelimitacadaunodeloselementosquecomponenundocumentoypuede
serdecomienzoodecierre.
La etiqueta de comienzo est delimitada por los caracteres < y >. Est compuesta por el
identificadoronombredelaetiqueta,ypuedecontenerunaseriedeatributosopcionalesque
permitenaadirciertaspropiedades.Susintaxises:<identificadoratributo1atributo2...>
Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar
cualquiervalorpropiodelusuario,ovaloresHTMLpredefinidos.
La etiqueta de final est delimitada por los caracteres </ y >. Est compuesta por el
identificadoronombredelaetiqueta,ynocontieneatributos.Susintaxises:</identificador>
Promocin Interna de
Cada uno de los elementos de la pgina se encontrar entre una etiqueta de comienzo y su
correspondiente etiqueta de cierre. Tambin es posible anidar etiquetas, es decir, insertar
etiquetasentreotrasetiquetasdecomienzoydecierre.
Existe un tipo especial de etiqueta que contiene la apertura y el cierre dentro de la misma
etiqueta.Porejemplo,<br/>eslaetiquetaquemarcaunsaltodelnea.Estaseabreysecierra
alavez,aadiendo/antesdelsmbolo>.
Antesnoeranecesariocerrarestasetiquetas,perodesdequeaparecieronlasespecificaciones
w3c es obligatorio cerrar todas las etiquetas, y esta es una manera rpida de cerrar las
etiquetasquesoloconstandeapertura.Enrealidad,cualquiernavegadorleercorrectamente
una etiqueta aunque no est cerrada pero es muy recomendable acostumbrarse desde el
principioacerrarlastodas.
Unejemplo:
<p><ahref=www.google.es>EnlaceaGoogle</a></p><br/>
VemosunenlacealapginawebdeGoogledentrodeunprrafoyconunsaltodelneajusto
despus.
La etiqueta a corresponde a un enlace, a es el identificador, href es el atributo, y
www.google.es es el valor del atributo. Las especificaciones w3c marcan que el valor del
atributodebeirsiempreentrecomillas.
ELDOCUMENTOHTML
Las pginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye
informacin sobre la propia pgina, como por ejemplo su ttulo y su idioma. El cuerpo de la
pginaincluyetodossuscontenidos,comoprrafosdetextoeimgenes.
Lacabecerayelcuerpotienensuspropiasetiquetasquesonbsicasenundocumentohtml
completo. Estas etiquetas son <head></head> y <body></body> respectivamente. Adems,
estas etiquetas vienen encerradas por otra etiqueta general, que tambin es bsica, es la
etiqueta<html></html>.
Poreso,unapginawebtienelasiguienteestructurabsica:
<html>
<head></head>
<body>
</body>
</html>
Promocin Interna de
El cuerpo (llamado body en ingls) contiene todo lo que el usuario ve en su pantalla y la
cabecera(llamadaheadeningls)contienetodoloquenoseve(conlanicaexcepcindel
ttulodelapgina,quelosnavegadoresmuestrancomottulodesusventanas).
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES

Unejemplosencillsimodeunapginawebseraelsiguiente:
<html>
<head>
<title>Mi primera web</title>
</head>
<body>
<p>
HOLA MUNDO!!<br />
Esta es <strong>mi primera</strong> web completa.
</p>
</body>
</html>
Parahacerqueestecdigosemuestreenpantalladebemosseguirestospasos:
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
1) Abriruneditordetextoplano,elblocdenotasessuficiente.
2) Escribirelcdigotalycomoestescrito.
3) Guardarelarchivoconlaextensinhtml.Porejemploholamundo.html
4) Abrir un explorador y escribir la ruta donde est guardado el documento que
acabamosdecrear,conelnombredelarchivoincluido,obienabrirelarchivoconun
explorador,atravsdelbotnderechodelratn.
Asescomosemuestraelcdigoanteriorenunexplorador:
Promocin Interna de
SiyaestsviendotuprimerapginaHTMLenelnavegador,pruebaapulsarsobreelmenVer
>CdigofuenteypodrsverelcdigoHTMLdelapginaqueestcargadaenelnavegador.
Dehecho,puedesverelcdigoHTMLdecualquierpginadeInternetmediantelaopcinVer
>Cdigofuente.
ETIQUETASHTML
HTML define 91 etiquetas que los diseadores pueden utilizar para marcar los diferentes
elementosquecomponenunapgina:
a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br,
button,caption,center,cite,code,col,colgroup,dd,del,dfn,dir,div,dl,dt,em,fieldset,font,
form,frame,frameset,h1,h2,h3,h4,h5,h6,head,hr,html,i,iframe,img,input,ins,isindex,
kbd,label,legend,li,link,map,menu,meta,noframes,noscript,object,ol,optgroup,option,
p,param,pre,q,s,samp,script,select,small,span,strike,strong,style,sub,sup,table,tbody,
td,textarea,tfoot,th,thead,title,tr,tt,u,ul,var.
De todas las etiquetas disponibles, las siguientes se consideran obsoletas y no se pueden
utilizar:applet,basefont,center,dir,font,isindex,menu,s,strike,u.
Describimosbrevementeacontinuacinlasmsutilizadasysusatributosbsicos:
<a>:enlace.
Name=texto.Permitenombraralenlace.
Href=url.Urldelrecursoquesequiereenlazar.
Target=valor.Lugardondeseabrirlanuevapgina.Enlamismaventana,en
otra
<div>:divisiones.DefinezonasdentrodeunapginaHtml.
Promocin Interna de
Id.Identificador
Style=propiedad:valor.Leaplicaunestilodeterminado.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Class=nombredelaclase.LeaplicaunaclaseCSSdeterminada.
<h1><h2><h3><h4><h5><h6>.Cabeceras.Sonttulosdenivel1a6.H1eselmsgrandeh6el
mspequeo.
<p>:prrafo.Esunadelasetiquetasmsutilizadas.Permitedefinirlosprrafosqueforman
eltextodeunapgina.
<br/>Saltodelnea.
<ul>Listanoordenada
<ol>Listaordenada
<li>Elementodelista
<dl>Listadedefinicin
<dt>Trminodeunadefinicin
<dd>descripcindeunadefinicin.
<img>Imagen.
Src=url.IndicalaURLdelaimagenquesemuestra
Alt=texto.Descripcincortadelaimagen.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Longdesc=url.IndicaunaURLenlaquepuedeencontrarseunadescripcinms
detalladadelaimagen.
Name=texto.Nombredelelemento.
Height=unidaddemedida.Indicalaalturaconlaquesedebamostrarla
imagen.
Width=unidaddemedida.Indicalaanchuraconlaquesedebemostrarla
imagen.
<table>.Tabla.LastablasHTMLutilizanlosmismosconceptosdefilas,columnas,cabecerasy
ttulosquelosqueseutilizanencualquierotroentorno.Hastahaceaoslastablasse
utilizaban,apartedeparamostrarinformacintabular,paradefinirlaestructuradelaspginas
web.Esatcnicaesyaobsoletaexistiendolaetiquetasdiv,ynodebeusarselaetiquetatable
paraestefin,sinoparaellgico,queesmostrarinformacinenformadetabla.
Summary=texto.Permitedescribirelcontenidodelatabla(loutilizanlos
buscadoresylaspersonasdiscapacitadasvisualmente)
Promocin Interna de
Border=numero.Grosordelbordedelatabla.
<tr>Filadetabla.
<td>Celdadetabla.
Colspan=numero.Nmerodecolumnasqueocupaestacelda
Rowspan=numero.Nmerodefilasqueocupaesacelda.
<th>Celdacabeceradetabla.(Mismosatributosquetd)
Unejemplodelcdigodeunatablasencillaseraelsiguiente:
<html>
<head>
<title>Tabla en HTML</title>
</head>
<body>
<table border=1>
<tr>
<th>Cabecera 1</th><th>Cabecera 2</th><th>Cabecera 3</th>
</tr>
<tr>
<td>A1</td><td>A2</td><td>A3</td>
</tr>
<tr>
<td>B1</td><td>B2</td><td>B3</td>
</tr>
</table>
</body>
</html>
Semostraradelasiguientemaneraenelnavegador:
Promocin Interna de
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES

<frameset>Especificaelnmerodeframes
Cols=numero.Nmerodecolumnas.
Rows=numero.Nmerodefilas.
<frame>Definecadaframe
Src=archivo.Documentohtmlquesemuestraeneseframe.
Name=nombre.Nombredelframe.
WWW.ECLAP.JCYL.ES

Frameborder=numero.Bordedelframe.
Noresize>esteatributoindicaquenosepuedecambiareltamaodelframe.
WWW.ECLAP.JCYL.ES
Scroll=auto/yes/no.Indicasielframetendrscrollsiemrpe,nuncaodepende
deltamao.
<noframes>Contenidoalternativoparalosnavegadoresquenoadmitenframes.
CabedestacarquelosFramesoMarcosestnquedandoobsoletos.
<span>Seutilizaparadiferenciartrozosdecontenidoespeciales,alosquehabrquedarun
estilodiferente.
<form>Formulario.Encierratodosloscontenidosdeunformulario.
action="url"IndicalaURLqueseencargadeprocesarlosdatosdelformulario
method="POSToGET"MtodoHTTPempleadoalenviarelformulario
Promocin Interna de
enctype="application/xwwwformurlencodedomultipart/
formdata"Tipodecodificacinempleadaalenviarelformularioalservidor(slo
seindicadeformaexplcitaenlosformulariosquepermitenadjuntararchivos)
accept="tipo_de_contenido"Listaseparadaporcomasdetodoslostiposde
archivosaceptadosporelservidor(sloparalosformulariosquepermiten
adjuntararchivos)
Otros:acceptcharset,onsubmit,onreset
<input/>Controldeunformulario.
type="text|password|checkbox|radio|submit|reset|file|hidden|image
|button"Indicaeltipodecontrolqueseincluyeenelformulario
name="texto"Asignaunnombrealcontrol(esimprescindibleparaqueel
servidorpuedaprocesarelformulario)
value="texto"Valorinicialdelcontrol
size="unidad_de_medida"Tamaoinicialdelcontrol(paraloscamposdetextoy
depasswordserefierealnmerodecaracteres,enelrestodecontrolesserefiere
asutamaoenpxel)
maxlength="numero"Mximonmerodecaracteresparaloscontrolesdetexto
ydepassword
checked="checked"Paraloscontrolescheckboxyradiobuttonpermiteindicar
quopcinaparecepreseleccionada
disabled="disabled"Elcontrolaparecedeshabilitadoysuvalornoseenvaal
servidorjuntoconelrestodedatos
readonly="readonly"Elcontenidodelcontrolnosepuedemodificar
src="url"Paraelcontrolquepermitecrearbotonesconimgenes,indicalaURL
delaimagenqueseempleacomobotndeformulario
alt="texto"Descripcindelcontrol
<select>.Listadesplegable.
size="numero"Nmerodefilasquesemuestrandelalista(pordefectoslose
muestrauna)
multiple="multiple"Siseincluye,sepermiteseleccionarmsdeunelemento
Otros:name,disabled,onchange,onfocus,onblur
Promocin Interna de
<option>Elementodeunalistadesplegable.
selected="selected"Indicasielelementoapareceseleccionadopordefectoal
cargarselapgina
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
value="texto"Elvalorqueseenvaalservidorcuandoelusuarioeligeesaopcin
Otros:label,disabled
<textarea>readetexto
rows="numero"Nmerodefilasdetextoquemostrareltextarea
cols="numero"Nmerodecaracteresquesemuestranencadafiladeltextarea
Otros:name,disabled,readonly,onselect,onchange,onfocus,onblur
<!.>.Comentarios.
Todosestoselementosdeformularioysusfuncionesymanejosernestudiadosmsadelante
enestetema.
EstassonsolamenteunasnocionesmuybsicasdecmocrearunapginawebconHTML.Encasode
quesedeseeprofundizareneltemaserecomiendapracticarmuchoconlasetiquetas.
2.2LENGUAJEDESCRIPT
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Loslenguajesdescriptpermitenincluirprogramacinenunapginaweb.Enrealidadesuna
listadecomandoquesepuedenejecutarconlaparticipacindelusuarioosinella.En
definitivaestamoshablandodeunlenguajedeprogramacin,quesueleemplearsedentrode
uncontexto(otraaplicacin)yquenopermiteprogramaraplicacionesindependientes,sino
quenecesitandeunintrprete.
Existenmltipleslenguajesdescript:JavaScript,VBScript,PerletcSinembargo,por
compatibilidad,losmsempleadossonVBScriptyconmuchadiferenciaJavaScript.
Ladiferenciaentreellosseencuentrabsicamenteensusintaxis,aunquelosdosnacieroncon
elmismofinqueesdotardeunlenguajedescriptrpidoysencilloalaspginasweb.
HabitualmenteloslenguajesscriptenpginasHTMLseutilizanparacuatrofinesquesonlos
siguientes:
1) Validacindedatos.Sehaceenelequipoclienteyconsisteenverificarquelosdatos
quesevanaenviarenunformulariosonadecuadosdependiendodeunasreglas
Promocin Interna de
marcadas.Porejemplo,queenuncamponmerodetelfononoaparezcaunaletra,
queuncampoobligatorionoestvaco,queuncampoemailesrealmenteunemail,e
infinidaddevalidacionesms.
2) Actualizarcamposenunformulario.Comoporejemplocuandoseactualizaunalista
desplegabledependiendodelbotnderadioquesehayaseleccionado.
3) Procesarinformacinquenorequierebasededatos.Porejemplosumardosnmero
dedoscamposdeformulario,convertireurosapesetas,etc.
4) Servirdebaseparalautilizacindeotrastecnologas.DHTM,ActiveX.
Los lenguajes de script adems pueden actuar sobre lo que est mostrando el navegador, a
travsdelosobjetosintegradosqueserepresentaneneldocumento,laventanaactiva,cada
unodeloscontrolesdelformulario,etc.Paraconseguirestoseempleaunmodelodeobjetos
denominadoDocumentObjectModel(DOM).GraciasaDOM,porejemplo,podemoscambiar,
porejemplo,elcolordeunprrafodependiendodeunbotnderadioquesehayapulsado.
INCRUSTARELSCRIPT
HaytresmanerasdellamaraunscriptdentrodeunapginaHTML:
1) Usando una etiqueta <script></script>. Esta etiqueta permite incluir el cdigo
directamenteenlapginaoqueapunteaunficheroexternousandoelatributosrc.
2) Usando los atributos de etiquetas HTML que soportan scripts. Por ejemplo con el
atributoonclickdeunbotndeformulario,sellamaraaunafuncinJavaScript.
<inputtype=buttononclick=pulsar()/>
Alpulsarelbotnseejecutalafuncinpulsar()queseruntrozodecdigoquese
encuentreobienenelmismodocumentoobienenotro.
3) Incluyendoenelatributohrefdeunelementoa.Porejemplo:
<ahref=javascript:pulsar()>FuncinPulsar</a>
Alpincharenelenlacedefinidoporestaetiqueta<a>seejecutarlafuncinjavascript
pulsar().
Elcdigodelscriptpuedeescribirseenunficheroapartequedespusseguardarconla
extensin.js(enelcasodeJavaScript).Esteficheroserllamadoporeldocumentohtml
dentrodelaetiqueta<head><head>.Porejemplo:
<scripttype="text/javascript"src="scripts/script.js">

Promocin Interna de
Otramaneradeescribirelcdigoesdentrodelasetiquetas<head></head>delmismo
documentohtml.Delasiguientemanera:
<script language=JavaScript>
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Cdigo
</script>
PARTESDELSCRIPT
El cdigo de un script o programa JavaScript consta de los elementos que se dan a
continuacin,loscualessediscutirnendetalleenlossiguientestemas:
Cuerpoprincipal.Cualquiercdigosituadoentrelasetiquetas<script></script>yque
noseaunadefinicindeunafuncin.
Manipuladoresdeeventos.Loseventossonaccionesqueocurrenenrespuestaaalgo
queelusuariorealiza.Cuandounusuariohaceclickconelratnesunevento(onclick)
cuandopulsaunateclatambinesuneventoetc.Losmanipuladoresdeeventosson
scripts que se definen para enlazar la aparicin de un evento con la llamada a
funcionesJavaScript.
Funciones.LasfuncionessonrozosdecdigoJavaScriptquepermanecenalaespera
de ser ejecutados por otras secciones de cdigo. Es un concepto muy utilizado en
cualquierlenguajedeprogramacin.

WWW.ECLAP.JCYL.ES
AligualqueconHTMLparaprofundizarenestetemaserequiereunestudiocentradoenel
tema,ademsdeunosmnimosconocimientosdeprogramacin. WWW.ECLAP.JCYL.ES

2.3INTRODUCCINPROGRAMACINWEB
Daremosunavisinmuygenricasobreesteconcepto,yaqueesfundamentaltenerunabase
slidadeprogramacinparapoderllevarloalaprctica.
Ya hemos visto que el lenguaje utilizado para montar la estructura de una pgina web es
HTML o bien XHTML, pero estas etiquetas solamente permiten mostrar informacin en la
pantalla,novamsall.
Las aplicaciones web son una combinacin de diferentes lenguajes de programacin y
llamadasabasesdedatosqueconsiguenqueunawebmuestreinformacinenfuncindelo
queelcdigodelaprogramacinestipuleademsdesercapazdeleeryalmacenarcontenido
enunabasededatos.
Promocin Interna de
Contodoestoseconsigueelconceptodewebdinmicadondeloscontenidossemuestrany
cambianenfuncindeestasllamadasabasesdedatosyenfuncindeestaprogramacin.
Es importante saber diferenciar entre dos conceptos: los lenguajes del lado cliente y los
lenguajesdelladoservidor.
Lenguajesdelladocliente.Sonlosquepuedeejecutardirectamenteelnavegador
del equipo donde se est visualizando la pgina web. Un ejemplo es JavaScript.
Cuando un usuario se conecta a una pgina que tenga un cdigo JavaScript, su
propio navegador es el encargado de compilar y ejecutar este cdigo sin
necesidaddeunservidor.
Lenguajesdelladoservidor:sonloslenguajesqueseejecutanenelservidordonde
est alojada la pgina. Estos lenguajes son por ejemplo PHP, ASP El propio
navegadornoescapazdeinterpretarciertoscdigos,poreso,alconectarseauna
pginaconestetipodecdigo,elpropioservidorqueloalojaestpreparadopara
ejecutarlassentenciasdeestoslenguajes.
Varios lenguajes de programacin sirven para este cometido, los ms usados son los
siguientes:
LENGUAJEPHP
Es un lenguaje de programacin utilizado para la creacin de sitio web. PHP es un acrnimo
recursivoquesignificaPHPHypertextPreprocessor,(inicialmentesellamPersonalHome
Page).Surgien1995,desarrolladoporPHPGroup.
PHPesunlenguajedescriptinterpretadoenelladodelservidorutilizadoparalageneracin
de pginas web dinmicas, embebidas en pginas HTML y ejecutadas en el servidor. PHP no
necesita ser compilado para ejecutarse. Para su funcionamiento necesita tener instalado
ApacheoIISconlaslibrerasdePHP.LamayorpartedesusintaxishasidotomadadeC,Javay
Perlconalgunascaractersticasespecficas.Losarchivoscuentanconlaextensin(php).
VENTAJAS:
Muyfcildeaprender.
Secaracterizaporserunlenguajemuyrpido.
Soportaenciertamedidalaorientacinaobjeto.Clasesyherencia.
Esunlenguajemultiplataforma:Linux,Windows,entreotros.
Capacidaddeconexinconlamayoradelosmanejadoresdebasededatos:MysSQL,
PostgreSQL,Oracle,MSSQLServer,entreotras.
Capacidaddeexpandirsupotencialutilizandomdulos.
Promocin Interna de
Posee documentacin en su pgina oficial la cual incluye descripcin y ejemplos de
cadaunadesusfunciones.
Eslibre,porloquesepresentacomounaalternativadefcilaccesoparatodos.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Incluyegrancantidaddefunciones.
Norequieredefinicindetiposdevariablesnimanejodetalladodelbajonivel.
DESVENTAJAS:
Senecesitainstalarunservidorweb.
Todo el trabajo lo realiza el servidor y no delega al cliente. Por tanto puede ser ms
ineficienteamedidaquelassolicitudesaumentendenmero.
LalegibilidaddelcdigopuedeverseafectadaalmezclarsentenciasHTMLyPHP.
Laprogramacinorientadaaobjetosesanmuydeficienteparaaplicacionesgrandes.
Dificultalamodularizacin.
Dificultalaorganizacinporcapasdelaaplicacin.
SEGURIDAD:
PHPesunpoderosolenguajeeintrprete,yaseaincluidocomopartedeunservidorweben
formademdulooejecutadocomounbinarioCGIseparado,escapazdeaccederaarchivos,
ejecutar comandos y abrir conexiones de red en el servidor. Estas propiedades hacen que
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
cualquiercosaqueseaejecutadaenunservidorwebseainsegurapornaturaleza.
PHPestdiseadoespecficamenteparaserunlenguajemsseguroparaescribirprogramas
CGI que Perl o C, y con la seleccin correcta de opciones de configuracin en tiempos de
compilacinyejecucin,ysiguiendoalgunasprcticascorrectasdeprogramacin.
LENGUAJEASP
Es una tecnologa del lado de servidor desarrollada por Microsoft para el desarrollo de sitio
web dinmicos. ASP significa en ingls (Active Server Pages), fue liberado por Microsoft en
1996.LaspginaswebdesarrolladasbajoestelenguajeesnecesariotenerinstaladoInternet
InformationServer(IIS).
ASPnonecesitasercompiladoparaejecutarse.Existenvarioslenguajesquesepuedenutilizar
paracrearpginasASP.ElmsutilizadoesVBScript,nativodeMicrosoft.ASPsepuedehacer
tambin en Perl and Jscript (no JavaScript). El cdigo ASP puede ser insertado junto con el
cdigoHTML.Losarchivoscuentanconlaextensin(asp).
VENTAJAS:
Promocin Interna de
UsaVisualBasicScript,siendofcilparalosusuarios.
ComunicacinptimaconSQLServer.
SoportaellenguajeJScript(JavascriptdeMicrosoft).
DESVENTAJAS:
Cdigodesorganizado.
Senecesitaescribirmuchocdigopararealizarfuncionessencillas.
Tecnologapropietaria.
Hospedajedesitioswebcostosos.
ASP.NET
EsteesunlenguajecomercializadoporMicrosoft,yusadoporprogramadoresparadesarrollar
entre otras funciones, sitios web. ASP.NET es el sucesor de la tecnologa ASP, fue lanzada al
mercadomedianteunaestrategiademercadodenominada.NET.
ElASP.NETfuedesarrolladopararesolverlaslimitantesquebrindabatuantecesorASP.Creado
paradesarrollarwebsencillasograndesaplicaciones.ParaeldesarrollodeASP.NETsepuede
utilizarC#,VB.NEToJ#.Losarchivoscuentanconlaextensin(aspx).Parasufuncionamiento
delaspginassenecesitatenerinstaladoIISconelFramework.Net.MicrosftWindows2003
incluyeesteframework,solosenecesitarinstalarloenversionesanteriores.
VENTAJAS:
Completamenteorientadoaobjetos.
Controlesdeusuarioypersonalizados.
Divisinentrelacapadeaplicacinodiseoyelcdigo.
Facilitaelmantenimientodegrandesaplicaciones.
Incrementodevelocidadderespuestadelservidor.
Mayorvelocidad.
Mayorseguridad.
DESVENTAJAS:
Mayorconsumoderecursos.

Promocin Interna de
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Promocin Interna de
3. PRINCIPIOSDELDISEODEINTERFACES.
Yavimosenelprimerpuntodeestetemaunaintroduccinaldiseodeinterfaces.
Ampliaremoslainformacinenesteapartado.
CuandosehabladeSitiosWeb,sellamainterfazalconjuntodeelementosdelapantallaque
permiten al usuario realizar acciones sobre el Sitio Web por el que est navegando. Por la
misma razn, se considera parte de la interfaz a sus elementos de identificacin, de
navegacin,decontenidosydeaccin.
Todosestoselementosdeben estar preparados para ofrecer unos servicios determinados al

usuario, para que ste pueda obtener lo que entr a buscar cuando visit el Sitio Web. Por
todoesto,cadaunodeloselementosqueseintegrendentrodelainterfazdebeestarpensado
paracausarunefectosobreelusuarioydebenserutilizadosconunfin.
En este sentido, es esencial considerar que uno de los autores ms citados en cuanto a la
usabilidad de los Sitios Web, destaca que los elementos ms importantes de la portada de
cualquierSitioWebsepuedenresumirencuatropremisasgenerales:
Dejar claro el propsito del sitio: se refiere a que el sitio debe explicar a quin
perteneceyqupermitehaceraquieneslovisitan;seentiendequedebehacerlode
manera simple y rpida. Por ejemplo, ayuda en este sentido el cumplimiento de las
normasreferidasausodeURLsylogotiposoficiales.
Ayudaralosusuariosaencontrarloquenecesitan:implicaquedebecontarconun
sistema de navegacin visible y completo, pero que adems deber estar
complementado por algn sistema de bsqueda que sea efectivo para acceder al
contenidoalquenoselograaccederoquenoseencuentraasimplevista.
Demostrar el contenido del sitio: significa que el contenido se debe mostrar de
maneraclara,conttuloscomprensiblesporpartedelusuarioyconenlaceshacialas
seccionesmsusadasqueestndisponiblesdondeelusuariolosbusque.Ayudaren
estesentidotenerunseguimientodelasvisitasparacomprenderqueslomsvistoy
lomsbuscadodelSitioWeb.
Usar diseo visual para mejorar y no para definir la interaccin del Sitio Web: se
refiereaqueloselementosgrficosdelSitioWebdebenestarpreparadosparaayudar
en los objetivos del sitio y no slo como adornos utilizados para rellenar espacio.
Aunquesetratadeunodelostemasmsdebatibles,sualcancenoeselderestringir
el uso de imgenes y elementos grficos, sino a que su uso sea adecuado para la
experienciadeusoquesedeseaofrecer.
Promocin Interna de
Como se puede apreciar, el foco central de una interfaz es permitir que el usuario que llega
como visitante consiga los objetivos que lo trajeron al Sitio Web y que ste le ponga fcil el
accesoaloscontenidosatravsdesuspantallas.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Para conseguir este objetivo, es necesario que la interfaz adopte los elementos, que
detallamosenestecaptulo,atravsdeloscualesserposibleconseguirelcumplimientode
lospostuladosantessealados.
ELEMENTOSDELAINTERFAZ
La interfaz del Sitio Web, cualquiera sea el objetivo que persiga, debe tener una serie de
normas de carcter general, referidas a sus caractersticas como sistema de informacin y
comunicacin. Gracias al cumplimiento de esas normas, el usuario conseguir acceder a las
informaciones que se le ofrecen y, adems, podr realizar las acciones que el organismo
propietariodelespaciodigitalleentregaatravsdeestesistema.
Dichas caractersticas tienen que ver con los elementos de identificacin, de navegacin, de
contenidos y de accin que el Sitio Web debe contener, todos los cuales se analizan en las
siguientespginas.
Laexistenciaeimportanciadedichoselementos,comoasimismolaubicacinquedebentener
en la interface, se ha visto comprobada a travs de las investigaciones que se han hecho en
tornoalosSitiosWeb.
Respecto de los elementos de la interface, los aspectos ms relevantes a tener en
consideracinsonlossiguientes:
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Usodelogotipos
Sistemadenavegacin
reasdecontenidos
reasdeinteraccin
Experienciadeusuario
Promocin Interna de
Laubicacinrelativadeestoselementospodraser,porejemplo,lasiguiente.
SISTEMADENAVEGACIN
Eselconjuntodeelementospresenteencadaunadelaspantallas,quepermiteaunusuario
moverseporlasdiferentesseccionesdeunSitioWebyretornarhastalaportada,sinsentirla
sensacindehaberseperdidoenesecamino.
Paraconseguirestoseincluyenelementoscomo:
Mendesecciones:esunazonadelainterfazenlaquesedetallanlasseccionesocategoras
enlasqueestdivididalainformacincontenidaenelSitioWeb.
Menderastros(migasdepanobreadcrumb):eselmenqueindicamediantelosnombres
decadaseccinocategoradelmenladistanciaqueseparaalapginaactualdelaportada.
Eseltpicomenquesueleaparecerjustodebajodelacabeceradelaspginas,indicando,o
bienlaspginasporlasquehemosnavegadohastallegardondenosencontramos,obienla
estructura de pginas del sitio con respecto al documento donde estamos. Normalmente se
sueleutilizarlasegunda.Sueletenerelsiguientesencilloformato:(Ejemplo)
Inicio>Mendelibros>Novelas
Identificacin de secciones: debe estar en la zona superior de la pgina, cerca de la zona
donde se encuentra el logotipo que se haya elegido para identificar al Sitio Web. Es una
manera de identificar, a travs de colores, o imgenes la seccin de la pgina donde nos
encontramos.
Promocin Interna de
Botonesdeaccin:sonaquelloselementosquepermitenrealizaraccionesdirectasrelativasa
la navegacin y que se muestran como parte de sta (Volver al inicio, Contacto, Mapa del
sitio).
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Piedepgina:eslazonainferiordecadapantallacumpleelrelevantepapeldecompletarsula
informacin que se ofrece en las zonas superiores de navegacin. (Nombres, direcciones,
telfonos,emails)
READECONTENIDOS
Sonlaszonasenlaqueseexponelainformacinencadapginaweb,sinimportarelformato
olosmediosquestautilice.
Loidealesquesedividaentreszonas.Ttulo,resumenycontenido.
READEINTERACCIN
Seentiendepor"reasdeinteraccin"alaszonasenlaqueseofrecerealizacindeacciones
porpartedelosusuariosdelSitioWeb,atravsdelascualespuedenutilizarlosserviciosdela
institucin que pone en marcha el espacio digital. La interaccin, en este sentido, va desde
acciones menores que pueden ser enlaces para mayor informacin o suscripcin a servicios
informativos peridicos, hasta la realizacin de trmites complejos como la obtencin de
certificadosoelpagodeobligaciones.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Promocin Interna de
4. FORMULARIOSELECTRNICOS
Todoshemosrellenadoalgunavezunformularioenpapel.
Losformulariosenpapelsonfamososhabitualmenteporsudificultadpararellenarlos,yenel
casodeformulariosrellenosamano,sudificultadparadescifrarlosposteriormente.
Los formularios electrnicos vienen a minimizar muchas de las desventajas de los que se
presentan en papel. Es posible disear un formulario electrnico de forma que contenga
informacin de ayuda para la persona que va a rellenarlo. Estos formularios electrnicos
pueden contener campos de texto, listas desplegables, casillas para seleccionar entre varias
opciones(unadeellasovarias),camposdetextolargodondeescribirobservaciones
Puesto que el formulario se rellena desde el propio ordenador, se evitan todos los posibles
problemas de interpretacin de los datos introducidos, como sucede con los formularios en
papelrellenosamano.Adems,silacomputadoraestconectadaaunared,losformularios
electrnicospuedensercumplimentadosycompartidosdelamismaformaquesecomparte
cualquierotrotipodedocumento,eliminandoasporcompletolanecesidaddelosformularios
enpapel.
Actualmente existen muchas maneras de crear formularios electrnicos, por ejemplo, los
propiosprogramasofimticostipoOfficepermitenlacreacindeestaherramienta.Sonmuy
utilizados tambin los formularios en pdf, configurados a travs de la aplicacin Adobe
Acrobat, pero es necesaria la versin Proffesional para poder editarlos, aunque no para
rellenarlos.
Los que nos interesan en este caso son los formularios creados con html, a travs de las
etiquetasqueyavimosensucorrespondienteapartado.Vamosaprofundizarunpocomsen
lautilidadyusodecadaunadeellas.
FORMULARIOSCONHTML
Los formularios ms sencillos se pueden crear utilizando solamente dos etiquetas: <form> y
<input>.
La etiqueta <form> encierra todos los contenidos del formulario (botones, cuadros de texto,
listasdesplegables)ylaetiqueta<input>permitedefinirvariostiposdiferentesdeelementos
(botonesycuadrosdetexto).
Ya vimos en el apartado 2 de este tema las etiquetas correspondientes a formularios, y sus
atributos.
Promocin Interna de
Lamayoradeformulariosutilizanslolosatributosactionymethod.Elatributoactionindica
laURLdelaaplicacindelservidorqueseencargadeprocesarlosdatosintroducidosporlos
usuarios. Esta aplicacin tambin se encarga de generar la respuesta que muestra el
navegador.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Elatributomethodestablecelaformaenlaqueseenvianlosdatosdelformularioalservidor.
EsteatributohacereferenciaalmtodoHTTP,porloquenoesalgopropiodeHTML.Losdos
valores que se utilizan en los formularios son GET y POST. De esta forma, casi todos los
formulariosincluyenelatributomethod="get"oelatributomethod="post".
Al margen de otras diferencias tcnicas, el mtodo POST permite el envo de mucha ms
informacinqueelmtodoGET.Engeneral,elmtodoGETadmitecomomximoelenvode
unos500bytesdeinformacin.LaotragranlimitacindelmtodoGETesquenopermiteel
envodearchivosadjuntosconelformulario.Adems,losdatosenviadosmedianteGETseven
enlabarradedireccionesdelnavegador(seaadenalfinaldelaURLdelapgina),mientras
quelosdatosenviadosmediantePOSTnosepuedenvertanfcilmente.
ELEMENTOSDEFORMULARIO
Lamayoradeloselementosseformanconlaetiqueta<input>.Elatributotypediferenciaa
cadaunodelosdiezcontrolesquesepuedencrearconlaetiqueta<input>.
Elatributonameeselmsimportanteenloscamposdelformulario.Dehecho,siuncampono
incluye el atributo name, sus datos no se envan al servidor. El valor que se indica en el
atributonameeselnombrequeutilizalaaplicacindelservidorparaobtenerelvalordeeste
campodeformulario.Cuandoelusuariopulsaelbotndeenvodelformulario,elnavegador
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
enva los datos a una aplicacin del servidor para que procese la informacin y genere una
respuestaadecuada.Enelservidor,laaplicacinqueprocesalosdatosdebeobtenerenprimer
lugartodalainformacinintroducidaporelusuario.Paraello,utilizaelvalordelatributoname
paraobtenerlosdatosdecadacontroldelformulario.
CUADRODETEXTO
Elvalordelatributotypeestext.

Nombre:
<input type="text" name="nombre" value="" />
Setratadelelementomsutilizadoenlosformularios.
Se puede controlar el tamao con el atributo size, el nmero mximo de caracteres a
introducirconelatributomaxlength,elvalorpordefectoconvalueysieseditableono
conreadonly.
Promocin Interna de
CUADRODECONTRASEA
Elvalordetypeespassword.

Password:
<input type="password" name="pass" value="" />
La nica diferencia entre este control y el cuadro de texto normal es que el texto que el
usuario escribe en un cuadro de contrasea no se ve en la pantalla. En su lugar, los
navegadoresocultaneltextoutilizandoasteriscosocrculos,porloqueesidealparaescribir
contraseasyotrosdatossensibles.
CHECKBOX
Elvalordetypeescheckbox.

Elige opciones
<input type="checkbox" value=1/> Opcion 1
Loscheckboxo"casillasdeverificacin"soncontrolesdeformularioquepermitenalusuario
seleccionar y deseleccionar opciones individualmente. Aunque en ocasiones se muestran
varioscheckboxjuntos,cadaunodeellosescompletamenteindependientedelresto.Poreste
motivo,seutilizancuandoelusuariopuedeactivarydesactivarvariasopcionesrelacionadas
peronoexcluyentes.
Sisequieremostraruncheckboxseleccionadopordefecto,seutilizaelatributochecked.
RADIOBUTTON
Elatributotypeesradio.
Promocin Interna de

WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Elige una opcin:
<input type="radio" value=op/> Opcion 1
Los controles de tipo radiobutton son similares a los controles de tipo checkbox, pero
presentan una diferencia muy importante: son mutuamente excluyentes. Los radiobutton se
utilizan cuando el usuario solamente puede escoger una opcin entre las distintas opciones
relacionadasqueselepresentan.Cadavezqueseseleccionaunaopcin,automticamentese
deseleccionalaotraopcinqueestabaseleccionaba.
El atributo name se emplea para indicar los radiobutton que estn relacionados. Por lo
tanto, cuando varios radiobutton tienen el mismo valor en su atributo name, el navegador
sabe que estn relacionados y puede deseleccionar una opcin del grupo de radiobutton
cuandoseseleccioneotraopcin.
BOTNDEENVODEFORMULARIO
Elvalordetypeessubmit.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES

<input type="submit" value=Enviar/>
Elnavegadorseencargadeenviarautomticamentelosdatoscuandoelusuariopinchasobre
este tipo de botn. El valor del atributo value es el texto que muestra el botn. Si no se
estableceelatributovalue,elnavegadormuestraeltextopredefinidoEnviarconsulta.
BOTNDERESETEO
Elvalordetypeesreset.

<input type="reset" value=Borrar campos/>
Aunque su uso era muy popular hace unos aos, la mayora de formulariosmodernos ya no
utilizan este tipo de botn. Se trata de un botn especial que borra todos los datos
introducidosporelusuarioydevuelveelformularioasuestadooriginal.

Promocin Interna de
FICHEROSADJUNTOS
Elvalordetypeesfile.

<input type="file" />
Losformulariostambinpermitenadjuntararchivosparasubirlosalservidor.
Elnavegadorseencargademostraruncuadrodetextodondeapareceelnombredelarchivo
seleccionadoyunbotnquepermitenavegarporlosdirectoriosyarchivosdelordenadordel
usuario.
CAMPOSOCULTOS
Elvalordetypeeshidden.
<input type="hidden" />
Loscamposocultosseempleanparaaadirinformacinocultaenelformulario.
Los campos ocultos no se muestran por pantalla, de forma que el usuario desconoce que el
formulariolosincluye.
Normalmenteloscamposocultosseutilizanparaincluirinformacinquenecesitaelservidor
peroquenoesnecesarioonoesposiblequelaestablezcaelusuario.
BOTNDEIMAGEN
Elvalordetypeesimage.

<input type="image" src=acepta.png />
Elaspectodelosbotonesdeformulariosepuedepersonalizarporcompleto,yaqueinclusoes
posibleutilizarunaimagencomobotn.
ElatributosrcindicalaURLdelaimagenquedebemostrarelnavegadorenlugardelbotn
normal.
Su principal ventaja es que permite personalizar por completo la esttica de los botones y
mostrarlosconunaspectohomogneoentodoslosnavegadores.Elprincipalinconvenientees
queralentizalacargadelformularioyquesisequieremodificarsuaspecto,esnecesariocrear
unanuevaimagen.
BOTN
Elvalordetypeesbutton.

Promocin Interna de
<input type="button" value=Guardar cambios />
Algunos formularios complejos necesitan botones ms avanzados que los de enviar datos
(type="submit") y resetear el formulario (type="reset"). Por ese motivo, el estndar
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
HTML/XHTMLdefineunbotndetipogenrico.
Este tipo de botones slo son tiles si se utilizan junto con el lenguaje de programacin
JavaScript.SilapginaincluyecdigoJavaScript,losbotonesdeestetiposepuedenprogramar
paraquerealicencualquiertareacomplejacuandosepulsasobreellos.
READETEXTO
Esteeselprimerelementoquevemosquenoutilizaetiqueta<input>
Elreadetextoutilizalaetiqueta<textarea>

Observaciones: <br />
<textarea rows="8" cols="40"></textarea>

WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES

Lasreasdetextosontilescuandosedebeintroducirunagrancantidaddetexto,yaquees
muchomscmododeintroducirqueenuncampodetextonormal.
Los atributos ms utilizados en las etiquetas <textarea> son los que controlan su anchura y
altura. La anchura del rea de texto se controla mediante el atributo cols, que indica las
columnasonmerodecaracteresquesepodrnescribircomomximoencadafila.Laaltura
del rea de texto se controla mediante rows, que indica directamente las filas de texto que
sernvisibles.
LISTADESPLEGABLE
Utiliza la etiqueta <select> para definir la lista y <option> para definir cada uno de los
elementos.Haydiferentestiposdelistasdesplegables:listasquesolomuestranunvalorala
vez y solo permiten seleccionar un valor, listas que muestra varios pero solo permite
seleccionarunoyporltimolistasquemuestranypermitenseleccionarvarioselementos.
Laetiqueta<select>definelalistayencierratodaslasopcionesquemuestralalista.Cadauna
delasopcionesdelalistasedefinemedianteunaetiqueta<option>.Elatributovaluedecada
opcin es obligatorio, ya que es el dato que se enva al servidor cuando el usuario enva el
Promocin Interna de
formulario. Para seleccionar por defecto una opcin al mostrar la lista, se aade el atributo
selectedalaopcindeseada.

Promocin Interna de
5. ACCESIBILIDAD,DISEOUNIVERSALYUSABILIDAD
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
5.1ACCESIBILIDAD
El principal objetivo de la accesibilidad web es el de permitir a cualquier usuario,
independientementedeltipodediscapacidadquesufra,elaccesoaloscontenidosdelsitioy
permitirlelanavegacinnecesariapararealizarlasaccionesdeseadas.
Los sitios web accesibles no solamente facilitan el acceso de sus contenidos a los usuarios
discapacitados, sino que tambin permiten ofrecer la misma funcionalidad con dispositivos
muylimitados(dispositivossinpantallaoconpantallasminsculas,dispositivossintecladoni
ratn,etc.).
Las cuatro principales ventajas de disear un sitio web completamente accesible son las
siguientes:
Lossitiosaccesiblesseparancompletamentediseoycontenido.
Un sitio accesible puede ser accedido por multitud de dispositivos diferentes sin
necesidaddereescribirelcdigoHTML.
Lossitiosaccesiblessonlosnicosconunaaudienciapotencialglobal,yaquepermiten
elaccesoatodoslosusuariosyatodoslosdispositivos.
Generalmente,lossitiosaccesiblessonmsfcilesdeutilizartambinparalosusuarios
sindiscapacidades.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES

La creacin de sitios accesibles puede realizarse siguiendo las recomendaciones establecidas
por el W3C y que se recogen en el documento Web Content Accessibility Guidelines
(http://www.w3.org/WAI/intro/wcag.php)(WCAG).
LasrecomendacionesdelWCAG1.0estnformadaspor65requisitosqueunsitiowebdebe
cumplirparaconsiderarseaccesible.Losrequerimientosseagrupanenprioridades.
Los requisitos de prioridad 1 son de obligado cumplimiento, los de prioridad 2 son
recomendablesylosdeprioridad3sondeseables.
Si un sitio web cumple con todos los requisitos de prioridad 1, se considera que el sitio es
conformealnivelAdeaccesibilidad.ElnivelAAdeaccesibilidadestreservadoparalossitios
que cumplan todos los requisitos de prioridad 1 y prioridad 2. Finalmente, los sitios que
cumplenlos65requisitos,sonconformesalnivelAAAdeaccesibilidad.

Promocin Interna de
5.2.DISEOUNIVERSAL
Elobjetivodeldiseouniversalessimplificarlarealizacindelastareascotidianasmediante
laconstruccindeproductos,serviciosyentornosmssencillosdeusarportodaslaspersonas
ysinesfuerzoalguno.Eldiseouniversal,aspues,beneficiaatodaslaspersonasdetodaslas
edadesyhabilidades.
Consta de siete principios bsicos que deben cumplir estos servicios y productos, entre ellos
laspginasyaplicacionesweb.Lossieteprincipiosysuspautasparaquesecumplanson:
1)Principio:Usoequiparable
Eldiseoestilyvendibleapersonascondiversascapacidades.
PautasparaelPrincipio1:
9 Queproporcionelasmismasmanerasdeusoparatodoslosusuarios:idnticascuando
esposible,equivalentescuandonoloes.
9 Queevitesegregaroestigmatizaracualquierusuario.
9 Las caractersticas de privacidad, garanta y seguridad deben estar igualmente

disponiblesparatodoslosusuarios.
9 Queeldiseoseaatractivoparatodoslosusuarios.
2)Principio:Usoflexible
Eldiseoseacomodaaunampliorangodepreferenciasyhabilidadesindividuales.
PautasparaelPrincipio2
9 Queofrezcaposibilidadesdeeleccinenlosmtodosdeuso.
9 Quepuedaaccederseyusarsetantoconlamanoderechacomoconlaizquierda.
9 Quefacilitealusuariolaexactitudyprecisin.
9 Queseadaptealpasooritmodelusuario.
3)Principio:Simpleeintuitivo
El uso del diseo es fcil de entender, atendiendo a la experiencia, conocimientos,
habilidadeslingsticasogradodeconcentracinactualdelusuario.
9 Queeliminelacomplejidadinnecesaria.
Promocin Interna de
9 Queseaconsistenteconlasexpectativaseintuicindelusuario.
9 Queseacomodeaunampliorangodealfabetizacinyhabilidadeslingsticas.
9 Quedispenselainformacindemaneraconsistenteconsuimportancia.
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
9 Queproporcioneavisoseficacesymtodosderespuestaduranteytraslafinalizacin
delatarea.
4)Principio:Informacinperceptible
Eldiseocomunicademaneraeficazlainformacinnecesariaparaelusuario,atendiendoa
lascondicionesambientalesoalascapacidadessensorialesdelusuario.
9 Que use diferentes modos para presentar de manera redundante la informacin
esencial(grfica,verbalotctilmente)
9 Queproporcionecontrastesuficienteentrelainformacinesencialysusalrededores.
9 Queamplelalegibilidaddelainformacinesencial.
9 Que diferencie los elementos en formas que puedan ser descritas (por ejemplo, que
hagafcildarinstruccionesodirecciones).
9 Queproporcionecompatibilidadconvariastcnicasodispositivosusadosporpersonas
conlimitacionessensoriales.
5)Principio:Contoleranciaalerror
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
El diseo minimiza los riesgos y las consecuencias adversas de acciones involuntarias o
accidentales.
9 Que disponga los elementos para minimizar los riesgos y errores: elementos ms
usados,msaccesibles;yloselementospeligrososeliminados,aisladosotapados.
9 Queproporcioneadvertenciassobrepeligrosyerrores.
9 Queproporcionecaractersticassegurasdeinterrupcin.
9 Quedesalienteaccionesinconscientesentareasquerequierenvigilancia.
6)Principio:Queexijapocoesfuerzofsico
Eldiseopuedeserusadoeficazyconfortablementeyconunmnimodefatiga.
9 Quepermitaqueelusuariomantengaunaposicincorporalneutra.
Promocin Interna de
9 Queutilicedemanerarazonablelasfuerzasnecesariasparaoperar.
9 Queminimicelasaccionesrepetitivas.
9 Queminimiceelesfuerzofsicocontinuado.
7)Principio:Tamaoyespacioparaelaccesoyuso
Que proporcione un tamao y espacio apropiados para el acceso, alcance, manipulacin y
uso,atendiendoaltamaodelcuerpo,laposturaolamovilidaddelusuario.
9 Queproporcioneunalneadevisinclarahacialoselementosimportantestantopara
unusuariosentadocomodepie.
9 Que el alcance de cualquier componente sea confortable para cualquier usuario
sentadoodepie.
9 Queseacomodeavariacionesdetamaodelamanoodelagarre.
9 Que proporcione el espacio necesario para el uso de ayudas tcnicas o de asistencia
personal.
Fuente: Centro para el Diseo Universal (NC State University, The Center for Universal Design, an initiative of the
CollegeofDesign)
Traduccinyadaptacin:FundacinSidar
5.3.USABILIDAD
SegnlaOrganizacinInternacionalparalaEstandarizacin(ISO)lausabilidadpuededefinirse
dedosmaneras:
ISO/IEC9126:
Lausabilidadserefierealacapacidaddeunsoftwaredesercomprendido,aprendido,usado
yseratractivoparaelusuario,encondicionesespecficasdeuso
ISO/IEC9241:
Usabilidad es la eficiencia y satisfaccin con la que un producto permite alcanzar objetivos
especficosausuariosespecficosenuncontextodeusoespecfico
La usabilidad implica preguntarse cosas como las siguientes, que pueden responderse
realizandoanlisisdeusuarios/visitantesytareasalplanificarunproyectoweb:
Promocin Interna de
Quinessonlosusuarios,culessusconocimientos,yqupuedenaprender?
Ququierenonecesitanhacerlosvisitantes?
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
Culeslaformacingeneraldelosusuarios?
Culeselcontextoenelqueelvisitanteesttrabajando?
Qudebedejarsealamquina?Qualusuario?
Otrasconsideracionesincluyen:
Pueden realizar fcilmente sus tareas previstas? Por ejemplo, pueden realizar las
tareasprevistasalavelocidadesperada?
Cuntapreparacinnecesitanlosvisitantes?
Qu documentacin u otro material de apoyo estn disponible para ayudar al
usuario?Puedestehallarlasrespuestasquebuscanenestosmedios?
Culesycuntoserrorescometenlosusuarioscuandointeractanconelproducto?
Puedeelvisitanterecuperarsedeloserrores?Quhadehacerparaello?Ayudael
productoarecuperarsedeloserrores?Porejemplo,muestraelsoftwaremensajesde
erroresinformativosynoamenazantes?
Se han tomado medidas para cubrir las necesidades especiales de los usuarios con
discapacidades?(Esdecir,sehatenidoencuentalaaccesibilidad?)
Todos estos temas te permitirn, adems, fidelizar visitas, es decir, hacer que tus visitantes
WWW.ECLAP.JCYL.ES
WWW.ECLAP.JCYL.ES
vuelvanunayotravez,puestoquealponerlesfcillanavegacinportusitiomejorarsmucho
laimagendetuweb.
Losprincipiosbsicosenlosquesebasalausabilidadson:
Facilidad de Aprendizaje: facilidad con la que nuevos usuarios desarrollan una
interaccin efectiva con el sistema o producto. Est relacionada con la sintetizacin,
familiaridad,lageneralizacindelosconocimientospreviosylaconsistencia.
Flexibilidad:relativaalavariedaddeposibilidadesconlasqueelusuarioyelsistema
pueden intercambiar informacin. Tambin abarca la posibilidad de dilogo, la
multiplicidad de vas para realizar la tarea, similitud con tareas anteriores y la
optimizacinentreelusuarioyelsistema.
Robustez:eselniveldeapoyoalusuarioquefacilitaelcumplimientodesusobjetivos.
Est relacionada con la capacidad de observacin del usuario, de recuperacin de
informacinydeajustedelatareaalusuario.

Promocin Interna de
BIBLIOGRAFA
JenniferNiederstRobbins.DiseoWeb,guadereferencia.
DesarrollodeAplicacionesWebDinmicasUNED
PGINASWEBCONSULTADAS
http://www.sidar.org/(FundacinSidar)
www.w3c.es
www.accesible.es

Sop Inf t20 Final

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Sop Inf t20 Final

Încărcat de

Drepturi de autor:

Formate disponibile

Tcnico de Soporte

1. DISEODEPGINASWEBEINTERFACESWEBDEUSUARIO ...............................................................2

2. HTML,LENGUAGEDESCRIPT,PROGRAMACINWEB. ........................................................................5

3. PRINCIPIOSDELDISEODEINTERFACES. ..........................................................................................21

4. FORMULARIOSELECTRNICOS ..........................................................................................................25

PGINA WEB:Documento elaboradoenHTMLqueformaparte deunsitioWeb.Adems del

<title>Mi primera web</title>

HOLA MUNDO!!<br />

Esta es <strong>mi primera</strong> web completa.

<th>Cabecera 1</th><th>Cabecera 2</th><th>Cabecera 3</th>

Todosestoselementosdeben estar preparados para ofrecer unos servicios determinados al

<input type="text" name="nombre" value="" />

<input type="password" name="pass" value="" />

<input type="checkbox" value=1/> Opcion 1

<input type="checkbox" value=2/> Opcion 2

<input type="checkbox" value=3/> Opcion 3

<input type="radio" value=op/> Opcion 1

<input type="radio" value=op/> Opcion 2

<input type="radio" value=op/> Opcion 3

<input type="hidden" />

<input type="button" value=Guardar cambios />

<textarea rows="8" cols="40"></textarea>

9 Las caractersticas de privacidad, garanta y seguridad deben estar igualmente

S-ar putea să vă placă și