Introduccion Al Desarrollo Web

INTRODUCCION AL DESARROLLO WEB, HTML Y CSS
HTML es un lenguaje de etiquetado de hipertexto, utilizado para la estructura y

contenido de una pagina web. Contiene su propio vocabulario(conjunto de expresiones
o palabras <p></p>, <head></head>, etc) y su gramatica, que son las reglas que nos
indican como utilizar esas expresiones para formar textos complejos.
Esta tecnologia funcionara en conjunto con URL, que es un localizador uniforme de
recursos, que nos redirige a la pagina que contiene la informacion de un enlace
mencionado.
Tambien funcionara en conjunto con HTTP, que es el protocolo de transferencia de
HiperTexto, es una serie de pasos que se ejecutaran entre clientes y/o servidores
para el intercambio de documentos web a traves de una red.
Para la presentacion visual de las paginas web utilizaremos otra tecnologia
denominada CSS, que es hojas de estilos en "cascada", una secuencia de sentencias
que permiten dar la identidad a una pagina o aplicacion web.
En la version de HTML 5 existen alrededor de 100 etiquetas y contando.

Una pagina web no es mas que un conjunto de elementos escritos en un orden
concreto.
La estructura basica de un elemento es la siguiente:
<p class="importante">Esto es un parrafo</p>

\_________________ _______________________/
\/
ELEMENTO
Donde:
<p...> -->Es la etiqueta de inicio

class -->Es el atributo(no necesariamente todas las etiquetas contendran un
atributo o valor)
= -->Es asignacion
"importante" -->Es el valor
Esto es un parrafo -->Es el contenido(Puede ser simplemente texto u otras etiquetas
HTML, dependiendo de la complejidad de la pagina)
</p> -->Es la etiqueta de cierre
Los elementos se pueden anidar(crear jerarquias) segun algunas reglas.
Descripcion de algunas etiquetas de HTML:
<html></html> --> Etiqueta principal(raiz). Todo el contenido de la pagina web debe

estar incluida dentro de esta etiqueta. Solo puede existir una dentro de un
documento HTML.
<head></head> --> Esta seccion es la cabecera de una pagina web y no se muestra en
la visualizacion de la pagina al ejecutarlo en el navegador. Se utiliza para
introducir los metadatos, informacion sobre la pagina o instrucciones sobre como
procesar la pagina web.
<title></title> --> Se escribe anidada en la cabecera, es obligatoria y solo debe
haber una, se emplea para definir el titulo de la web, mostrado en la pestaña del
navegador.
<body></body> --> Define la segunda parte de una pagina web, el cuerpo, lo escrito
aqui aparece representado en el navegador web.
<h1>...<h6> --> Se usan para definir los encabezados o titulos en la pagina,
existen 6 niveles de importancia, en orden desde el 1 al 6, siendo el mayor menos
importante.
<p></p> --> Se introduce un parrafo de texto simple.
<strong></strong> --> Resalta el texto importante(efecto negrita).
<em></em> --> Enfatiza el texto.
BUENAS PRACTICAS EN EL DESARROLLO WEB:
Si bien la flexibilidad de nuevas versiones de los lenguajes permiten libertades y

obviar algunas restricciones es una buena practica seguir las siguientes normas ya
que no siempre trabajaremos con las versiones mas modernas de los lenguajes.
-Es recomendable cerrar siempre las etiquetas que se abren.

-Los documentos tienen que estar bien formados, las etiquetas anidadas deben
respetar su orden.
-Las etiquetas deben estar escritas en minusculas.
-Los valores de los atributos deben estar entre comillas dobles o simples.
-Para el nombre de los archivos es reocmendable el alfabeto en mayuscula o
minuscula y numeros del 1 al 9.
Existen distintos tipos de listas en el lenguaje HTML 4 y 5.

Son principalmente 3:
-Lista no ordenada (Unordered List o <ul></ul>): El orden de los elementos no es

importante.
.Primer elemento
.Segundo elemento
.Tercer elemento
-Lista ordenada (Ordered List u <ol></ol>): El orden de los elementos es

importante.
1.Primer elemento
2.Segundo elemento
3.Tercer elemento
*Para los dos anteriores elementos de la lista utilizaremos la etiqueta <li></li>

para listar los items, es decir se escribira asi:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
*Tambien existen atributos con los que podemos modificar el ordenamiento de las
listas ordenadas <ol>:
En HTML 4 y 5:
-start: permite indicar el elemento que iniciara la lista.
-type(valores para el atributo: "A", "I", "a"): permite indicar el tipo de
enumeracion; letras, numeros romanos o latinos.
En HTML 5:
-reversed(unico valor para el atributo: "reversed"): permite indicar la numeracion
en orden descendente.
-Lista de descripcion (Description List o <dl></dl>): Se emplea para definir una

lista de terminos con cero o mas descripciones por cada termino.
Cada termino de la lista se define con <dt></dt>
Cada descripcion de un termino se define con <dd></dd>
Los elementos no se nombran con simbolos o numeros, sino con un aumento en la
sangria. El numero de descripciones puede variar desde 0 a varios en un solo
documento HTML y seccion de codigo.
Normalmente se utiliza para crear diccionarios o conceptos breves a un termino.
Primer elemento
Descripcion del primer elemento
Segundo elemento
Descripcion del segundo elemento
Tercer elemento
Descripcion del tercer elemento
*Para este ultimo tipo de lista se escribira asi:
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
</dl>
Listas anidadas:
No son mas que listas dentro de otras listas, pudiendose combinar de cualquier
forma, llamandose a la lista anidada "sublista".
Primer ejemplo:
<ul>
<li>Lista de primer nivel:
<ul>
<li>Lista de segundo nivel:
<ul>
<li>Lista de tercer nivel, la ultima.
</li>
</ul>
</li>
</ul>
</li>
</ul>
Segundo ejemplo:
<ul>
<li>Numeros cardinales:
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>
</li>
<li>Numeros ordinales:
<ol>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>
</li>
</ul>
HIPERTEXTO:
Este componente importante para la web permite introducir informacion en los
documentos mediante enlaces o nodos que proporcionan una lectura no secuencial de
la informacion al desplegar nuevas paginas cuando damos seguimiento a un enlace que
se encuentran en diversos nodos de la internet.
TIPOS DE ENLACES:
-Enlaces intradocumentales
Puede dar referencia a un punto dentro del mismo documento HTML o dentro del mismo
ordenador.
<a href="#nombre>...</a>
Para fijar un lugar dentro del documento donde queremos dirigir algun evento se
utiliza id en cualquier etiqueta.
<h1 id="nombre">...</h1>
<p id="nombre">...</p>
Se puede definir varios enlaces a un mismo destino
No se puede crear varios destinos con el mismo nombre
-Enlaces extradocumentales
Da referencia a un punto fuera del documento hacia un documento HTML que reside en
otro ordenador que puede estar o no dentro del mismo servidor.
Para dirigirnos a un documento o archivo fuera del documento en el que trabajamos
debemos referir el URL en el valor del atributo href.
<a href="pagina.html">...</a>
Composicion de un URL:
<servicio>://<usuario>:<contraseña>@<host>:<puerto>/<ruta>/<recurso>
Ejemplos de URL:
Web: http://idesweb.es/temario
FTP: ftp://ftp.ua/pub/software/listado.txt
Email: mailto:sergio.lujan@ua.es
Para referenciar a un punto dentro de otro documento escribiremos:

<a href="pagina.html#nombre">...</a>
Para fijar un lugar dentro del documento donde queremos dirigir algun evento se
utiliza id o name en cualquier etiqueta.
<a name="nombre">...</a>
<h1 id="nombre">...</h1>
<p id="nombre">...</p>
Representacion de un enlace:
<a>enlace</a>
Normalmente suele utilizarse enlaces a texto o imagenes.
CONSEJOS PARA REFERENCIAR O CREAR ENLACES:
-Tener cuidado con mayusculas o minusculas, de preferencia usar solo minusculas.

-Evitar caracteres extraños(solo alfabeto, numeros,- o _)
-Evitar espacios en blanco en el nombre de los directorios o archivos.
-Evitar colocar rutas fisicas que yacen en nuestro ordenador, ya que al publicarlas
los usuarios no tendran acceso a nada, el enlace no funciona(evitar "file:///c:\
miweb\grupos.html")
DETALLES SOBRE EL EDITOR DE CODIGO:
-El editor no es la clave para buenas paginas web, es una herramienta.

