IMAGENES HTML

La etiqueta utilizada es:

TABLAS HTML

<table> </table> : indica el inicio y cierre de una tabla.

<tr> </tr> : (table row) representa una nueva fila de la tabla.

<td></td> : (table data cell) Celda dee datos.

<th></th> : (table data head) Celda de cabecera, para las primeras filas y columnas.

<thead></thead> : agrupa filas de cabecera.

<tbody></tbody> : agrupa filas de cuerpo.

<tfoot></tfoot> : agrupa las filas del pie.

Ejemplo:

<caption></caption> : añade un titulo sobre la tabla.

<td colspan="X"></colspan> : La celda  ocupa X columnas.

<td rowspan="X"></rowspan> : La celda ocupa X filas.

<colgroup></colgroup> o <col/> : 

CONSEJOS

• Utiliza tablas las tablas HTML para representar tablas no hagas el diseño de tu pagina con tablas. 
• Cuidado con la conbinación de celdas, 
• Utiliza la agrupación de filas y columnas para que el posterior trabajo de estilo sea mas facil. 

FORMULARIOS HTML

Un formulario HTML es una sección de documento, que contiene:

• Contenido normal..
• Código.
• Controles. 
• Rótulos.

En el que lo usuarios normalmente rellenan un formulario modificando sus controles, antes de enviar el formulario a un agente para que lo procese (a un servidor web, a un servidor de correo, etc).

¿ Para que se utilizan ?

Permite que el usuario envíe información al servidor, formularios e registro o acceso a sitios web, formularios de contacto, etc. 

ETIQUETAS BÁSICAS PARA FORMULARIOS:

<form>  action=" " method=" " accept-charset=" " enctype=" "</form> :

Es fundamental para que el resto de elementos puedan ser enviados, todos los campos que se quieren enviar deben estar entre estas dos etiquetas. "action" es el único atributo requerido para la etiqueta <form>, esta espera una cadena de texto que especifique la URL o ruta. "method" indica la forma de enviar la información este atributo  acepta dos valores get y post, si no se utiliza la etiqueta method el formulario se enviara  por defecto con el valor get. Accept-charset, espera una lista de juegos separados por comas. Enctype, especifica el tipo de codificación. 

• GET. es el metodo que utlizamos normalmente al navegar.
• POST, es un metodo de envio mas sensible, como pueden ser contraseñas, no tiene limite de envio y posibilita la subida de ficheros al servidor. ej: formulario de registro.

<imput> </imput>: 

Es la mas utilizada en formularios con ella podemos definir gran parte de los controles tipicos de formularios ( Entradas de  tipo texto, Casillas de verificación.Casillas de opcion (radio).ArchivosContraseñas, Campos ocultos, Botones varios). Esta etiqueta no tiene etiqueta de cierre y es importante que la cierres debidamente para cumplir con los estándares. <imput............/>.  Atributos: 

• name =" " espera una cadena de texto que indica el nombre que recibirá el campo.
• type =" " define en que se convertirá el control 
• "text" por defecto es de tipo text.
• "checkbox" casilla de verifación 
• "radio" casilla de opción.
• "file" boton que abre ventana para seleccionar un archivo.
• "pasword" campo de texto enmascarado. 
• "hidden" campo oculto.
• "button" muestra un botón. 
•  "submit" dibuja el  botón enviar 
• "image" utiliza una imagen con la opción de tipo submit. 
• "reset" borrar formulario.
• "disabled" deshabilita un campo para que no pueda ser utilizado. 
• "readonly" igual que disabled pero aplicado a tipo text seria  imposible copiar y pegar.

Consejos a la hora e hacer formularios:

• Sin form no hay envíos (pero si campos).
• <input type = "value" />
• <imput type = "submit/>
• Separa el contenido de estilos (size, cols, rows).

Ejemplod de imput:

<input type="text" maxleght=" "  sice=" " value=" ">

• maxleght = limita el numero maximo de caracteres.
• sice = limita el tamaño del hueco en caracteres. (no se acoseja).
• value = valor del campo por defecto, el usuario debera borrarlo para poner su palabra.

<imput type="checkbox" name"  "> : es importante que para esta etiqueta tengan todos el mismo nombe:

<imput type="checkbox" checked"  "> : indica que la casilla aperece marcada por defecto. 

<imput type="checkbox" value"  "> : es imprescindible aqui ira el valor a enviar al servidor. 

<imput type="radio" name"  "> : 

<imput type="radio" checked"  "> :

<imput type="radio" value"  "> :

