Documentos de Académico
Documentos de Profesional
Documentos de Cultura
AplicacionesWeb
1.1Definicin
Llamadas webapps, esta categora de software
centrado en redes agrupa un amplia gama de
aplicaciones. En su forma ms sencilla, las web apps son
poco ms que un conjunto de archivos de hipertexto
vinculados, que presentan informacin con uso de texto y
grficas limitadas. Sin embargo, desde que surgi web
2.0 , las web apps estn evolucionando hacia ambientes
de computo sofisticados que no solo proveen
caractersticas aisladas, funciones de computo y
contenido para el usuario final, sino que tambin estn
integradas con bases de datos corporativas y aplicaciones
de negocios.
Una pgina web est compuesta principalmente por
informacin (slo texto y/o mdulos multimedia) as
como por hiperenlaces; adems puede contener o asociar
Hoja de estilo (datos de estilo para especificar cmo debe
visualizarse) y tambin Aplicacin informtica
(aplicaciones embebidas para as hacerla interactiva).
Las paginas web siguen dos tipos de arquitectura cliente
servidor.
La arquitectura de dos niveles, la cual solo tiene un servidor web
y sus clientes
La arquitectura de tres niveles, en la cual se tiene un servidor
web, un servidor de base de datos (o cualquier otro tipo de
servidor) y sus clientes
1.2Atributos
Lagranmayoradelaswebappspresentalossiguientes
atributos:
Uso intensivo de redes: Una webapp reside en una red y debe
atender las necesidades de una comunidad diversa de clientes.
La red permite acceso y comunicacin mundiales (p.ej. La
internet) o tiene acceso y comunicacin limitados (p.ej. Una
intranet).
Concurrencia: A la webapp puede acceder un gran numero de
usuarios a la vez. En muchos casos, los patrones de uso entre los
usuarios finales varan mucho.
Carga Impredecible: El numero de usuarios de la webapp cambia
en varios ordenes de magnitud de un da a otro.
Rendimiento: Si un usuario de la webappp debe esperar
demasiado, l o ella quiz decidan irse a otra parte.
Disponibilidad: Aunque no es razonable esperar una
disponibilidad del 100%, es frecuente que los usuarios de
webapps populares demanden acceso las 24 hrs de los 365 das
del ao.
Orientadas a Objetos: Ademas, las webapps se utilizan en forma
comn para acceder a informacin que existe en bases de datos
que no son parte integral del ambiente basado en la web (por
ejemplo, comercio electrnico o aplicaciones financieras)
Contenido sensible: La calidad y naturaleza esttica del
contenido constituye un rasgo importante de la calidad de una
webapp.
Evolucin continua: No es raro que ciertas webapps
(especficamente su contenido) se actualicen minuto a minuto.
Seguridad: Con el fin de proteger el contenido sensible y brindar
modos seguro de transmisin de los datos, deben
implementarse medidas estrictas de seguridad a travs de la
infraestructura de apoyo de una webapp y dentro de la misma
aplicacin.
Esttica: Parte innegable del atractivo de una webapp es su
apariencia y percepcin.
1.3AplicacionesWebEstticas
a{
fontsize:12px;
fontweight:bold;
}
</style>
Usandoarchivosexternos
Los archivos externos tambin pueden ser utilizados para definir
propiedades de estilo para uno o ms documentos. El archivo,
usualmente presenta la extensin "css" (por ejemplo, "basic.css")
y el conjunto de propiedades puede ser definido de la misma
forma que en el contenido del elemento HTML style. Esta
prctica separa completamente la parte semntica de la
presentacin del documento, mientras ayuda a los autores a
compartir definiciones de estilo entre varias pginas de sitio.
Para hacer referencia a un archivo CSS desde el documento
HTML, puedes usar el tag HTML link en el encabezado del
mismo. Esta declaracin le dice al agente de usuario, dnde se
pueden encontrar las declaraciones de estilo de este documento.
<link type="text/css" href="basico.css" />
Usar esta misma lnea en diferentes documentos, te permitir
especificar atributos comunes a un conjunto de pginas (o
inclusive a un sitio entero), lo que puede resultar en
actualizaciones ms sencillas.
1.6Ciclodevidadelsoftware
Uncasodeusodescribeelcomportamientodelsistema
endistintascondicionesenlasqueelsistemarespondea
unapeticindealgunodelosparticipantes.Enesencia,
uncasodeusonarraunahistoriaestilizadasobrecmo
interactaunusuariofinal(quetieneciertonmerode
rolesposibles)conelsistema.
1.6.2Planeacin
</html>
El atributo lang en la etiqueta de apertura <html> es el nico
atributo que necesitamos especificar. Este atributo define el
idioma del contenido del documento que estamos creando, en
este caso el valor del atributo toma el valor de es por
espaol.
1.1.3<head>
El cdigo HTML insertado entre las etiquetas <html>
tiene que ser dividido entre dos secciones principales, la
primera seccin es la cabecera y la segunda el cuerpo. El
siguiente paso ser crear estas dos secciones.
El elemento <head> va primero, por su puesto, y al igual
que el resto de los elementos estructurales tiene una
etiqueta de apertura y una de cierre:
<!DOCTYPE html>
<html lang=es>
<head>
</head>
</html>
1.1.4<body>
La siguiente gran seccin que es parte principal de la
organizacin de un documento HTML es el cuerpo. El
cuerpo representa la parte visible de todo documento y
es especificado entre las etiquetas <body>
<!DOCTYPE html>
<html lang=es>
<head>
</head>
<body>
</body>
</html>
1.1.5<meta>
Algunos cambios e innovaciones fueron incorporados
dentro de la cabecera, y uno de ellos es la etiqueta que
define el juego de caracteres a utilizar para mostrar el
documento. sta etiqueta especifica cmo el texto ser
presentado en pantalla.
<!DOCTYPE html>
<html lang=es>
<head>
<meta charset=utf8>
</head>
<body>
</body>
</html>
La innovacin de este elemento en HTML5, como en la
mayora de los casos, es solo simplificacin. La nueva etiqueta
<meta> para la definicin del tipo de caracteres es ms corta y
simple. Por supuesto, podemos cambiar el utf8 por el
necesario para nuestros documentos y agregar otras etiquetas
<meta> como description o keywords para definir otros
aspectos de la pagina web, como es mostrado en el siguiente
ejemplo:
<!DOCTYPE html>
<html lang=es>
<head>
<meta charset=utf8>
<meta name=description content=Ejemplo de HTML5>
<meta name=keywords content = HTML5, CSS6,
Javascript>
</head>
<body>
</body>
</html>
1.1.6<title>
Laetiqueta <title>, simplemente especifica el titulo del
documento.
<!DOCTYPE html>
<html lang=es>
<head>
<meta charset=utf8>
<meta name=description content=Ejemplo de HTML5>
<meta name=keywords content = HTML5, CSS6, Javascript>
<title>Nombre de la Pagina Web</title>
</head>
<body>
</body>
</html>
Favicon
Visualizacindelaetiqueta<title>
1.1.7<link>
ARR1 esto es para que el motor de busqueda identifique la parte en donde esta la informacion que busca el usuario (Previsualizacin)
Adolfo Reyes Roman, 29/01/2013
Los dos mensajes insertados en el cdigo anterior fueron
construidos con el elemento <article> y tiene una
estructura especifica. En la parte superior de estructura
incluimos las etiquetas <header> conteniendo el ttulo
definido con el elemento <h1> y sobre el final , luego del
texto, vienen las etiquetas <footer> especificando la
cantidad de comentarios recibidos.
1.3.2<hgroup>
Dentro de cada elemento <header>, en la parte superior del
cuerpo o al comienzo de cada <article>, se incorporaron los
elementos <h1> para declarar un titulo. Bsicamente, las
etiquetas <h1> son todo lo que necesitamos para crear un
ttulo, pero en muchas ocasiones se necesitara utilizar
subttulos o ms informacin que especifique de qu se trata la
pgina web o una seccin en particular. Para crear este tipo de
cabeceras , se puede aprovechar el resto de las etiquetas H,
como <h2>, <h3>,,<h6>, pero siempre considerando que
por propsitos de procesamiento interno, y para evitar generar
mltiples secciones durante la interpretacin del documento
por parte del navegador, estas etiquetas deben ser agrupadas .
Por esta razn, HTML5 provee el elemento <hgroup>:
Las etiquetas deben conservar su jerarqua, lo que
significa que debemos primero declarar la etiqueta <h1>,
luego usar <h2> para subttulos y as sucesivamente. Sin
embargo, a diferencia de anteriores versiones de HTML,
HTML5 nos deja reusar las etiquetas H y construir esta
jerarqua una y otras vez en cada seccin del documento.
El elemento <hgroup> es necesario cuando tenemos un
ttulo y subttulo o ms etiquetas H y esta fue la razn por
la que en nuestro ejemplo dejamos los datos adicionales
afuera. Si solo dispone de una etiqueta, <h1> o la
etiqueta <h1> junto con datos adicionales, no tiene que
agrupar estos elementos juntos.
Siempre hay que recordar que <hgroup> fue creado solo
con la intensin de agrupar etiquetas H, exactamente
como su nombre lo indica.
1.3.3<figure>y<figcaption>
Atributo Valor
align left,center,right yjustify
style Estilo
id nombre
class nombredelaclase
2.2Etiqueta<br>
Existelaposibilidaddepodercrearhiperenlacesa
ficherosconcontenidosespeciales
<ahref=documento.pdf>Enlaceafichero</a>
Cuandoelusuariopulseelenlace,elnavegadorbuscara
enlamaquinadelclienteelsoftwareparaabrirelarchivo.
3.4HiperenlacesdeImgenes
LaetiquetadeHTMLquepermiteincluirunaimagenenuna
pginaes<IMG> susatributosmssignificativosson:
src: identificaelnombredelficheroquecontienelaimagen.
Alt: brevedescripcindelaimagen.Siunnavegadornopermite
mostrarlaimagen,estetextoesloquesemuestraalusuarioensu
lugar.
Align:ubicacinespacialdelaimagen(top,middle,bottom,left,
right).
Height:altodelaimagenenpixeles.
Width: anchodelaimagenenpixeles.
Border: anchoenpixelesdelbordedelaimagen.
Hspace: espaciohorizontalenpixelesalrededordelaimagen.
Vspace: espacioverticalenpixelesalrededordelaimagen.
Lasimgenessepuedenutilizarparacrearhiperenlaces
grficosaotrosdocumentos.Todoloquesenecesitaeshacer
quelasetiquetas<IMG> aparezcaentrelasetiquetas<A> y
</A>
<ahref ="../pagina2.html"><img alt="imagen1"src ="../iconoconf.png"/></a>
4.Listas
HTMLofrecelaposibilidaddeordenarlainformacinde
laspaginasutilizandolistas.Podemosdefinirdistintos
tiposdelistas:ordenadas,noordenadas,dedefiniciones
(glosario),mensydirectorios.
4.1ListasOrdenadas
Laformahabitualdedefinirunalistaordenadaes:
<OLatributos>
<LIatributos>ElementodelaLista</LI>
<LIatributos>ElementodelaLista</LI>
</OL>
Lasetiquetas<OL>y</OL>marcanelcomienzoyelfin
deunalistaordenada.Parainsertarunelementoenla
listaseutilizalaetiqueta<LI>y</LI>(opcionalelcierre)
Ejemplo(L_ListaOrdenada1.html)
Ejemplo(L_ListaOrdenada3.html)
4.2ListasNoOrdenadas
Laformahabitualdedefinirunalistanoordenadaes:
<ULatributos>
<LIatributos>ElementodelaLista</LI>
<LIatributos>ElementodelaLista</LI>
</UL>
Lasetiquetas<UL>y</UL>marcanelcomienzoyelfin
deunalistanoordenada.Parainsertarunelementoenla
listaseutilizalaetiqueta<LI>y</LI>(opcionalelcierre)
Ejemplo
(L_ListaNoOrdenada1.html)
Ejemplo
(L_ListaNoOrdenada2.html)
5.Tablas
Unatablaestaformadaporceldasorganizadasenfilasy
columnas.Enunaceldasepuedeincluircualquieradelos
elementosvistosanteriormente.
5.1TablaBsica
Laformadeincluirunatablaenunapaginaes:
<TABLEatributos>
<CAPTIONatributos>TitulodelaTabla</CAPTION>
<TRatributos>
<th atributos>textodelaceldadeencabezado</th>
<th atributos>textodelaceldadeencabezado</th>
</TR>
<TRatributos>
<td atributos>textodelaceldadelcuerpo</td>
<td atributos>textodelaceldadelcuerpo</td>
</TR>
</TABLE>
Losatributosmsimportantesdelaetiqueta<table>son:
Align: alineacinhorizontaldelatabla
Border: determinalaaparicindeunbordeenlatablaydecada
unadesusceldas.
Width: determinaelanchodelatabla
Rules: Permitedefinirpordndeaparecernlosbordesdela
tabla(none,groups,rows,cols,all)
Cellpadding: espacioentreceldasysucontenido.
Ejemplo(T_TablaSimple.html)
5.2FilasyColumnasAgrupadas
Lasfilassepuedenagruparporfilasdecabecera(<THEAD>),decuerpo
(<TBODY>)odepie(<TFOOT>)detabla.
Laformanormaldedefinirlaestructuradeunatablaconellaes:
<table>
<thead>
filasdelgrupodelacabecera
</thead>
<tbody>
filasdelgrupodelcuerpo
</tbody>
<tfoot>
filasdelgrupodelpiedelatabla
</tfoot>
</table>
6.Formulario
Lasultimasetiquetasrelacionadasconlosformulariosson
<FIELDSET>y<LEGEND>.Noaadennuevoselementosde
entrada,peropermitenundiseomasaparentedelaspginas.
<FIELDSET> esunaetiquetaqueagrupaelementosdeun
formulario,creandounacajaalrededordelosmismos.
<LEGEND>permitedarunttuloalacajaquedibuja
<FIELDSET>.Elttulopuedeubicarseenlapartesuperior
(top),inferior(bottom),alaizquierda(left)oaladerecha
(right)delacajausandoelatributoalign.
Ejemplo
(F_FormularioConGrupos.html)
7.FormulariosenHTML5
La web 2.0 est completamente enfocada en el usuario. Y
cuando el usuario es el centro de atencin, todo esta
relacionado con interfaces, en cmo hacerlas ms intuitivas,
ms naturales, ms practicas, y por supuesto ms atractivas.
Los formularios web son la interface ms importante de todas,
permiten a los usuarios insertar datos, tomar decisiones,
comunicar informacin y cambiar el comportamiento de una
aplicacin. Durante los ltimos aos, cdigos personalizados y
libreras fueron creados para procesar formularios en el
ordenador del usuario. HTML5 vuelve a estas funciones
estndar agregando nuevos atributos, elementos y una API
completa. Ahora la capacidad de procesamiento de
informacin insertada en formularios en tiempo real ha sido
incorporada en los navegadores y completamente
estandarizada.
7.1Cambiosenelelemento<form>
Los formularios en HTML no han cambiado mucho. La estructura
sigue siendo la misma, pero HTML5 ha agregado nuevos elementos,
tipos de campo y atributos para expandirlos tanto como sea
necesario y proveer as las funciones actualmente implementadas en
aplicaciones web. Existen nuevos atributos para el elemento <form>:
autocomplete: Puede tomar dos valores: on y off. El valor por
defecto es on. Cuando es configurado como off los elementos
<INPUT> pertenecientes a ese formulario tendrn la funcin de auto
completar desactivada, sin mostrar entradas previas como posibles
valores. Puede ser implementado en el elemento <form> o en
cualquier elemento <input> independientemente.
novalite: Una de las caractersticas de formularios en HTML5 es la
capacidad propia de validacin. Los formularios son
automticamente validados. Para evitar este comportamiento,
podemos usar el atributo novalite. Para lograr lo mismo para
elementos <input> especficos, existe otro atributo llamado
formanovalite.
7.2Nuevosatributosenel
Elemento<input>
Eltiposearch (bsqueda)nocontrolalaentrada,essolo
unaindicacinparalosnavegadores.Aldetectareste
tiposdecampoalgunosnavegadorescambiarneldiseo
delelementoparaofreceralusuariounindiciodesu
propsito.EsincompatibleconFirefox,Opera.
<inputtype="search"name="busquedaid="busqueda">
7.2.3Tipourl
Estetipodecampotrabajaexactamenteigualqueeltipo
emailperoesespecificoparadireccionesweb.Est
destinadoarecibirsoloURLs absolutasyretornarun
errorsielvaloresinvalido.Laurl debeempezarconel
protocolohttp://
<inputtype="url"name="miurlid="miurl">
EsincompatibleconSafari,enOperaseautocompleta.
7.2.4Tipotel
Similaraltipodecampoanterior,steesespecifico
paraseleccionarmeses.Normalmenteelvaloresperado
tienelasintaxisaomes.
<inputtype="month"name="mes"id="mes">
Compatible solo con Safari, Maxthon y Opera
7.2.10Tipotime,datetime,
datetimelocal
Eltipodecampotime essimilaradate,perosolopara
lahora.Tomaelformatodehorasyminutos,perosu
comportamientodependedecadanavegadoreneste
momento.Normalmenteelvaloresperadotienela
sintaxishora:minutos:segundos,perotambinpuedeser
hora:minutos.
<inputtype="time"name="hora"id="hora">
IncompatibleconFireFox,IE10
El tipo de campo datetime es para ingresar fecha y hora
completa, incluyendo la zona horaria.
<input type="datetime" name="fechahora" id="fechahora">
Incompatible con Firefox, IE, Chrome.
Extraordinariamente compatible con Opera.
El tipo de campo datetimelocal es como el tipo
datetime sin la zona horaria.
<inputtype="datetimelocal"name="fechahoralocal"
id="fechahoralocal">
Incompatible con Firefox, IE, Chrome.
7.2.11Tipocolor
Estetipodecampoesutilizadoparasubirarchivosal
servidor;eltipodearchivosesindiferente.
<inputtype="file"name="miarchivo"id="miarchivo">
Muycompatibleenlosnavegadores
7.2.13Nuevosatributospara
<INPUT>
placeholder: Especialmente en tipos de campo search, pero
tambin en entradas de texto normales, el atributo
placeholder representa una sugerencia corta, una palabra o
frace provista para ayudar al usuario a ingresar la informacin
correcta. El valor de este atributo es presentado en pantalla
por los navegadores dentro del campo, como una marca de
agua que desaparece cuando el elemento es enfocado.
required: Este atributo no dejar que el formulario sea enviado
se el campo se encuentra vaco.
multiple: ste atributo booleano puede ser usado en algunos
tipos de campo (por ejemplo, email o tel) para permitir el
ingreso de entradas mltiples. Los valores insertados deben
estar separados por coma para ser vlidos
autofocus: El atributo enfocar la pagina web sobre el
elemento seleccionado pero considerando la situacin
acta. No mover el foco cuando ya haya sido establecido
por el usuario sobre otro elemento.
pattern: Nos permite crear nuestro propio tipo de campo
para controlar esta clase de valores no ordinarios. Puede
incluso incuir title para personalizar mensajes de error.
<input pattern=[o9]{5} name=codigopostal id =codigopostal
title=inserte 5 nmeros de su cdigo postal>
form: Es una adicin til que nos permite declarar
elementos para un formulario fuera del mbito de las
etiquetas <form>. Hasta ahora, para construir un
formulario tenamos que escribir las etiquetas <form> de
apertura y cierre y luego declarar cada elemento del
formulario en ellas. En HTML5 podemos insertar los
elementos en cualquier parte del cdigo y luego hacer
referencia al formulario que pertenece usando su nombre
y el atributo form.
7.2.14Elelemento<datalist>
Es un elemento especfico de formularios usado para construir una
lista de tems que luego, con la ayuda del atributo list, ser usada
como sugerencia en un campo del formulario.
<!Lista de datos>
<datalist id ="informacion">
<option value="123123123" label="Telefono 1">
<option value="456564546" label="Telefono 2">
</datalist><br/>
<input type="submit" value="Enviar">
Este elemento utiliza el elemento <option> en su interior para crear
la lista de datos a sugerir. Con la lista ya declarada, lo nico que resta
es referenciarla desde un elemento <input> usando el atributo list.
<input type="tel" name="telefono"id="telefono" placeholder="Diez digitos"
list="informacion">
8.AudioyVideoenHTML5
Instalardirecx paraqueseejecuteenIE
8.2Atributos
El atributo controls es uno de varios atributos disponibles
para este elemento. ste, en particular, muestra
controles de video provistos por el navegador por
defecto. Cuando el atributo esta presente, cada
navegador activar su propia interface, permitiendo al
usuario comenzar a reproducir el video, pausarlo o saltar
hacia un cuadro especifico, entre otras funciones.
autoplay: Cuando este atributo est presente, el
navegador comenzar a reproducir el video
automticamente tan pronto como pueda.
loop: Si este atributo es especificado, el navegador
comenzar a reproducir el video nuevamente cuando
llega al final.
poster: Este atributo es utilizado para proveer una
imagen que ser mostrada mientras esperamos que el
video comience a ser reproducido.
8.3Programacindelreproductor
deVideo
reproducir.addEventListener('click',presionar,false);
barra.addEventListener('click',mover,false);
}
El cdigo anterior, es la primera funcin del archivo
reproductor.js. La funcin fue llamada iniciar debido a
que ser la funcin que iniciar la ejecucin de la
aplicacin tan pronto como el documento HTML sea
completamente cargado.
Debido a que esta es la primera funcin a ser ejecutada,
necesitamos definir unas variables globales para
configurar nuestro reproductor. Usando el selector
getElementById creamos una referencia a cada uno de
los elementos del reproductor para poder acceder a ellos
en el resto del cdigo ms adelante. Tambin se declar
la variable mximo para conocer siempre el mximo tao
posible para la barra de progreso (600 pixeles).
Hay dos acciones a las que tenemos que prestar atencin
desde el cdigo: cuando el usuario hace clic sobre el
botn Reproducir y cuando hace clic sobre la barra de
progreso para avanzar o retroceder el video. Dos
escuchas para el evento click fueron agregadas con el
propsito de controlar estas situaciones.
8.3.4Losmtodos
Lafuncinpresionar() eslasegundafuncindelarchivo
reproductor.js.Estafuncinejecutardeacuerdoala
situacinactualdosmtodosespecficosdeestaAPI:
play () ypaused ()
Funcinpresiona()
function presionar(){
if(!medio.paused &&!medio.ended){
medio.pause();
reproducir.innerHTML='Reproducir';
windows.clearInterval(bucle);
}
else{
medio.play();
reproducir.innerHTML='Pausa';
bucle=setInterval(estado,1000);
}
}
Losmtodosplay ()ypause() sonpartedeunalistade
mtodosincorporadosporHTML5paraprocesamiento
demedios.Lossiguientessonlosmsrelevantes:
play (): Este mtodo comienza a reproducir el medio desde el
inicio, a menos que el medio haya sido pausado previamente.
pause (): Este mtodo pausa la reproduccin.
load (): Este mtodo carga el archivo del medio. Es til en
aplicaciones dinmicas para cargar el medio anticipadamente.
canPlayType(formato): Con este mtodo podemos saber si el
formato del archivo es soportado por el navegador o no.
8.3.5Laspropiedades
function mover(e){
if(!medio.paused &&!medio.ended){
var ratonX=e.pageXbarra.offsetLeft;
var nuevoTiempo=ratonX*medio.duration/maximo;
medio.currentTime=nuevoTiempo;
progreso.style.width=ratonX+'px';
}
}
window.addEventListener('load',iniciar,false);
8.3.7Formatosdevideo
Por el momento no existe un estndar para formatos de video
y audio en la web. Existen varios contenedores y diferentes
codificadores disponibles, pero ninguno fue totalmente
adoptado y no hay consenso alguno de parte de los fabricantes
de navegadores para lograr un estndar en el futuro cercano.
Los contenedores ms comunes son OGG, MP4, FLV y el nuevo
propuesto por Google, WEBM. Normalmente estos
contenedores contienen video codificado con los codificadores
Theodora, H.264, VP6 o VP8, respectivamente. Esta es la lista
de los ms usados:
OGG codificador de videoTheodora y audio Vorbis.
MP4 codificador de video H.264 y audio ACC.
FLV codificardor de video VP6 y audio MP3. Tambin soporta H.264 y
AAC.
WEBM codificador de video VP8 y audio Vorbis
8.4Etiqueta<audio>