-Es recomendable utilizar un editor no tan sofisticado, incluso el bloc de notas es
suficiente, sin embargo debemos estar al tanto de algunos problemas que puedan
presentarse.
MALAS PRACTICAS O ERRORES EN EL DESARROLLO WEB:
1. Saltos de linea.
La etiqueta de salto de linea o <br></br> para HTML5 y <br><br /> para XHTML es
recomendable usarlo solo en un salto de linea dentro de un mismo contenido en un
parrafo o etiqueta de texto.
Ejemplo:
<p>El esplendoroso caballo volador<br />
vuela cual pluma de aguila<br />
cae como sutil corsel<br />
llevando de jinetes cangrejos cimarrones</p>
NO SE RECOMIENDA PARA SEPARAR DOS ETIQUETAS:

<p>34 cementerios<br />
<a href="">Indique cementerio</a></p>
SINO:
<p>34 cementerios</p>
<p><a>Indique cementerio</a></p>
TAMPOCO DEBEMOS INTENTAR CREAR LISTAS ARTIFICIALES:

<p>Instrucciones<br />
A.Instruccion 1<br />
B.Instruccion 2<br />
C.Instruccion 3</p>
2. Espacios en blanco.
Este error es parecido al anterior, se define porque algunas veces intentamos
introducir espacios en blanco sin ser necesarios.
Para la maquina estas lineas seran lo mismo, una linea de texto con un unico
espacio separador.
<p>Espacio blanco</p>
&nbps; (NON BREAK SPACE)
3. Referencias de caracteres.
En HTML se suele utilizar algunos codigos para representar ciertos caracteres que
normalmente no se podria representar facilmente con el teclado, para señalar que
estamos ante un caracter especial debemos colocar:
&codigo;
Entonces si antes queriamos escribir una palabra con tilde debiamos hacerlo asi:
<p>Este código HTML está desfasado</p>
Lo que hacemos aqui es que para colocar tilde a una vocal en una palabra debiamos
escribir
el simbolo &seguido de la vocal o, seguido de acute y finalmente punto y coma; para
expresar un tilde en dicha vocal, si bien la sintaxis no es erronea, existen
mejores formas de invocar caracteres especiales sin realizar un codigo complejo.
Utilizaremos el juego de caracteres adecuado como ISO-8859-1 o UTF-8.
Publicacion de pagina web:

Primero tendremos que generar una URL, para terminaciones generales de nivel 1 como
.com, .net lo haremos buscando un nombre de dominio para nuestra pagina web. Iremos
a un registrador autorizado, este otorgara la configuracion para redireccionar a
nuestra URLl, otorgar direccion IP del servidor al que encontrara mediante DNS y el
servidor DNS usada por este, hara unas pruebas para reconocimiento de otros
ordenadores en internet y finalmente se contactara con la ICANN para constatar el
registro del nuevo dominio.
Luego debemos publicar la web en internet y para ello buscaremos un servicio de

alojamiento o hosting, existen gratuitos y de pago, generalmente se recomienda usar
uno gratuito para pruebas y de pago para el uso del publico en general.
Poco a poco se ira propagando el nuevo registro y la pagina ya sera accesible

desde cualquier parte del mundo.
Para terminaciones de nivel 2 como .es, .pe, .ec debemos acudir a una instancia del
gobierno que se encarga de esta labor.
En Whois.com podemos buscar los dominios disponibles para nuestra web, ademas
podemos contratar un servicio de dominio privado o publico, es preferible el
privado para evitar que nuestros datos sean privados y no exponernos al spam.
ESQUEMA DE PUBLICACION DE SITIO

WEB
|
|
DOMINIO
|
|
PUBLICACION
/ \
/ \
/ \
SERVIDOR PROPIO ALOJAMIENTO
| |
recomendado recomendado
| |
*probar *usuarios finales
*aprender |
| tipos
opcion interesante \
| \
*web grande y complejo \
*mucho almacenamiento |
y transferencia *gratuito-->util para:
*configuracion parti | -paginas
cular | personales
*presupuesto suficien | -pruebas
te | -no queremos
*conocimientos necesa | gastar
dinero
rios y seguridad | -prestaciones
| limitadas
| -tienen publicidad
|
*pago
\
\
\
|
tipos
|
.compartido-->tiene:
-varias web en un
servidor
-buena relacion
calidad/precio
.servidor virtual privado--
>tiene:
-mayor control
sobre el servicio web
-aislamiento de errores
.servidor dedicado-->tiene:
-mejores
prestaciones
-control total
.housing-->propiedades:
-plataforma
tecnologica propia(la
empresa solo se hace cargo del
cuidado fisico del ordenador,
otorga
alimentacion electrica
ininterrumpida, mantiene una
temperatura optima
y proporciona
conexion a
internet)
.cloud hossting--
>propiedades:
-mayor seguridad,
por no tener un unico
servidor alojando
una web
-flexible
*Segun el tipo de cliente es recomendable iniciar en una opcion mas basica que se
adecue a los estandares inciales de la empresa para posteriormente migrar a
servicios mas complejos segun la empresa incremente su actividad e informacion.
CRITERIOS PARA LA ELECCION DE UN PLAN DE HOSTING:
-Calidad
.Sera dificil evaluar sin antes probar el servicio
.Cumple con lo contratado
.Resuelva nuestros problemas
.Disponible y fiable en conexiones y alimentacion
.Indicadores son, calidad de pagina web de la empresa
profesionalidad, opiniones, tiempo, nivel de soporte,
atencion al cliente y resolucion, ver tipo de contactos
y tiempo de respuesta, esto es dificil de conocer sino
por el contrato del servicio
-Sistema operativo
.Linux
Servidor web Apache
.Windows
Internet Information Server(IIS)
.¿Cual elegir?
Dependera de que lenguaje de programacion usamos y los servicios adicionales
a utilizar
.Emplearemos Linux si utilizamos:
-PHP,Python,Perl,JSP
-Base de datos: MySQL,PostgreSQL
.Emplearemos Windows si utilizamos:
-ASP,ASP.NET
-Base de datos: Access, SQL Server
.Normalmente contratar un alojamiento con Linux es mas barato por la licencia
del sistema operativo y las herramientas de servidores Linux, lo que abarata el
costo de administracion, puede existir un ahorro de hasta 30%
-Almacenamiento
.Espacio web o espacio en disco(Disk space,disk storage o hosting space)
.Unidad de medida: megabyte o gigabyte
.Suele ser un cebo para atraer clientes
.Debemos evaluar bien la oferta, suelen incluir el espacio otorgado a base de
datos, buzones de correo y no solo para el sitio web, archivos de registro(logs)
¿Que almacenamiento requerimos?
Es mejor ser conservador, generalmente al espacio requerido le aumentaremos
de 20 a 30% por si nos quedamos cortos o futuras empleaciones a corto plazo, si
tenemos ya desarrollado sitio web sabremos el espacio que requerimos
Formula de estimacion de tamaño de pagina web:
N° de paginas * Tamaño medio de la pagina
Donde:
Tamaño medio de la pagina(Peso)=Sumatoria de peso de archivos componentes
*Existen algunas tecnicas para acceder al peso del total de archivos que
componen la pagina como web tool bar o descargar la pagina web y mostrar
propiedades en el directorio de destino en nuestra PC). Sin embargo el calcular
esto puede resultar burdo porque existen archivos que se comparten entre diversas
paginas.
Ejemplo de uso:
Si N° de paginas = 100
Tamaño medio por pagina = 250kb
Entonces:
100 * 250kb = 25000kb
25000kb --> 24,4mb
-Limites mensuales para transferencia de datos(trafico)

.Contabiliza los datos transmitidos en un mes, se mide por GB/mes
.Existe penalizacion si superamos lo establecido en el contrato
.Es dificil de calcular el volumen de transferencia debido a que escapa de
nuestras manos, dependera del impacto que
tendra nuestra web en los usuarios, el numero de visitas.
¿Que incluye?
En situacioens normales un sitio web consume mas trafico que el correo
electronico y las transferencias FTP por lo que es suficiente evaluar el
trafico en el sitio web
.Las transferencias ilimitadas son imposibles debido a que nos limitamos a un
limite fisico(cableados y dispositivos
de red) que se comparten con cientos o miles de websites
¿Que volumen de transferencia necesio?
Formula de calculo de trafico:
N° de visitantes diarios * N° de paginas por visitante * Tamaño medio