<imput type="file"> : ofrecen la posibilidad de subir ficheros y adjuntarlos al  formulario. si quieres utilizar esta etiqueta en la etiqueta <form> tiene que estar tambien el atributo enctype="multipart/form-data" para poder subir archivos.

https://youtu.be/6oGjhVRu7cU

https://youtu.be/UVpE-tBtdvY

NUEVA ENTRADA

DHTML es el acrónimo de Dynamic HTML, un término que designa el conjunto de técnicas que permiten crear sitios web interactivos utilizando una combinación de HTML, CSS, JavaScript y DOM.

ENLACES HTML

Los enlaces son el elemento principal que confiere a la web  su carácter  de hipertexto.

Hipertexto: Documento digital que se puede  leer de forma no secuencial y que esta compuesto de nodos o secciones de enlaces o hipervinculos o hiperenlaces y de anclajes.

Los nodos son la parte del hipertexto que contiene información accesible para el usuario por otro lado los enlaces son las uniones que se establecen entre nodos y facilitan la lectura secuencial por los nodos del documento, por ultimo los anclajes son los puntos de activación de los enlaces.

En las paginas web se pueden crear dos tipos de enlaces:

• Enlace Intradocumental: Es un enlace a un punto en el mismo documento, 
• enlace : <a href="#nombre">.....</a>
• destino: <a name="nombre">......</a>    <h1 id="nombre">.........</h1>
• Enlace Extradocumental: Es un enlace a otro documento, a otra pagina web.
• <a href="pagina.html">....</a>.
• Enlace Extradocumental a un punto en otro documento. en este tipo se combinan ambos indica la url del documento y el nombre del punto en el otro documento y por otro lado en el destino se debe definir el punto al que se hace referencia.
• enlace: <a href="pagina.html#nombre">.....</a> 
• destino: <h1 name="nombre">...</h1>  <h1 id="nombre">...</h1>

Un hiperenlace puede hacer referencia en un punto determinado en la pagina que lo contiene, a otra pagina HTML o a un punto determinado de otra pagina HTML, en los dos últimos  casos la pagina destino puede residir en el mismo servidor de la pagina que contiene el hiperenlace o en un servidor distinto.

La etiqueta que se utiliza para definir un hiperenlace es <a></a> todo aquello que aparezca entre estas dos etiquetas <a>enlace</a> aparecerá en la web como un enlace, sera el objeto sensible que al ser pulsado producirá el salto al destino del enlace.  Suelen utilizarse texto o imagenes como contenido de un enlace. 

LISTAS HTML

Existen tres tipos de listas:

• Listas no ordenadas
• Listas ordenadas
• Listas de descripción.
• Listas anidadas.

los elementos de estas listas se definen de forma que, para la lista no ordenada y para la lista ordenada se emplea el elemento <li></li> para la lista de descripción se emplean los elementos 

<dt></dt> y <dd></dd>.

Ejemplo de lista no ordenada: 

<ul>

<li>Esto es un tipo de punto.</li>

<li>Este es otro.</li>

<li>Y este es otro diferente.</li>

</ul>

Ejemplo de lista ordenada:

<ol>
<li value="20">Este será el número 20. </li>
<li>Este será el 21. </li>
<li> Este será el 22. Y así sucesivamente. </li>

</ol>

En una lista ordenada se pueden usar algunos atributos que modifican su comportamiento. 

• start : permite indicar el valor inicial donde comienza la lista.
• type: (a,b,c,d.....I,II,III,VI).
• reverse: atributo bouleano, que hace que la numeración sea descendente.

Ejemplo de lista de descripcion: 

<dl>
<dt>Aquí va el término que definiremos</dt>
<dd>Y aquí dentro irá la definición propiamente dicha.</dd>
</dl>
<dl>
<dt>Aquí va la segunda definición</dt>
<dd>Y aquí dentro irá la segunda definición, separada automáticamente de la anterior.</dd>
</dl>

Ejemplo de listas anidadas: 

Ejemplo 1:

Ejemplo 2:

EL LENGUAJE HTML

El lenguaje HTML tiene muchas etiquetas, pero aplicando el Principio de Pareto (la regla del 80-20), sólo hay que conocer bien el 20% de las etiquetas, ya que con ellas se crea el 80% del contenido de las páginas web. Las etiquetas más importantes son:

WEB RECOMENDADA: http://www.w3schools.com/

ETIQUETAS: 

• <html></html> Etiqueta principal.
• <head></head> Cabecera metadatos.
• <title></title> Titulo de la pagina. 
• <body></body> Cuerpo contenido visible.
• <h1></h1>  <h2></h2> <h3></h3> Encabezados o titulos.
• <p></p> Parrafo.
• <strong> Texto negrita. 
• meta
• link
• style
• script
• a
• img
• form
• input
• select
• textarea
• table
• tr
• th
• td
• blockquote
• hr
• li
• div
• span

GRAMTICA: Algunas reglas importantes.

1. Las etiquetas siempre se tienen que cerrar.
2. Los elementos anidados deben tener un correcto orden de apertura/cierre, el que se abre ultimo debe cerrarse primero.
3. Las etiquetas deben escribirse siempre en minusculas.
4. Los valores de los atributos deben ir siempre cerrados entre comillas simples o dobles.
5. Para los nombres de los ficheros de las paginas web, limitate a utilizar letras y numeros.
6. La extensión de las paginas web es siempre .htm o .html.

DESARROLLO WEB

En primer lugar  distinguir entre desarrollo web y diseño web:

Desarrollo web: Se refiere a la programación necesaria para construir una aplicación o sitio web se suele dividir en dos partes que pueden estar conectadas, la parte cliente y la parte servidor que funcionan de manera independiente y emplean tecnologías distintas aunque aveces interactúan por lo que también se habla de programación  de la parte cliente-servidor.

• PARTE CLIENTE: Los conocimientos que se necesitan tener son por un lado HTML y CSS para la creación de las paginas web y por otro JAVASCRIPT y DOM para la programación de la parte cliente. 
• PARTE SERVIDOR: El desarrollo de la parte servidor se refiere a la programación necesaria para construir el "back end" de un sitio web, que es la parte de  un sitio web que no ven los visitantes pero es muy necesaria para poder presentar la información correcta en el formato correcto a los visitantes. 
• En el desarrollo de la parte servidor se emplean lenguajes de script como PHP, ASP, ASP.NET, JSP, Perl y Coldfusión, par acceder a una base de datos y recuperar la información necesaria para visualizar una pagina web, por tanto el programador web también cubre la parte del diseño y desarroyo de las bases de datos, y también es necesario tener en cuenta la seguridad del producto final.

Diseño web: Se refiere al diseño visual de un sitio web o de una pagina web y con frecuencia implica el diseño de los elementos gráficos de la pagina. En el diseño se tienen en cuenta elementos gráficos como la tipografía, los colores, los tamaños y las proporciones. 

El diseño se suele realizar con una herramienta gráfica como Adobe Photoshop o GIMP y proporciona el marco para la presentación y comportamiento de la pagina, el diseño  final de un diseño web no  suele contener código.

PROTOTIPADO:  Al igual que un arquitecto que crean los planos y las maquetas antes de realizar un edificio, en programación también se realizan los equivaentes a planos y maquetas antes del desarrollo de una web.

• PLANOS:  serian los diagramas de organización y funcionamiento y se denominan diagramas de contenido o flujo o mapa web (Blueprints).  A la hora  de realizar este paso es muy importante que sea comprensible y se refleje con claridad la estructura el flujo de navegación y la relación entre los elementos. Enlace al libro de Jesse James Garret destacado arquitecto de la información. http://www.jjg.net/ia/recon/spanish.html. Otro enlace interesantes es este la diagramación en los sistemas de información de Ronda Leon http://www.nosolousabilidad.com/articulos/diagramacion.htm, en el recopila diferentes propuestas de vocabulario entre ellos el suyo propio. 

• MAQUETA:  serian diagramas de presentación, cuyo objetivo es crear una referencia visual de la estructura, organización e interacción a nivel pagina. Existen diferentes tipos entre prototipos de alta fidelidad y de baja fidelidad, skeching, wireframes, storyboard, prototipos funcionales.  En ningún caso se debe incluir diseño  grafico  en un prototipo , este lo realizaremos en etapas posteriores y es importante aclararselo al cliente, tampoco se deben utilizar colores y por ello se usan gamas de grises. 

1. Skeching: Boceto rapido e informal para expresar ideas al cliente o en reuniones de equipo, un libro recomendable es Sketching user experience de http://www.billbuxton.com/.
2. Wireframe: Es mas elavorado ya incluye el contenido de cada pagina, cabeceras elaces, listas, formularios, el layout (ubicación, colocación y agrupación e los elementos de pagina asi como la estrategia de navegación y la priorización de contenidos en la misma). Un wireframe debe tambien incluir el comportamiento mediante notas asociadas a los elementos para idicar como deben mostrarse o su comportamiento. 
3. Storyboard: No es mas que una secuencia de wireframes.
4. Prototipos funcionales: Son de alta fidelidad, tambien llamados maquetas  o mockups y pemitn detallar el proceso interactivo de una o varias tareas, son prototipos o maquetas dinamicas normalmete en HTML que simulan partes del sistema final a desarroyar.