de la pagina * 30
Ejemplo:
N° visitantes diarios = 100
N° paginas visitadas = 5
Tamaño medio de pagina = 250Kb
En un dia: VolumenTrafico = 125000Kb = 122,1Mb

En un mes: 122,1Mb * 30 = 3663Mb = 3,6GB
-Velocidad maxima de transferencia de datos(bandwidth)

.Ancho de banda es la cantidad de datos que se pueden enviar a traves de un
canal de comunicacion por unidad de tiempo
Unidad: kbps o Mbps(kilobits * s o megabits * s)
.Normalmente en planes economicos no se suele indicar
.Ancho de banda ilimitado es imposible
.Este indicador muestra el tiempo que necesita un visitante para acceder a
una pagina web, influira en la experiencia del usuario
Supongamos:
Tamaño medio de pagina = 250Kb o 2000kbits
Velocidad de transferencia = 512kbps
Si el usuario se conecta solo dispone de todo el ancho de banda para acceder

a la pagina web
Tiempo que el usuario tarda en acceder = Tamaño medio de pagina /
velocidad de transferencia
Tiempo = 2000kbits / 512kbps
Tiempo = 3,9 s
Si ahora los usuarios son 5, dividimos el ancho de banda entre cada

visitante:
Obtenemos:
512kbps / 5 = 102.4kbps
Entonces:
Nuevo tiempo = 2000kbits / 102.4kbps
Nuevo tiempo = 19.5 s
El calculo que realizaremos sera en base al numero de visitantes maximo que

obtenemos en un dia de 24 hrs. ya que el valor medio de visitantes no es un valor
apropiado
-Lenguaje de programacion que permite emplear

.Si el website es estatico esto no importara mucho porque no la usaremos
.Si deseamos publicar una aplicacion web si es necesario averiguarlo
.Elegir uno o mas lenguajes depende de los gustos y conocimientos del equipo
de desarrollo debido a la similitud y potencia ofrecida por los diversos
lenguajes hoy en dia.
-El uso y la cantidad de bases de datos

.Es el DataBaseManagementSystem, si el sitio web es estatico no seria de
preocuparse
-Dominios/subdominios
.Nombre mediante el cual el usuario encontrara nuestra web
.Dependera de las estrategias empresariales
.Por otro lado el subdominio permiten crear subdivisiones del dominio
principal
Ejemplo:
america.midominio.pe
asia.midominio.pe
africa.midominio.pe
europa.midominio.pe
.Utilizados para crear sitios web adicionales en funcion de la situacion
geografica
¿Cuantos dominios y subdominios necesitamos?
Se requiere si queremos organizar el sitio web en diferentes secciones, por
la situacion geografica o por el contenido
-Otros(plantillas de web, correos que se pueden crear)

.Numero de cuentas de correo electronico(FTP, SSH)
.Scripts y librerias preinstaladas(Curl,GD,Image Magick,...)
.Aplicaciones preinstaladas
Foro:vBulletin,phpBB
Blog:Wordpress
Gestor de contenidos:Drupal,Joomla
Comercio electronico:osCommerce,AgoraCart
.Panel de control(interfaz para manejar el plan de alojamiento)
.Ofrece servicio de metricas y estadisticas y archivos de registro(logs)
.Copias de seguridad
.Ofrece Cron o servicios que permiten programar procesos en segundo plano
para ejecutar de forma periodica
.Conexiones seguras SSL o HTTPS
.Servicios de streaming o videos
-Precio
.Encontrar un equilibrio comparando las ofertas segun nuestras necesidades
.Evaluar el periodo de contratacion, generalmente hay descuentos por periodos
largos
.Evaluar el sistema operativo a utilizar, es recomendable Linux para abaratar
costos
Consejos finales para eleccion de dominio y hosting:

*El dominio y el hosting se pueden contratar a diferentes empresas, no existe
obligacion para contratar ambos en una sola
*Fijar un tope al precio a pagar
*Buscar el que ofrezca mejores condiciones
*Probar por un periodo corto
*Si tenemos varios websites es recomendable usar planes de alojamiento en distintas
empresas
COMO PUBLICAR UN SITIO WEB EN INTERNET:
-Se compone de diversos archivos como imagenes, HTML, CSS, etc.

-Se desarrolla en un ordenador, o servidor de desarrollo, este no esta
permanentemenete conectado a internet y cuando este se encuentra apagado no
permitira acceder a dichos archivos
-Ademas no esta preparado para dar servicio a cientos de usuarios a la vez
-Sin embargo el servidor de produccion si esta diseñado y programado para atender
solicitudes de cientos de usuarios
-Para copiar los archivos desde el servidor de desarrollo al servidor de produccion
se utilizara el FTP(File Transfer Protocol). Debemos usar un programa especial
llamado cliente de FTP, normalmente la mayoria de sistemas operativos incluyen este
servicio, en Windows podemos hacer el uso de la linea de comandos para esto sin
embargo existen otros programas mas sencillos.
-Podemos usar un programa de cliente FTP gratuito como FileZilla y transferir los
archivos desde el servidor de desarrollo al de produccion introduciendo la URL, la
contraseña que nos otorga el hosting y el puerto que generalmente es 21 o 22. Luego
veremos en la pantalla las secciones en donde fluye y podemos copiar nuestros
archivos entre un servidor y otro, nos aseguraremos de introducir bien el usuario
para que no halla errores de busqueda y transferencia de datos, ubicamos la carpeta
en el servidor de destino llamada public_html para subir nuestros archivos,
transferimos y listo finalmente podremos ver en la pestaña del servidor de
desarrollo los archivos de nuestro sitio web
-Normalmente el servidor de desarrollo abrira el archivo index.html por defecto
para la pagina principal de nuestra web, sin embargo si no tenemos un archivo
index.html sino con otro nombre como principal1.html el servidor nos mostrar una
lista con los archivos disponibles y seleccionaremos el que querramos abrir primero
-Tambien podemos usar un cliente FTP online si no queremos o podemos instalar algun
programa en nuestro PC
COMPUTACION EN LA NUBE:
La web es un sistema de intercambio de documentos HTML mediante protocolo HTTP.

Incipientemente las paginas web eran estaticas sin interaccion con el usuario mas
que redirigirlo a otra pagina para mostrar informacion, hoy en dia gracias a la
tecnologia AJAX, DHTML, DOM y JS podemos interactuar en el intercambio de
informacion con las paginas web. Sin embargo existe una tecnologia mas nueva HTML5
que gracias a esta podremos hacer uso de Cloud Computing(un paradigma que ofrece
servicios de computacion a traves de internet, aqui todo lo que ofrece un sistema
informatico esta disponible para que los usuarios accedan a ellos de forma remota y
los datos se envian en forma remota a traves de solicitud de navegadores o
aplicaciones)
Ventajas:
-Acceso remoto y en todo momento
-Actualizaciones automaticamente y despreocupacion por espacio en disco
-Versatiidad de uso desde S.O. variados(Linux, Windows o Mac) podemos acceder
a ellos mediante diversos navegadores
-Versatilidad de dispositivos(tablet, laptop, movil, etc)
-Existencia de datos independientemente del dispositivo
-Reduccion de riesgo por instalacion de software o amenazas
Desventahas:
-Brechas de seguridad de fuga de datos cuando falla el sistema
-Brechas de seguridad por carencia de seguridad en la nube
-Sin internet no se puede conectar a ningun servidor ni disponer de nuestros
datos
HTML FORMULARIOS:
¿Que es un formulario HTML?
Son:
Seccion de un documento HTML que contiene:
-Contenido Normal
-Codigo
-Elemenos especiales o controles
-Rotulos
¿Para que se utilizan?

Permite que el usuario envie informacion al servidor como formularios de contacto,
de registro, de interaccion en redes sociales, etc.
Etiquetas HTML para formularios:

<form> --> Envio de datos, todos los elementos que deseemos enviar deben estar
entre estas 2 etiquetas
Sin representacion grafica
Atributos:
action --> unico requerido para esta etiqueta, espera uan cadena de texto que
especifique la URL o ruta a la accion de destino que procese los datos de la
peticion, puede ser una URL absoluta o relativa
method --> indica la forma de enviar informacion, acepta dos valores GET y
POST, utilizar por defecto el valor GET
Metodos de envio:
GET --> Datos visibles en la URL
Limitado en la transmision de datos
Favoritos
POST --> Datos no visibles en la URL

Sin limite en la transmision de datos
Podemos enviar archivos
accept-charset --> espera una lista de caracteres separados por comas,

normalmente usamos el estandar UTF-8, no es un atributo muy comun de
utilizar
enctype --> especifica el tipo de codificacion por defecto application/x-www-

form-urlencoded
se utilizara para subir ficheros mediante el formulario
multipart/form-data
convierte los espacios en signos de sumar pero los caracteres
especiales no son convertidos text/plain
<input> --> Etiqueta mas usada, con ella podemos modificar las entradas de los
formularios, entradas de tipo texto, contraseñas, etc. No tiene etiqueta de cierre
y debemos hacerlo manualmente por buenas practicas con <input.../>
*El tipo de input por defecto es "text"

Los input de tipo texto pueden usar atributos como
maxlenght --> con el valor "1,2,3...n" que determina el maximo numero de

caracteres, util para que los campos creados
en BD tengan coherencia con los campos ingresados en el campo input
size --> con un valor numerico entero, si colocamos un campo de valor 3 sera
ancho para mostrar 3 caracteres pero no 4
al pertenecer al campo del estilo debemos colocarlo en un archivo adecuado
para facilitar el mantenimiento
value -->colocaremos como valor el texto predeterminado que esperamos que
aparezca en el campo y estara de manera permanente hasta que el usuario coloque
sus datos ahi, ejemplo: "Buscar...", "Ingrese su nombre", "Ejemplo:..."
Tipo input "checkbox", se utilizan para ingresar casillas de verificacion

name --> como suelen organizarse en grupos de seleccion multiple es
importante que todas las casillas de verificacion del mismo grupo tenga el
mismo nombre, de manera que al recibirlas sepan que esos valores pertenecen al
mismo grupo
checked --> marca por defecto una casilla seleccionada
value --> es imprescindible para indicar al formulario que valor debe enviar
si la casilla esta activada, si no se declara el formulario enviara informacion
imposible de procesar
Tipo "radio", similar al checkbox pero en forma circular y solo puede

seleccionarse una sola opcion
name --> como suelen organizarse en grupos de seleccion multiple es
importante que todas las casillas de verificacion del mismo grupo tenga el
mismo nombre, de manera que al recibirlas sepan que esos valores pertenecen al
mismo grupo
checked --> marca por defecto una casilla seleccionada
value --> es imprescindible para indicar al formulario que valor debe enviar
si la casilla esta activada, si no se declara el formulario enviara informacion
imposible de procesar
Tipo "file" ofrecen la posibilidad al usuario de introducir archivos al envio

de formulario
Atributo accept permite seleccionar el tipo de archivo que el usuario enviar,
sin embargo puede que no funcione en todos lso navegadores y no funcionara
como filtro ya que se podra seleccionar "Todos los archivos" por defecto
<input type="file" accept="image/gif"/>
La etiqueta form debe tener esta estructura par el envio de archivos:
<form enctype="multipart/form-data>
Tipo "password" ofrecen campos de texto enmascarado, es similar al campo de

tipo texto pero no muestran el texto sino asteriscos ocultandolo
Tipo "hidden" sirven para enviar informacion que creemos util pero el usuario
no insertara de forma directa, podemos emplear un metodo en JS que contabilice
el tiempo que el usuario tomara para rellenar el formulario y lo introdujera
aqui antes de enviarlo
Atributos name y value --> son utiles solo estos puesto que no son visibles
para los usuarios
Tipo "button"
submit --> se dibujara un boton con el texto Enviar cuya accion sera enviar
el formulario al destino marcado en el atributo action de la etiqueta form
reset --> reinicia el formulario, dejando todos los campos vacios
value --> especifican el texto en el boton("Enviar", "Buscar",
"Seleccionar",etc)
*Para dotar de accion a estos botones es neceario trabajar con eventos JS,
intrusivos con atributos onclick o no intrusivos haciendo usos de librerias o
scripts no incrustados en HTML
onclick="javascript:function();"
<script src="myNonObstrusiveLibrary.js"/>
<script>function();</script>
Atributos:
name --> espera una cadena de texto que recibira el nombre del campo de texto
a ser enviado(Ejemplo: Email, Nombres, Edad,etc)
type --> uno de los atributos mas importantes ya que define en que se
convertira el control, por defecto es de tipo text, tambien hay checkbox, radio,
file, password, hidden, button, submit, image, reset
disabled --> inhabilita el campo para que no pueda ser utilizado, el valor
unico es "disabled"
readonly --> funciona de manera similar a disabled,su valor unico tambien es

"readonly" aplicado a un input de tipo "text" seria posible seleccionar el campo
y copiarlo
value --> ciertos campos necesitaran este atributo

*Consejos para el uso de formularios:
-Sin form no hay envio(se veran los campos pero no se enviaran los datos)
-Debemos especificar siempre el atributo type <input type="value"/>
-Separar contenidos de estilos(no usar size,cols,rows en HTML)
<select> --> Genera listas desplegables y listas de seleccion multiple
Atributos:
name --> es fundamental para el envio de los datos del formulario
multiple --> permite mostrar listas de seleccion multiple
Etiquetas para elementos de la lista:
option --> con el atributo "value" tomara el valor del elemento
value cuando se envie el formulario
<option value="valor">Texto mostrado al usuario<option/>
Ejemplo de lista desplegable:
<select>
<option value="HTML>
HTML
</option>
<option value="CSS>
CSS
</option>
</select>
Ejemplo con multiple:
<select multiple="multiple">
<option value="HTML>
HTML
</option>
<option value="CSS>
CSS
</option>
</select>
optgroup --> despliega un subgrupo de elementos desplegables

dentro de los elementos principales
Ejemplo de subgrupos de lista:
<select>
<optgroup label="HTML">
HTML
<option value="tables">Tablas</option>
<option value="forms">Formularios</option>
</optgroup>
<optgroup label="CSS">
CSS
<option value="colors">Colores</option>
</optgroup>
</select>
<textarea> --> facilita el ingreso de grupos de texto amplios sin la necesidad de

redundar con etiquetas input
Atributos:
name --> siempre importante
cols --> delimita el espacio para el texto por defecto en 20 caracteres
horizontal(modificable)
rows --> delimita el espacio en vertical por defecto a 2(modificable)
<label> --> no muestra nada en pantalla sin embargo es una etiqueta que mejora la
usabilidad y accesibilidad de los formularios, asocia un texto a un control de
forma que al pasar por el texto se activa el control asociado en la mayoria de los
navegadores, ademas relaciona el control con su proposito fundamental para usuarios
que usen alguna ayuda en la navegacion
Atributos:
for --> se utiliza este atributo con el identificador como valor para
asociarse con el control
Ejemplo:
<form>
<label for="html">HTML</label>
<input type="radio" name="tema" id="html"/>
<br/>
<label for="css>CSS</label>
<input type="radio name="tema" id="css"/>
</form>
*Aqui el valor del atributo for coincide con el atributo id del componente del
formulario con el que se busca asociar, al pulsar sobre el texto de las etiquetas
label se activara la casilla asociada
<fieldset> --> Agrupa elementos de un formulario que estan relacionados entre si,
por ejemplo podemos agrupar los datos personales de un usuario en un fieldset y los
datos bancarios en otro, dibuja un marco alrededor de los componentes encerrados
entre las etiquetas <fieldset></fieldset>
Etiquetas para fieldset:
legend --> Escribir un titulo a los componentes agrupados
Ejemplo:
<fieldset><legend>Perfil</legend>
Nombre: <input type="text"><br/>
Email: <input type="text><br/>
</fieldset>
<fieldset><legend>Cursos</legend>
<input type="checkbox">HTML
<input type="checkbox">CSS
</fieldset>
*Utilizar <textarea> en lugar de <input type="text"/> cuando la informacion a