Nunca se debe comenzar a prototipar sin haber definido primero los objetivos del cliente, las necesidades de los usuarios los requisitos del proyecto y la arquitectura de la información de la aplicación web. 

Lecturas recomendadada 

• http://www.trea.es/books/arquitectura-de-la-informacion-en-entornos-web. 
• http://olgacarreras.blogspot.com.es/2007/02/wireframes.html
• http://wireframes.linowski.ca/

Cinco consejos basicos para realizar un buen prototipo:

1. Sencillez y claridad. 
2. Hazlo en blanco y negro. 
3. Represnta los tamaños y proporciones de los bloques  de contenido. 
4. Ten en cuenta las pautas de accesibilidad y usabilidad. 
5. Y sobre todo "diseña para tus usuarios". 

HISTORIA DE INTERNET Y LA WEB.

Es un documento o información electrónica capaz de contener texto, sonido,vídeo, programas, enlaces, imágenes, y muchas otras cosas, adaptada para la llamada World Wide Web, y que puede ser accedida mediante un navegador. Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar navegación (acceso) a otras páginas web mediante enlaces de hipertexto.

El padre de la web Tim Berners-Lee es tambien el padre el padre  lenguaje HTML, se baso en el lenguaje SGML (Standar Generaliced Markup Lenguaje)

,un standar ISO del año que se emplea para la organización de etiquetado de textos.

Estos son algunos de los protocolos mas utilizados: 

TCP
Son las siglas de Trasmison Contro Protocol, es uno de los protocolos fundamentales en internet fue creado entre 1973 y 1974 por Vint Cert y Robert Kahn.
Muchos programas dentro de una red de datos compuesto por una red de computadoras, pueden usar  TCP para crear conexiones entre si atraves de las cuales pueden eviarse flujo de datos. El protocolo garantiza que los datos seran entregados en su destino sin errores y en el mismo orden  que se trasmitieron.

IP
Internet Protocol, es un protocolo de comunicación de datos digitales clasificado funcionalmente en la capa de red según el modelo internacional OSI.


DHCP
DHCP (siglas en inglés de Dynamic Host Configuration Protocol, en español «protocolo de configuración dinámica de host») es un protocolo de red que permite a los clientes de una red IP obtener sus parámetros de configuración automáticamente. Se trata de un protocolo de tipo cliente/servidor en el que generalmente un servidor posee una lista de direcciones IP dinámicas y las va asignando a los clientes conforme éstas van quedando libres, sabiendo en todo momento quién ha estado en posesión de esa IP, cuánto tiempo la ha tenido y a quién se la ha asignado después.

LDAP
LDAP son las siglas de Lightweight Directory Access Protocol (en español Protocolo Ligero de Acceso a Directorios) que hacen referencia a un protocolo a nivel de aplicación que permite el acceso a un servicio de directorio ordenado y distribuido para buscar diversa información en un entorno de red. LDAP también se considera una base de datos (aunque su sistema de almacenamiento puede ser diferente) a la que pueden realizarse consultas.

POP
En informática se utiliza el Post Office Protocol (POP3, Protocolo de Oficina de Correo o "Protocolo de Oficina Postal") en clientes locales de correo para obtener los mensajes de correo electrónico almacenados en un servidor remoto. Es un protocolo de nivel de aplicación en el Modelo OSI.

SMTP
El Simple Mail Transfer Protocol (SMTP) (Protocolo para la transferencia simple de correo electrónico), es un protocolo de red utilizado para el intercambio de mensajes de correo electrónico entre computadoras u otros dispositivos (PDA, teléfonos móviles, etc.). Fue definido en el RFC 2821 y es un estándar oficial de Internet.

SSH

SSH (Secure Shell, en español: intérprete de órdenes segura) es el nombre de un protocolo y del programa que lo implementa, y sirve para acceder a máquinas remotas a través de una red. Permite manejar por completo la computadora mediante un intérprete de comandos, y también puede redirigir el tráfico de X para poder ejecutar programas gráficos si tenemos ejecutando un Servidor X (en sistemas Unix y Windows).

DNS
Domain Name System, Su principal tare es traducir un nombre de domino en una dirección IP

CMS
Content Management System, Sistema de gestor de contenidos, es un programa informatico que permite crear una estructura de soporte para la administración y creación de contenidos, principalmente paginas web.