ingresar sea extensa
*Utilizar <select> en lugar de <input type="radio"/> cuando le demos al usuario
opcion de elegir mas de 3 opciones al usuario
*Utilizar <label> para facilitar el trabajo a los usuarios, Tim Berners Lee aboga
por la universalidad y accesibilidad
JUEGO DE CARACTERES, INSERCION DE ELEMENTOS(TABLAS, IMAGENES) Y VALIDACION DE

CODIGO:
Juego de caracteres;
Es recomendado utilizar siempre el mismo juego de caracteres(que todos los archivos
de nuestro directorio que almacene nuestra pagina web, incluido los datos y base de
datos que lo componen) es preferible utilizar la codificacion UTF-8 sin BOM(Byte
Order Mark, define el carácter unicode que se utiliza para indicar el orden de los
bytes de un fichero de texto al principio del mismo), no presenta problemas para la
mayoria de idiomas europeos occidentales o el ISO-8859-1(Latin 1) y el ISO-8859-
15(Latin 9).
Para indicar el juego de caracteres a utilizar en la pagina debemos hacerlo entre
las etiquetas <meta></meta> que se coloca dentro de la etiqueta <header></header>,
dependiendo de la version de HTML,
En HTML4 usaremos:
<meta http-equiv="Content-Type" content="text/hmtl;charset=utf-8">
En XHTML:
<meta http-equiv="Content-Type" content="text/hmtl;charset=utf-8"></meta>
<meta http-equiv="Content-Type" content="text/hmtl;charset=utf-8">
En HTML5:
<meta charset="utf-8">
<meta charset="utf-8/>
Es recomendable almacenar los archivos en UTF-8, utilizaremos la opcion de
convertir un documento cuando ya tengamos el archivo lleno de codigo y codificar
cuando iniciemos un proyecto.
Tambien debemos atender que la codificacion fisica del editor coincida con el
codigo implementado en el documento HTML, ya que habra problemas mostrando en la
pagina web caracteres extraños cuando hayamos invocado algun caracter no existente
en algunos tipos de codificacion.
Creacion de tablas;
Una tabla en HTML es una forma de representar informacion de manera esquematizada,
ordenada y compacta.
La etiqueta <table></table> indica el inicio y cierre de tabla
Las etiquetas <tr></tr> significan "table row" y representan cada fila de la tabla
Las etiquetas <td></td> significan "table data cell" y se traduce como una celda de
datos en una tabla, estas son las etiquetas mas utilizadas para estructurar una
tabla. Sin embargo existen algunas otras menos utilizadas pero que pueden ser
utiles;
<th></th> "table header cell" Sustituye las etiquetas <td></td> para celdas de
cabecera, su uso se recomienda para las primeras y las ultimas filas y columnas de
la tabla, los navegadores resaltan el texto de estas celdas en negrita
<thead></thead>Agrupa una o mas filas de cabecera
<tbody></tbody>Agrupa filas del cuerpo, las que contienen la mayoria de los datos
<tfoot></tfoot>Agrupa las filas del pie de la tabla
La estructura y jerarquia del codigo de una tabla se veria asi:
<table>
<thead>
<tr>...</tr>
</thead>
<tbody>
<tr>...</tr><tr>...</tr><tr>...</tr>
</tbody>
<tfoot>
<tr>...</tr><tr>...</tr><tr>...</tr>
</tfoot>
</table>
La etiqueta <caption>Mi primera tabla</caption> añade un titulo sobre la tabla, la

ubicacion de esta etiqueta seria:
<table>
<caption>...</caption>
<thead>...</thead>
.
.
.
</table>
En HTML es posible combinar celdas, para ello emplearemos los siguientes atributos
de las celdas:
<td colspan="x">...</td> <-- Donde el valor tomado por "x" sera el numero de
columnas que tomara la celda
<td rowspan="x">...</td> <-- Donde el valor tomado por "x" sera el numero de filas
que tomara la celda
Ejemplo de uso:
<table>
<caption>Ingresos</caption>
<thead>
<tr><td colspan="2">2012</td></tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Enero</td>
<td>100$</td>
</tr>
<tr>
<td>50$</td>
</tr>
</tbody>
<tfoot>
<tr>...</tr><tr>...</tr><tr>...</tr>
</tfoot>
</table>
Para evitar que el espacio de una celda no ocupe el espacio de otra y se desplace
es necesario que ese espacio no se rellene
Para agrupar columnas se usa las siguientes tres formas para un mismo resultado:
<table>
<colgroup span="2"></colgroup>
<colgroup></colgroup>
...
</table>
<table>
<col span="2"/>
<col/>
...
</table>
<table>
<colgroup><col span="2"></colgroup>
<colgroup><col/></colgroup>
...
</table>
Donde el valor que toma el atributo span sera el numero de columnas que agrupará
Recomendaciones:
*Usar tablas en HTML solo para representar tablas y no la pagina web entera
*Combinar bien las celdas
*Utilizar la agrupacion de filas y columnas para que trabajar con CSS sea mas
sencillo
Insercion de imagenes:
Las imagenes son el elemento principal que confieren a la web su caracter de
hipermedia, la capacidad de integrar en un solo soporte la pagina web, contenidos
distintos como textos, imagenes, videos, audios, etc.
La presencia o ausencia de imagenes en una web determinan el alcance y uso que
tendra la web con los usuarios
Para insertar una imagen en HTML es <img/>
Atributos obligatorios en XHTML1:
-src -->Indica la ruta en que se encuentra la imagen
-alt -->Indica el texto que se muestra cuando la imagen no carga o no se puede
cargar por diversas razones, como que no exista o el formato no sea valido
Ejemplo:
<img src="img/logo.gif" alt="Logo de la empres"/>
Atributos opcionales:
-width y height -->Para definir las dimensiones de la imagen, el ancho y alto
-longdesc -->Para indicar la URL de la pagina en donde se otorga una descripcion
larga de la imagen
-ismap y usemap -->Para definir mapas de imagen
Atributos obsoletos(es recomendable usar CSS):

-align, border, hspace, vspace
En HTML tambien se puede usar una imagen como fondo de ciertos elementos, como
fondo de pagina o fondo de tabla
Si bien es desaconsejado y es mejor utilizar CSS en su lugar:
Fondo de pagina:
<body background="">
Fondo de tabla:
<table background="">
Ejemplos:
En este siguiente elemento se introduce la imagen que esta contenida en el
directorio de la pagina web en formato JPG
<img src="foto.jpg" alt="Foto del equipo"/>
Mientras que en el siguiente elemento se introduce una imagen en formato PNG que se
encuentra en otro servidor web
<img src="http://www.w3c.org/Icons/w3c_home.png" alt="Logo del W3C"/>
¿Que formatos graficos se pueden emplear con la etiqueta <img/>?

No se impone una lista de formatos graficos, esto depende del navegador, el
estandar son
JPG/JPEG:
-Tipo MIME: image/jpeg
-Compresion con perdidas -> Diferentes niveles de compresion
Ejemplo:
Una imagen al 100% de calidad puede pesar 452KB
Al 50% de calidad ocupa 57KB
Al 25% de calidad ocupa 34KB
A simple vista no se aprecian grandes diferencias entre los 3 niveles de
compresion, pero haciendo zoom si se puede notar
-Profundidad de color 8 bits(escala de grises)12 y 24 bits(color real)o 16 millones
de colores
-Transparencia: no
-Entrelazado: si
-Animacion: no
-Uso:imagenes complejas(reales)con muchos colores
PNG:
Formato creado especificamente para la web
-Tipo MIME:image/png
-Compresion sin perdidas(maxima calidad, sin embargo el tamaño de los archivos es
mayor a los otros formatos)
-Profundidad de color 1,2,4,8(color indexado)16,24,32,48,64(color real)
-Transparencia 8 a 16 bits(canal alpha)
-Entrelazado: si
-Animacion: no(pero existe MNG)
-Uso: los mismos que GIF y JPEG/JPG
GIF:
-Tipo MIME:image/gif
-Compresion sin perdidas
-Profundidad de color: paleta de colores de longitud variable 256 colores
-Transparencia de 1 solo color
-Permite realizar animaciones sencillas
-Uso(logotipos,mapas,diagramas,elementos decorativos)
*Como tip la tecnica dithering consiste en colocar 2 colores distintos uno al lado
y debajo de otro en un mosaico para dar la ilusion de crear un nuevo color, asi se
permite crear una variedad practicamente infinita de colores aplicando solo una
cantidad limitada
Mapas de imagen:
Se llaman imagenes sensibles, una imagen que contiene zonas activas(sensibles,
calientes) que son enlaces a otras paginas
Se procesan en el lado del client(usemap) o lado del servidor(ismap)
Mapa de imagen en el cliente se define:
<map name=""> Aqui se define el mapa de imagen con sus distintas zonas activas, el
mapa de imagen debe tener un nombre, para que en la etiqueta <img/> se pueda
relacionar el mapa de imagen con la imagen correspondiente
<img usemap=""/> En esta etiqueta que representa la imagen del mapa usa usemap para
indicar el nombre del mapa que se quiere utilizar
Cada zona activa o sensible del mapa se define mediante una imagen geometrica,
existen 3:
Todas las zonas activas se definen mediante <area/>
<area shape="" coords="" href="" alt=""/> Donde shape indica el tipo de figura
geometrica, coords para indicar las coordenadas de la figura geometrica, href para
indicar la URL del destino del enlace y alt para definir el texto alternativo que
representa la figura geometrica en caso que no se pueda visibilizar la figura
geometrica
El tipo de figura shape="rect" define un rectangulo --> coords="x1,y1,x2,y2". En
HTML la esquina superior izquierda corresponde a la posicion 0,0
El tipo de figura shape="circle" define un circulo --> coords="x,y,r"
El tipo de figura shape="poly" define un poligono -->
coords="x1,y1,x2,y2,...,xn,yn". Regular o irregular de n lados definida por las
coordenadas x e y de los vertices que componen el poligono
¿Para que se usan los mapas de imagen en las web?

Depende de la imaginacion del desarrollador, sin embargo los usos mas comunes son:
-Mapas geograficos para delimitar areas de una empresa en una region particular
-Como metodo de navegacion en una barra de menu especial, creada mediante iconos
-Antes se usaban en una portada de un sitio web, en la que se daba a conocer cada
una de las secciones del website por una imagen
VALIDACION DE CODIGO:
Debido a que HTML es un lenguaje tiene su vocabulario y reglas, podemos cometer
errores tal como el español de coherencia o cohesion, para ello es importante
validar el codigo HTML:
Primero debemos identificar la version del lenguaje:
HTML 4.01
XHTML 1
HTML 5
La version de HTML a usar en un website se indica con la etiqueta <!DOCTYPE> al
principio del codigo
Si bien puede parecer un misterio debemos saber colocar el valor dentro de la
etiqueta, por ello debemos saber que valor usar en nuestro documento, esto depende
de la version del lenguaje usado:
Segun la documentacion si usamos la version HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Si usamos XHTML 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
Si usamos HMTL 5:
<!DOCTYPE HTML>
Para validar el codigo fuente usaremos:

W3C MARKUP VALIDATION SERVICE, publicando la URL si esta publicado en internet, o
al subir el archivo del codigo fuente
Importancia de la validacion:
Si no hacemos esto puede contener errores y no visualizarse bien en todos los
navegadores
HTML5:
Luego de HTML 4.0 y XHTML 1 se desrrollo HTML 5, en octubre de 2014 se presento
HTML5 como un programa estable y seguro para el desarrollo de websites
¿Que es HTML5?
No es mas que la ultima version del lenguaje de marcado de hipertexto, para
complementar el desarrollo de un sitio web dinamico utilizamos ademas otras
tecnologias como CSS, DOM y JS, la combinacion de esta tecnologias se denomina
DHTML o HTML dinamico que permite crear sitios web dinamicos. Ademas se usan
tambien AJAX, una tecnica de desarrollo web que permite crear aplicaciones
interactivas que se ejecutan en el navegador. Sin embargo HTML5 tambien esta
compuesto de otras tecnologias que permite un desarrollo mas completo y dinamico de
websites. Veremos algunas de estas herramientas:
Una de las nuevas tecnologias definidas por etiquetas es:
<canvas> -->Permite definir un area dentro de una pagina web en la que se puede
dibujar mediante un API para JS, esto permitiria el desarrollo de juegos online o
crear aplicaciones de dibujo
<svg>(scalable vector graphics) -->Permite crear graficos vectoriales, con svg se
pueden crear graficos usando un lenguaje similar a HTML
Otra tecnologia es el API de geolocalizacion de JS
La tecnologia de cache permite indicar aquellos recursos que se desean que se
almacenen en forma local y asi mejorar el rendimiento, ademas que permite descargar
todos los contenidos necesarios y trabajar en local
Con la tecnologia DataBase es un API que ofrece almacenar la informacion del local
en el navegador mediante una base de datos SQLite, con esta tecnologia se pueden
desarrollar aplicaciones en donde el usuario puede crear notas persistentes que
conservan la posicion e informacion aunque se abandone la pagina web
Los webworkers son otra API para JS que permite ejecutar multiples hilos de
ejecucion que funcionan en paralelo
Etiquetas semanticas HTML5:

Algunos vicios del uso de HTML son el uso inadecuado de las etiquetas span y div
para la creacion de clases que clasifiquen una parte de la website para una
interaccion posterior con dicho segmento, un ejemplo:
<h1><span class="heading">El titulo de la pagina</span></h1>
<body>
<span class="bodytext">
...
</span>
</body>
Lo correcto es hacer lo siguiente, evitando el sobreuso de la etiqueta span
<h1 class="heading">El titulo de la pagina</h1>
<body class="bodytext">
...
</body>
Respecto al sobreuso de las etiquetas div, no es recomendable anidar estas ya que

su uso originalmente era para definir un bloque de contenido o sección de la
página, para poder aplicarle diferentes estilos e incluso para realizar operaciones
sobre ese bloque específico
Para evitar el sobreuso de dichas etiquetas HTML5 introdujo las etiquetas:

<header>
<nav>
<main>
<article>
<section>
<aside>
<figure>
<footer>
Transformaremos websites de versiones anteriores de HTML a HTML5
Si antes teniamos una seccion en la cabecera como <div id="header">...</div> la

reemplazaremos por <header>...</header>
Lo mismo si teniamos una seccion de navegacion <div id="nav">...</div> la
reemplazamos por <nav>...</nav>
Asi con un panel con informacion adicional que complementa la seccion principal
<div id="news>...</div> usaremos ahora <aside>...</aside>
En la zona de contenido principal usaremos <main></main> y para las entradas,
anuncios o articulos contenidos en dicha etiqueta usaremos <article></article>
Respecto a las imagenes era <div class="figure">...</div> y el titulo no tenia
mucho que ver con la imagen, sin embargo en HTML5 usaremos <figure><img
src="foto.jpg" alt="Kochis"/>...</figure> con la opcion de añadir
<figcaption>Titulo de la imagen relacionado con la imagen</figcaption> para darle
una identidad a la imagen. Es importante resaltar que la etiqueta figure puede
delimitar mas que una imagen, puede tambien delimitar un bloque de codigo o una
cita
Por ultimo el pie de pagina, si antes en el bloque en el soliamos poner las
direcciones de contacto. avisos legales o copyright mediante <div
id="footer">...</div> lo haremos asi <footer>...</footer>
Nuevas funcionalidades para formularios en HTML5:

El nuevo estandar HTML5 introduce nuevos elementos para el manejo de formularios,
ya que nos permite gestionar los formularios de manera nativa y podemos prescindir
de JS para realizar validaciones del formulario del lado del cliente. Esto facilita
el trabajo del desarrollador al evitar problemas de compatibilidad de navegadores
Los formularios ofrecen formas mas intuitivas de rellenarse ya que ofrece ayudas e
indica campos vacios para solicitar datos del usuario
Hablaremos de algunos elementos del elemento <input> type:

<url> --> Se usan aquellos campos que contiene direcciones web, este campo es
validado cuando el formulario es enviado y corrige al usuario cuando el formato no
es correcto
<tel> --> Se usa para introducir un numero de telefono, ya que no existe un patron
o estandar internacional debemos complementarlo con el atributo pattern=""
<email> --> Se usa para definir campos en donde se introducira un email valido
<number> --> Se usa para definir campos en donde se introduzcan solo valores
numericos, usaremos atributos min="" y max="" para fijar un limite en el numero a
ingresar o asignando un valor especifico por defecto con el atributo value=""
<color> --> Se usa para definir campos donde el usuario puede seleccionar un color
de una paleta, si no se designa un color por defecto toma el color negro
<search> --> Se usa para definir campos de busqueda en formato de texto
<range> --> Se usa para definir los intervalos en el que puede variar los campos
numericos con los atributos min="" y max=""
<datetime> --> Permite al usuario seleccionar la hora, el mes, dia, año y zona
horaria
<datetime-local> --> Permite al usuario seleccionar la hora, mes, dia y año sin la
zona horaria
<date> --> Permite al usuario seleccionar una fecha completa formada por dia, mes y
año
<month> --> Permite al usuario seleccionar un mes y año especifico
<week> --> Permite al usuario seleccionar una semana y un año especifico
<time> --> Permite al usuario seleccionar la hora en formato de horas y minutos
En un dispositivo movil es mas apreciable el uso de los campos tel, url y email, si
usamos el campo tel el dispositivo se optimizara para mostrar un teclado numerico e
ingresar el tipo de dato solicitado
Si usamos el campo email el dispositivo se optimizara para mostrar un teclado
textual con caracteres @ e ingresar el tipo de dato solicitado
Si usamos el campo url el dispositivo se optimizara para mostrar un teclado textual
con caracteres www. o https:// e ingresar el tipo de dato solicitado
Algunos atributos que se emplean en el control de formularios seran:

autocomplete --> Nos permite especificar si un formulario completo o un campo de
este debe tener la opcion de autocompletado o no, cuando el valor del atributo sea
<form autocomplete="on"> el navegador completara automaticamente el campo con
valores que el usuario haya introducido el usuario en ocasiones anteriores, si esta
en autocomplete="off" se prevee que el campo se autocomplete automaticamente, esto
puede causar problemas de seguridad, se puede usar con los siguientes elementos:
tipos de input:
<text>
<search>
<url>
<tel>
<email>
<date pickers>
<password>
<range>
<color>
autofocus --> Nos permite especificar en que campo de entrada queremos que se
coloque automaticamente el foco cuando se carga la pagina, es un atributo de tipo
booleano por lo que no es recomendable definir mas de un elemento con este atributo
en la misma pagina, esto es util para usuarios de moviles, debemos estar seguros
que la mayoria de usuarios utilizaran el campo en el que lo coloquemos
min y max --> Permite delimitar los valores numericos que podemos introducir en un
campo del formulario, no podremos introducir un valor por encima del maximo ni por
debajo del minimo(util para delimitar el numero de items en un sistema de control
de productos para ventas o uso) funciona con los elementos:
<number>
<range>
<date>
<datetime>
<datetime-local>
<month>
<time>
<week>
step --> Se puede usar en conjunto con min y max para que en un rango delimitado de
valores numericos validos dando un salto entre dichos valores segun el valor que
tome step=""(es como un iterador que toma un valor otorgado, dentro de un rango
predeterminado de valores). Puede ser usado en los elementos
<number>
<range>
<date>
<datetime>
<datetime-local>
<month>
<time>
<week>
pattern --> Permite validar un elemento input en base a una expresion regular.
Ejemplo:
<input type="text" name="prefijo-pais" pattern="[A-Za-z]{3}" title="Patron de 3
letras"/> Aqui indicamos al usuario que puede introducir un codigo limitado de 3
letras siguiendo el formato otorgado que es el abecedario en mayusculas y
minusculas, a lo que el usuario deberia ingresar PER, ESP, FRA, BOL, etc para
indicar los codigos de su pais, mas sera invalido ESPA, 123, alem, etc.
Se puede usar con los elementos:
<text>
<search>
<url>
<tel>
<email>
<password>
placeholder --> Permite colocar valores por defecto a modo de ejemplo o explicacion
de lo que se espera que el usuario introduzca en un campo del formulario, estos
valores explicativos desapareceran cuando el usuario posicione el cursor en el
campo o escriba dentro de el; Ejemplo:
<input type="text" name="nombre" placeholder="Introduzca su nombre"/>
Se usa con los elementos
<text>
<search>
<url>
<tel>
<email>
<password>
required --> Indica al usuario que dicho campo debe ser rellenado antes de enviar
el formulario
Ejemplo:
<input type="text" name="nombre" required/>
Se usa con:
<text>
<search>
<url>
<tel>
<email>
<date pickers>
<password>
<number>
<checkbox>
<radio>
<file>
IMPORTANCIA DE ESCRIBIR CODIGO HTML CORRECTO

Principales 4 razones por las que una pagina web se puede visualizar de manera
incorrecta en un navegador:
1.Fallos y errores de navegadores
2.Problemas de compatibilidad entre navegadores; la especificacion de HTML
proporciona reglas de como se deben interpretar y visualizar los diferentes
elementos y atributos del lenguaje
3.Soporte de HTML por los navegadores; quizas la pagina tiene alguna caracteristica
que no admite el navegador
4.Errores en el codigo HTML; esta es la unica dentro de nuestro control
Trataremos la que esta bajo nuestro control:

Debemos usar validadores de codigo para comprobar que no tendremos problemas a la
hora de presentarlo en internet
Algunos errores comunes:
Etiqueta <b> sin cerrar; los navegadores hasta que se cierra la etiqueta <b>
continuara su efecto hasta el final de la pagina
Etiqueta <span> sin cerrar; si usamos <span style="font-weight:bold"> sin cerrar al
final del parrafo en algunos navegadores puede presentarse su efecto hasta el final
del documento HTML y en otros solo hasta el final del parrafo en que fue
introducido
Al no cerrar comillas en un valor de atributo puede no mostrarse nada en algun
navegador
Al atribuir un valor al atributo size que no es un valor numerico como size="3O"
algunos navegadores no reconoceran el valor como 30 sino le asignaran un valor 3 o
por defecto 20 al tamaño del campo de texto
¿A que se deben algunas diferencias en los navegadores al interpretar errores de un

documento HTML?
La clave es el DOM(Document Object Model), esta es una recomendacion de la W3C para
la web, es una interfaz de programacion de aplicaciones(API)para documentos validos
HTML y bien construidos XML. Define la estructura logica de los documentos y el
modo en que se accede y manipula. En DOM los documentos tienen una estructura
logica parecida a un bosque o arboleda, que puede contener mas de un arbol, cada
documento cero o un nodo doctype, un nodo de elemento de documento y cero o mas
comentarios o instrucciones de tratamiento, el elemento del documento sirve como la
raiz del arbol para el documento. Los navegadores construyen un DOM correcto cuando
el documento HTML es correcto, sin embargo tienen su propia forma de construir un
DOM cuando el documento HTML esta errado
Ejemplo:
En un codigo HTML existen elementos, atributos y valores, estos debemos concebirlos
como una abstraccion en donde la raiz sera el elemento de mayor jerarquia para
luego llegar al las ramas que son los de menos jerarquia, generalmente texto
*En la documentacion oficial de W3C nos deja saber que la etiqueta <p> no puede
anidar otras etiquetas <p>
¿Migrar a un nuevo juego de caracteres?

Si alguna vez requerimos migrar una pagina web a otro juego de caracteres o si
recibimos de otro servidor paginas web en codificacion distinta a la que requerimos
para entenderla mejor es prudente cambiar el juego de caracteres, para ello en
Windows seleccionamos el editor de texto de preferencia, utilizaremos la opcion
codificar y elegimos el juego de caracteres deseado, en Linux y MacOS lo haremos
desde el CLI con file e iconv si bien es recomendable seguir usando UTF-8 sin BOM
para la mayoria de problemas en lenguajes europeos occidentales
*Una letra con tilde ocupa dos bytes en lugar de uno
DIFERENCIAS ENTRE XML, HTML Y XHTML:

XHTML es el acronimo de eXtensible Hypertext Markup Language o Lenguaje extensible
de marcado de hipertexto, XHTML fue pensado para sustituir a HTML como estandar
para las paginas web, sin embargo a finales del 2007 la WHATWG opto por crear su
propia version de estandar para el desarrollo web para lo que la W3C mostro interes
abandonando su proyecto de desarrollar XHTML 2.0 como estandar para el desarrollo
de paginas web, hoy esta desfasado y practicamente sin uso el empleo de XHTML para
desarrollo web
CSS, CONCEPTOS BASICOS:

El diseño de la página web influye en como los usuarios finales interactúan con la
identidad digital de una empresa, institución o entidad, para elaborar el diseño de
una pagina web utilizamos la tecnología CSS por sus siglas Cascading Style Sheets,
existen distintos niveles de CSS, cada nivel superior añade funciones a la
anterior, actualmente nos enfocaremos en CSS 3. La estructura de el lenguaje es el
siguiente:
propiedad separador separador En este esquema podemos

apreciar que la regla contiene uno o
\ separador valor / / mas selectores y una
declaratoria formada por un bloque de
\ | / / propiedad / valor estilos que define los
elementos a aplicar para los elementos
\ | / / / / / del documento que cumplan con
el selector. En este ejemplo el
h1 {color : #FF0000 ; background : #00FF00 } < --------- selector es el
elemento de HMTL <h1> por lo que esta regla se
| \_________________ ________________/ aplicara a todos los
encabezados <h1> de la pagina web. Cada
| \/ declaracion de estilos se
define entre llaves formada por
selector declaracion parejas "propiedad :
valor", existen actualmente cerca de 200
\____________________ ____________________/ propiedades.
\/
Regla
¿Como se usa CSS en HTML?
Es una tecnologia utilizada para definir la presentacion visual de un website
Aprenderemos que es el "ACOPLAMIENTO", en informatica este termino indica el nivel
de dependencia entre las unidades de software en un sistema informatico, es decir
el grado en que una unidad puede funcionar sin recurrir a otras, se dice que dos
funciones son totalmente independientes entre si(el nivel mas bajo de acoplamiento)
cuando una puede hacer su trabajo completamente sin recurrir a la otra. En este
caso se dice que ambas estan desacopladas
Es preferible un Desacoplamiento Total, sin embargo es algo imposible, por lo que
se buscara un nivel minimo de acoplamiento
Al usar CSS en HTML se crea un acoplamiento entre estas dos tecnologias

Podemos usar en HTML las reglas para aplicar CSS siguientes:
Atributo style --> Maximo acoplamiento(se puede aplicar a casi todos los elementos
y etiquetas)
Demostracion:
Atributo style:
<body style="color: #333; background-color: #CCC;"> --> Esto colorea el fondo de la

pagina a un gris medio y las letras seran un gris oscuro.
Al usar estas etiquetas se muestran los estilos en el navegador, sin embargo es

poco practico y escalable, debido a que requerimos integrar la etiqueta a cada
linea donde se aplica en la pagina
Etiqueta style:
Al usar esta etiqueta reducimos un nivel mas el nivel de acoplamiento, sin embargo
tampoco es la mejor opcion para trabajarlo en una pagina HTML
<head>
...
<style>
body {
background-color: #CCC; --> La etiqueta style siempre ira dentro de las
etiquetas head, y para definir la seccion
color: #333; de HTML modificada por CSS lo definimos y
colocamos entre llaves las propiedades y sus
} valores.
</style>
...
</head>
Etiqueta link:
Al usar la etiqueta link reducimos el acoplamiento de HTML y CSS al maximo, debido
a que el archivo de CSS no se encuentra en el archivo HTML, la etiqueta link debe
escribirse dentro de la etiqueta head
<head>
...
<link href="Ruta donde esta la hoja CSS" rel="stylesheet(que indica que es una hoja
de estilo)">
...
</head>
Debemos guardar el archivo CSS debe estar en el mismo directorio que los archivos
HTML a los que se pretende dar estilo. Esto es lo mas escalable ya que podemos usar
la misma hoja de estilo en cualquier documento HTML que busquemos modificar

Introduccion Al Desarrollo Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introduccion Al Desarrollo Web

Cargado por

Copyright:

Formatos disponibles

INTRODUCCION AL DESARROLLO WEB, HTML Y CSS

HTML es un lenguaje de etiquetado de hipertexto, utilizado para la estructura y

En la version de HTML 5 existen alrededor de 100 etiquetas y contando.

<p class="importante">Esto es un parrafo</p>

<p...> -->Es la etiqueta de inicio

Los elementos se pueden anidar(crear jerarquias) segun algunas reglas.

Descripcion de algunas etiquetas de HTML:

<html></html> --> Etiqueta principal(raiz). Todo el contenido de la pagina web debe

Si bien la flexibilidad de nuevas versiones de los lenguajes permiten libertades y

-Es recomendable cerrar siempre las etiquetas que se abren.

Existen distintos tipos de listas en el lenguaje HTML 4 y 5.

-Lista no ordenada (Unordered List o <ul></ul>): El orden de los elementos no es

-Lista ordenada (Ordered List u <ol></ol>): El orden de los elementos es

*Para los dos anteriores elementos de la lista utilizaremos la etiqueta <li></li>

-Lista de descripcion (Description List o <dl></dl>): Se emplea para definir una

*Para este ultimo tipo de lista se escribira asi:

Para referenciar a un punto dentro de otro documento escribiremos:

CONSEJOS PARA REFERENCIAR O CREAR ENLACES:

-Tener cuidado con mayusculas o minusculas, de preferencia usar solo minusculas.

DETALLES SOBRE EL EDITOR DE CODIGO:

-El editor no es la clave para buenas paginas web, es una herramienta.

MALAS PRACTICAS O ERRORES EN EL DESARROLLO WEB:

NO SE RECOMIENDA PARA SEPARAR DOS ETIQUETAS:

TAMPOCO DEBEMOS INTENTAR CREAR LISTAS ARTIFICIALES:

&nbps; (NON BREAK SPACE)

Publicacion de pagina web:

Luego debemos publicar la web en internet y para ello buscaremos un servicio de

Poco a poco se ira propagando el nuevo registro y la pagina ya sera accesible

ESQUEMA DE PUBLICACION DE SITIO

CRITERIOS PARA LA ELECCION DE UN PLAN DE HOSTING:

N° de paginas * Tamaño medio de la pagina

-Limites mensuales para transferencia de datos(trafico)

N° de visitantes diarios * N° de paginas por visitante * Tamaño medio

En un dia: VolumenTrafico = 125000Kb = 122,1Mb

-Velocidad maxima de transferencia de datos(bandwidth)

Si el usuario se conecta solo dispone de todo el ancho de banda para acceder

Si ahora los usuarios son 5, dividimos el ancho de banda entre cada

El calculo que realizaremos sera en base al numero de visitantes maximo que

-Lenguaje de programacion que permite emplear

-El uso y la cantidad de bases de datos

-Otros(plantillas de web, correos que se pueden crear)

Consejos finales para eleccion de dominio y hosting:

COMO PUBLICAR UN SITIO WEB EN INTERNET:

-Se compone de diversos archivos como imagenes, HTML, CSS, etc.

La web es un sistema de intercambio de documentos HTML mediante protocolo HTTP.

¿Para que se utilizan?

Etiquetas HTML para formularios:

POST --> Datos no visibles en la URL

accept-charset --> espera una lista de caracteres separados por comas,

enctype --> especifica el tipo de codificacion por defecto application/x-www-

*El tipo de input por defecto es "text"

maxlenght --> con el valor "1,2,3...n" que determina el maximo numero de

Tipo input "checkbox", se utilizan para ingresar casillas de verificacion

Tipo "radio", similar al checkbox pero en forma circular y solo puede

Tipo "file" ofrecen la posibilidad al usuario de introducir archivos al envio

Tipo "password" ofrecen campos de texto enmascarado, es similar al campo de

readonly --> funciona de manera similar a disabled,su valor unico tambien es

value --> ciertos campos necesitaran este atributo

<select> --> Genera listas desplegables y listas de seleccion multiple

Ejemplo con multiple:

optgroup --> despliega un subgrupo de elementos desplegables

<textarea> --> facilita el ingreso de grupos de texto amplios sin la necesidad de

*Utilizar <textarea> en lugar de <input type="text"/> cuando la informacion a