jueves, 26 de marzo de 2015

2.7 Formularios



Los formularios son una característica del estándar HTML que permite a los autores llevar datos del exterior al interior de nuestro sistema. Esto se logra mediante componentes que transportan diversos tipos de datos para múltiples aplicaciones donde tu imaginación es el límite
Los formularios están delimitados con la etiqueta <form> ... </form>, que permite reunir varios elementos de formulario, como botones y casillas de texto y que debe poseer los siguientes atributos:

  • method indica cómo se enviarán las respuestas "post" es el valor que envía los datos al agente de procesamiento almacenándolos en el cuerpo del formulario, en tanto que "get" envía los datos agregándolos a la dirección URL y separándolos de la dirección con un signo de interrogación.
  • action indica la dirección a la que se enviará la información (una url o dirección de correo electrónico: mailto:dirección_de_correo@equipo)
  • target nos permite mostrar el resultado en la ventana deseada:
    • target = '_blank' Fuerza que el documento referenciado por el enlace sea mostrado en una nueva ventana del navegador.
    • target = '_self' El documento referenciado se mostrara en la misma ventana
La sintaxis genérica para la etiqueta form:

<form name='nombre' method='get/post'
         action='url' target = '_blank/_self'
         enctype = 'x-www-form-urlencoded'>
       ...Cuerpo del formulario</form>

La etiqueta form actúa como una especie de contenedor para almacenar elementos que permiten al usuario seleccionar o introducir datos. Todos los datos se enviarán a la dirección URL indicada en el atributo action de la etiqueta form, por el método indicado en el atributo method.
Un ejemplo básico es:

<form method='post'
    action='http://www.prograweb.com.mx'>
  <input type='submit' value='Enviar' />
</form>

Se puede insertar cualquier elemento HTML en una etiqueta form (como botones, hipervínculos, tablas y texto), pero los elementos interactivos son los más interesantes. Estos elementos interactivos son:

  • La etiqueta input: Todos los botones y casillas de texto
  • La etiqueta textarea: una casilla de texto
  • La etiqueta select: una lista de opciones múltiples
Atributos de etiquetas form y tipos de entrada







2.6 Estructura y disposicion



<header>: Delimita el encabezado visible del sitio dentro de esta etiqueta generalmente encontraremos el menú, logotipo, y encabezados del sitio.

<nav>: Dentro de nav pondremos siempre las ligas más importantes del sitio.

<aside> Representa una sección de una página que consiste en contenido que está tangencialmente relacionado con el contenido que le rodea, que podría ser considerado independiente de ese contenido.

<section> se usa para representar un bloque de nuestra página que tiene valor semántico, es decir, que aporta un significado a la página. Realmente si tenemos que clasificar por la importancia del significado, el ranking sería: article sería la etiqueta que contiene la información más relevante, section la que contiene información menos relevante, y div que contiene información que no aporta significado ninguno. 

Un aspecto importante de la etiqueta section es que debe tener un título. La etiqueta section crea una sección de manera explícita en el outline del documento, por lo tanto debemos siempre asignarle un encabezado (h1-h6) ya que si no se le aplicará directamente untitle.

Por lo tanto, una buena forma de identificar cuando es necesario usar una etiqueta section es cuando tengamos la necesidad de aplicar un encabezado.
<article> representa una composición auto-contenida en un documento, página, una aplicación o en el sitio, que se destina a distribuir de forma independiente o reutilizable, por ejemplo, en la sindicación. Podría ser un mensaje en un foro, un artículo de una revista o un periódico, una entrada de blog, un comentario de un usuario, un widget interactivo o gadget, o cualquier otro elemento independiente del contenido.

  • Cuando los elementos <article> están anidados, los internos representan artículos relacionados con el exterior. Por ejemplo, los comentarios de un blog pueden ser elementos <article> anidados al que representa la entrada del blog.
  • Los datos del autor de un elemento <article> pueden ser proporcionados a través del elemento <address>, pero no se aplica a los elementos <article> anidados.
  • La fecha de publicación y el tiempo de un elemento <article> pueden ser descritos con el atributo pubdate atributo de un elemento <time>.
<address>. Es el elemento encargado de contener la información de contacto con los autores del documento.

atributo descripción valor
title Texto informativo o título del elemento. Suele mostrarse a modo de 'tool tip'. Texto legible. Sensible a M/m..
id Le da un nombre al elemento que lo diferencia de todos los demás del documento. Un nombre único. Sensible a M/m.
class Asigna nombres de clases al elemento. Por defecto, clases CSS. Lista de clases separadas por espacio en blanco. Sensible a M/m. cdata
style Permite especificar información de estilo1. Por defecto, estilos CSS. Declaraciones de estilo.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos. Un código de idioma.
dir Indica la dirección de texto y tablas. Uno de los siguientes: 'ltr' o 'rtl'.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.

 <footer>: dentro de footer generalmente se ponen cosas como otras ligas, derechos de autor etc, pero no es exclusivo, podemos usarlos para desplegar lo que necesitemos, siempre y cuando este en el 'pie' de la pagina.

<!DOCTYPE html>
<html lang='es'>
<head>
<meta charset='utf-8' />
<title>Estructura básica de una página web en HTML5</title>
</head>
<body>
  <header>
    <nav>
      <a href='inicio.html'>Inicio</a>
      <a href='contacto.html'>Nosotros</a>
      <a href='opcion1.html'>Opcion</a>
      <a href='opcion2.html'>Opcion</a>
    </nav>
  </header>
  <aside>
    <p>Estas secciones son a menudo representadas como barras laterales o como
       inserciones y contienen una explicación al margen como una definición de
       glosario, publicidad, la biografía del autor,o en aplicaciones web, la
       información de perfil o enlaces a blogs relacionados</p>
  </aside>
  <section>
    <p>Un section es una manera de dividir la página por 'secciones' de tal
       modo que podemos dividir el contenido de esta por temas</p>
    <article>
     <h1>El article es la parte mas importante del sitio</h1>
         <p>Basicamente en el article pondremos lo más importante de la
            página, en orden jerárquico, un article puede tener header y
            footer, sin estropear el diseño.</p>
     </article>
  </section>
  <footer>
    <p> © Derechos reservados</p>
    <p>Contacteme en evaristopacheco@hotmail.com</p>
  </footer>
</body>
</html>
 
 
 

2.5 Elementos basicos: texto, vinculos, listas, tablas, objetos, imagenes y aplicaciones

El HTML (HipertText Markup Language) ó Lenguaje de enlaces hipertexto es un sistema que se encarga de definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El término HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas.
Como cualquier página web está soportada por un archivo de texto, se pueden elaborar, editar o modificar directamente con el bloc de notas, aunque existen programas editores profesionales de páginas web como Adobe Dreanweaver CS5 y programas gratuitos de edición básica como Freelabs, que permiten editarlas con algunas funciones automatizadas a través de botones y menús.
A continuación se presenta una breve descripción de HTML 5, si usted desea conocer más a detalle puede visitar las múltiples páginas en el internet o consultar la guía oficial en w3c.

Sintaxis

Caracteres:

  • Cualquier cadena de caracteres imprimibles que no represente un marcado se representa literalmente, aunque los espacios y tabuladores se reducen a un solo carácter cuando no están dentro de un bloque preformateado <pre>.

Marcadores, marcas o etiquetas (tags):


  • Los marcadores delimitan elementos de un documento como cabeceras, párrafos, etc. La mayoría de los marcadores constan de una marca inicial < ...> , que da el nombre y atributos del elemento, seguida del contenido ó secuencia de caracteres y una marca final </...>.
  • Las marcas iniciales se escriben entre los símbolos '<' y '>' (menor y mayor) y las finales entre '</' y '>' (menor, barra y mayor). Por ejemplo, <h1>Hola Mundo</h1>, indica que 'Hola Mundo' es una cabecera de nivel uno.
  • Algunos elementos sólo tienen una marca inicial (por ejemplo el tag <hr> que representa una línea horizontal y <br> inserta un salto de línea donde se coloque. Puede colocar tantas como desee y se insertará un salto de línea por cada una de ellas. ).


Nombres de etiquetas


  • Los nombres consisten en una letra seguida de letras, dígitos, puntos o guiones. Los ejemplos <h1> y <hr> anteriores son ejemplos de nombres de etiquetas. La longitud de un nombre esta limitada a 72 caracteres en la definición del HTML. Los nombres de elementos y atributos no distinguen entre mayúsculas y minúsculas, pero los nombres de entidades (la representación alternativa de los caracteres) sí.
  • En las marcas, el nombre del elemento debe comenzar inmediatamente después del <.

Atributos:


  • Cuando una marca inicial admite atributos, éstos se escriben a continuación del nombre del elemento. Generalmente los atributos tienen la forma nombre, signo igual, valor del atributo aunque en algunos casos basta con el nombre del atributo. Se pueden poner espacios en blanco antes y después del signo igual.

  • El valor de un atributo puede ser una cadena de caracteres entre comillas (simples o dobles) que no contenga el símbolo de fin de marca '>' o un nombre como los definidos en el apartado anterior. Por ejemplo, en <img src='foto.gif'>, img src es el nombre de la marca que se refiere a insertar una imagen en la página web; y "foto.gif" es el valor que hace referencia al nombre específico de la imagen que queremos incluir.
    Comentarios

  • Una declaración de comentarios comienza con <!--, le siguen uno o varios comentarios y termina con -->. Las etiquetas de comentariose visualizan dentro del código html pero no tiene una traducción hacia el formato final. Es decir, no se visualiza en el navegador cliente.


Formateo de párrafos o bloques:

El inicio de un párrafo se indica con el tag <p> y su final con el tag </p>. El espaciado y los retornos de línea son ignorados por los navegadores que interpretan html.
Para agregar un retorno de línea es necesario usar el tag único <br>.
Elemento <hr /> inserta un línea además de un retorno de línea
<blockquote> y <blockquote> Este tag se usa para escribir una cita textual o un párrafo exacto y que éste se diferencie del resto del texto. El efecto que nos muestra es que crea un margen izquierdo yderecho del texto, para que se diferencie de los demás.

<p>La pareja mexicana de Paola Espinosa y Alejandra Orozco se colgó la medalla de plata en la prueba de plataforma de 10 metros sincronizado de los Juegos Olímpicos de Londres 2012, mientras que la dupla ganadora fue la integrada por las chinas Chen Roulin y Wang Hao.</p> <br> <p>El binomio Espinoza-Orozco sumó 343.32 puntos, por 368.40 de las chinas, en tanto que el bronce fue para las canadienses Roseline Filion y Meaghan Benfeito, con 337.62.</p>

Efecto visual

La pareja mexicana de Paola Espinosa y Alejandra Orozco se colgó la medalla de plata en la prueba de plataforma de 10 metros sincronizado de los Juegos Olímpicos de Londres 2012, mientras que la dupla ganadora fue la integrada por las chinas Chen Roulin y Wang Hao.

El binomio Espinoza-Orozco sumó 343.32 puntos, por 368.40 de las chinas, en tanto que el bronce fue para las canadienses Roseline Filion y Meaghan Benfeito, con 337.62.

 

Etiquetas de caracteres y tipos de letra:

El lenguaje HTML permite asignar formatos de tipos de letra y caracteres. Existen diversos marcadores para indicar que una palabra o frase tiene una connotación especial y es obligatorio poner los marcadores de cierre al final del texto afectado. Estos son algunos de los más utilizados.

Lenguaje HTML Resultado en navegador
<b>texto en negrita</b> texto en negrita
<i>texto en cursiva o itálica</i> texto en cursiva o itálica
<u>texto subrayado</u> texto subrayado
<b><i><u>combinando las tres anteriores</u></i></b> combinando las tres anteriores
<tt>fuente tipo de máquina de escribir</tt> Fuente tipo de máquina de escribir
Subíndice. Por ejemplo H<sub>2</sub>O H2O
Superíndice. Por ejemplo x<sup>2</sup> x2

Tipos de letras

La etiqueta <font> en HTML es obsoleta. Se supone que se eliminara en futuras versiones de HTML. A pesar de su uso cotidiano, evitalo en favor de las hojas de estilos.
Para un documento completo podría usar las fuentes de google con un línea en el head como está:

<link href='//fonts.googleapis.com/css?family=Cuprum:400italic,400,700italic,700' rel='stylesheet' >

Imagenes

Colocar imágenes en nuestra web produce unos resultados asombrosos de una manera muy fácil. El tag básico para colocar una imagen es "img". Este tag, a diferencia de la gran mayoría de los tags de html, no necesita un cierre. El atributo "src" es imprescindible para poder colocar una imagen. Este atributo es el que indica dónde se encuentra alojada la imagen que queremos mostrar. Se escribe así: <img src="ruta">, donde "ruta" es la dirección o la url dónde se encuentra situada la imagen. Solo es posible cargar imagenes gif, jpg y png.
Código Efecto visual
<img alt ='' src='images/moneda.jpg'> Medalla al mérito académico
El tag <img> tiene dos atributos que debemos considerar alt y title, básicamente los dos cumplen la misma función, mostrar un título al estar el mouse sobre la imagen. No todos los navegadores soportan ambos, por ejemplo iExplorer solo soporta title. Para fines de validación es necesario incluir alt=''.
Si la imagen es usada como hipervinculo, el valor por defecto es 1px. Si no requerimos el bordees necesario agregar el atributo border='0' sobre todo si usamos iExplorer de preferencia en una hoja de estilo. Por ejemplo.

img {
   border: 0px;
}


Hiperenlaces


Es la piedra angular de HTML, este tag se utiliza para crear hipervínculos: el texto en cual podemos hacer clic en un navegador para ir a otra página web. La sintaxis es la siguiente:

href

Este atributo específica la localización de un recurso de la Web, definiendo así un vínculo entre el elemento actual (el origen del vínculo) y el destino del vínculo definido por este atributo. El destino de un vinculo puede ser: una página web interna o externa, o un título, imagen, parrafo dentro de la misma página con el vinculo de origen (enlaces internos)

target

Destino del hiperenlace
  • _self: Abrir el enlace en la misma ventana que se encuentra el documento actual (valor por defecto). En el caso que existe un iframe, la ventana se abrira en el mismo marco
  • _blank:independientemente de si el enlace esta o no dentro de un iframe, el valor '_blank' creará una ventana nueva
 <a href='www.itver.edu.mx'>I.T.V</a>

Listas



Listas desordenadas

Están englobadas por las etiquetas <ul>...</ul> (unordered list). Cada uno de los elementos de la lista comenzará con una etiqueta <li>.

 Codigo
<ul>
<li>Café</li>       
<li>Leche</li>
<li>Té</li>
</ul>
 
Visualizacion 

  • Café
  • Leche





2.4 Estructura global de un documento




La estructura básíca de un doumento html5 es:

<!DOCTYPE html>
<html lang='es'>
<head>
  <meta charset='utf-8' />
  <title>Título de la página</title>
  <meta name='description' 
    content='Descripción de la página'>.
</head>
<body>
</body>
</html>

Creación de documentos HTML

  • Los documentos HTML son archivos de texto legibles ASCII con códigos de composición especiales embebidos o incorporados en el texto. Esto significa que los archivos HTML contienen letras, números, signos de puntuación, etc., más los códigos de composición HTML. Insistimos, se pueden leer o modificar directamente desde el bloc de notas.

  • Aunque no es obligatorio, es muy útil utilizar la extensión .html al archivar el documento HTML desde el bloc de notas. Así podrás saber luego de que tipo de documento se trata. Si utilizas un procesador de texto normal debes utilizar la opción Guardar como texto ASCII.
Aspecto de documentos HTML:

  • Lo que distingue a un archivo HTML de cualquier otro archivo de texto es la presencia de códigos de composición, denominados marcadores HTML. Estos códigos se incluyen en el documento y sirve para controlar el formato y la presentación del documento final. Los códigos también sirven para crear hipervínculos con otros documentos.

  • Los códigos de composición se acotan con unos caracteres especiales, que permiten diferenciarlos del texto del documento propiamente dicho. Estos símbolos son los corchetes angulares < y >. Estos códigos no distinguen entre mayúsculas y minúsculas aunque la normalización W3C indique que debemos usar minúsculas.

  • Los distintos navegadores muestran sus documentos de formas distintas: varía el color, el tipo de fuente, el tamaño, etc. Por lo tanto debes pensar en tu documento como una entidad lógica y no física, reconociendo que el aspecto físico puede variar de un visor a otro y de un PC a otro. Por ejemplo, si introduces tipos de letra especiales (que se salgan de los corrientes que tienen todos los PCs, en Arial, Courier, Times o Helvetica) dentro de tu página web, cuando alguien la "vea" en Internet, visualizará esos tipos de letra si están instalados en su PC, si no los verá con el tipo de letra que tenga cargado por defecto en su navegador.

    Marcadores o etiquetas HTML obligatorios:

  • Marcador <html>: todos y cada uno de los documentos HTML deben empezar y terminar con este marcador que sirve para indicar que se trata de un documento HTML. En el marcador de cierre es obligatoria la barra inclinada (/html).
    En html 5 la prímera línea es <!DOCTYPE html>

  • Marcador <head>: los documentos HTML se dividen en dos partes, la cabecera y el cuerpo. Los navegadores Web necesitan distinguir entre cabecera y cuerpo para poder interpretar correctamente los documentos. En general la cabecera del documento (head) incluye la información general sobre el documento. Este marcador tienen su marcador de terminación con la barra inclinada (/head).

  • Marcador <body>: incluye el contenido real del documento (body o cuerpo). Este marcador tiene también su marcador de terminación con la barra inclinada </body>.

Cabecera del documento

Contiene información general sobre el documento HTML. Es obligatorio incluir el marcador <title>, el resto de los marcadores son opcionales.
Marcador <title>
Los navegadores muestran el título de cada uno de los documentos HTML que encuentran. El título que aparece se toma del contenido de este marcador. Este marcador debe aparecer con su pareja con la barra inclinada </title> y dentro de la sección <head>

<title>Esto es el título de la página</title>

Marcador <meta>

Las metatags son etiquetas html que se incorporan en el encabezado de una página web y que resultan invisibles para un visitante normal, pero de gran utilidad para navegadores u otros programas que puedan valerse de esta información.
Su propósito es el de incluir información (metadatos) de referencia sobre la página: autor, título, fecha, palabras clave, descripción, etc. Esta información podría ser utilizada por los robots de búsqueda para incluirla en las bases de datos de sus buscadores y mostrarla en el resumen de búsquedas o tenerla en cuenta durante las mismas y será invisible para un visitante normal.
Estas etiquetas también se usan para especificar cierta información técnica de la cual pueden valerse los navegadores para mostrar la página, como el grupo de caracteres usado, tiempo de expiración del contenido, posibilidad de dejar la página en cache o calificar el contenido del sitio ("programación web", "Oracle", etc.).

Meta tag Descripción
<meta content='copyright' name='autor'> Indica quien posee los derechos de contenido de la página.
<meta charset='utf-8'> Indica al servidor que el recurso es un documento del tipo html. Que está escrito en texto plano y el conjunto de caracteres con los que se ha escrito el contenido de la página.
<meta http-equiv='refresh' content='30; URL=./indice.html' /> Carga la URL en content segundos. En este caso en 30 segundos . No es reconocido por todos los navegadores,
<meta name='Description' content='El SGML es un sistema'  /> Este tag lo usan los buscadores para dar una descripción del contenido de la página.
<meta name='Robots' content='all'/> Determina si los robots indezaran la página. Los posibles valores de content son:
all para que el robot tenga en cuenta esta página y pueda seguir los links contenidos en la misma (este es el valor predeterminado), noindex para que no la tenga en cuenta.

A manera de ejemplo se muestra el siguiente código


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>html5</title>
</head>
<body>
  <p>Hola mundo desde el ITV</p>
</body>
</html>
 
 
 


2.3 Tipos de datos basicos




Los tipos de datos se dividen en tipos de datos simples (o primitivos) y tipos de datos complejos. Los tipos de datos simples se pueden utilizar en los valores de los atributos y en los elementos que contienen sólo datos carácter. Existe una serie de tipos de datos definidos en el estándar y que por tanto se pueden usar directamente en los esquemas. Además de estos, el usuario puede definir sus propios tipos de datos, tanto simples como complejos, como veremos más adelante.
Existen 19 tipos de datos simples predefinidos primitivos, que se pueden agrupar en 4 categorías:

Tipos cadena


  • string: secuencia de longitud finita de caracteres*
  • anyURI: una uri estándar de Internet
  • NOTATION: declara enlaces a contenido externo no-XML
  • Qname: una cadena legal Qname (nombre con cualificador)

Tipos binario codificado


  • boolean: toma los valores “true” o “false” *
  • hexBinary: dato binario codificado como una serie de pares de dígitos hexadecimales
  • base64Binary: datos binarios codificados en base 64

Tipos numéricos


  • decimal: número decimal de precisión (dígitos significativos) arbitraria *
  • float: número de punto flotante de 32 bits de precisión simple *
  • double: número de punto flotante de 64 bits de doble precisión *

Tipos de fecha/hora


  • duration: duración de tiempo
  • dateTime: instante de tiempo específico, usando calendario gregoriano, en formato "YYYYMM-DDThh:mm:ss"
  • date: fecha específica del calendario gregoriano, en formato "YYYY-MM-DD” *
  • time: una instancia de tiempo que ocurre cada día, en formato "hh:mm:ss"
  • gYearMonth: un año y mes del calendario gregoriano
  • gYear: año del calendario gregoriano
  • gMonthDay: día y mes del calendario gregoriano
  • gMonth: un mes del calendario gregoriano
  • gDay: una fecha del calendario gregoriano (día)
De cada uno de estos tipos primitivos se pueden obtener tipos derivados, como se muestra en el siguiente diagrama, sacado de la recomendación [3]:
Es posible definir tipos de datos simples a partir de estos tipos predefinidos utilizando las llamadas facetas.




2.2 Representacion de documentos




Los lenguajes de marcas, también denominados lenguajes de marcado o lenguajes de descripción de documentos, construyen un conjunto de reglas que definen todo aquello que es parte de un documento digital, pero que no pertenece al texto del mismo. Los lenguajes de marcas no son lenguajes de formato similares a los lenguajes que se usan en Internet como los de descripción de páginas (archivos PostScript, archivos .pdf, etc.) ni son lenguajes de  programación (Java, Perl, C++…), sino que se trata de lenguajes orientados a definir la estructura y la semántica de un documento. En realidad, más que de lenguajes, podríamos hablar de metalenguajes o sistemas formales mediante los cuales se añade información o codificación a la forma digital de un documento bien para controlar su procesamiento, bien para representar su significado.

En un documento existen distintos niveles de información: por un lado, los datos que conforman el contenido de un documento (caracteres de contenido), y por otro, una información superpuesta al contenido, que es lo que constituye el etiquetado, marcado o “markup” (caracteres de etiquetado).

Un lenguaje de marcado cumple con dos objetivos esenciales a la hora de diseñar y procesar un documento digital :
  •  Especifica las operaciones tipográficas y las funciones que debe ejecutar el programa navegador/visualizador sobre dichos elementos. Las operaciones tipográficas son instrucciones de formato que se aplican a cada uno de los elementos de un documento digital como, por ejemplo, imprimir un título en negrita y a un determinado tamaño.
  • Separa un texto en los elementos de los que se compone, como por ejemplo un párrafo, un capítulo, un encabezamiento, etc. 


Así, pues, hay 2 tipos de marcación: 
  •  específica: describe cómo ha de formatearse el documento: fuente, tamaño, color, etc.
  •  estructural: describe la estructura del documento: titular, párrafo, etc.

En general los lenguajes de marcado siguen una sintaxis basada en el uso de marcas o etiquetas: una etiqueta que indica el principio de un elemento y otra el final del mismo.


Por regla general, la mayor parte de autores distinguen 2 tipos básicos de lenguajes de marcado:


  • Lenguaje de marcado de procedimiento o procesado: Las anotaciones o marcas de los lenguajes de procedimiento describen la forma y el significado de las operaciones tipográficas que van a ser aplicadas a cada uno de los elementos del documento. Por ejemplo, una regla de un lenguaje de procedimiento indicaría que el título de la sección de un texto debe ser impreso en una sola línea con una fuente de seis puntos más grande que el resto del texto, con objeto de que los lectores puedan inferir que es el título. Se refiere, pues, a la apariencia física o formato (fuente, estilo de letra, tamaño, etc.) tanto del documento en pantalla como del documento impreso.
  • Lenguaje de marcado estructural o descriptivo: En los lenguajes estructurales las marcas o anotaciones únicamente describen la estructura lógica del documento digital y/o la descripción del contenido, no su tipografía.

Aunque lo cierto es que existen 3 utilizaciones básicas de los lenguajes de marcas: los que sirven principalmente para describir el contenido (por ejemplo, las bases de datos), los que sirven para definir el formato (por ejemplo, los procesadores de textos) y los que realizan las dos funciones indistintamente (por ejemplo, el lenguaje HTML).








2.1 Introduccion



HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido...).

La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se quieren dar (especificar los lugares del documento donde se debe poner cursiva, negrita, o un gráfico determinado) y dejar que luego la presentación final de dicho hipertexto se realice por un programa especializado (como Internet Explorer, Netscape, Safari entre otros).

Un documento HTML comienza con la etiqueta <html>, y termina con </html>. Dentro del documento (entre las etiquetas de principio y fin de html), hay dos zonas bien diferenciadas: el encabezamiento, delimitado por <head> y </head>, que sirve para definir diversos valores válidos en todo el documento; y el cuerpo, acotado por <body> y </body>, donde reside la información del documento.

La versión actual es HTML 5 aun no liberada, ni soportada por todos los navegadores. 


Soporte estándares actuales entre otras:
  • HTML 4
  • XHTML 1
  • DOM Nivel 2 (DOM = Document Objetc Model)

Diferencias del código de HTML5 con lenguajes anteriores

Algunas de las diferencias más notables son las siguientes:

No es necesario el cierre de las etiquetas img, br, hr, input, etc.

Por ejemplo:


  <br /> ahora se sustituye por: <br>
  <hr /> por: <hr>
  <img src=''……/> por: <img src=''……> 
  <input …./> por: <input ….>
 
  • Se puede usar tanto minúsculas como mayúsculas en el código a diferencia del XHTML que solo admite minúsculas.
  • El Doctype o declaración del documento está completamente minimizado, en HTML5 solo es necesario emplear: <!DOCTYPE html>
  • Introduce nuevos marcadores para sumarlos a los existentes <div> en usos específicos, por ejemplo: <nav>, <footer>, <audio>, <video>, etc.

Los elementos admitidos por html5 son: 


[  a,  abbr,  address,  area,  article,  aside,  audio,  b,  base,  bb,  bdo,  blockquote,  body,  br,  button,  canvas,  caption,  cite,  code,  col,  colgroup,  command,  datagrid,  datalist,  dd,  del,  details,  dfn,  dialog,   div,  dl,  dt,  em,  embed,  fieldset,  figure,  footer,  form,  h1,  h2,  h3,  h4,   h5,  h6,  head,  header,  hr,  html,  i,  iframe,  img,  input,  ins,  kbd,  label,   legend,  li,  link,  map,  mark,  menu,  meta,  meter,  nav,  noscript,  object,   ol,  optgroup,  option,  output,  p,  param,  pre,  progress,  q,  rp,  rt,  ruby,   samp,  script,  section,  select,  small,  source,  span,  strong,  style,  sub,   sup,  table,  tbody,  td,  textarea,  tfoot,  th,  thead,  time,  title,  tr,  ul,   var,  video ]
 



HTML5 no es un estándar aprobado por el W3C, aunque se puede validar correctamente las páginas usando el Validador W3C de este organismo.
Algunas de sus ventajas son:

  • Código más sencillo y simplificado, las páginas cargan más rápido en el navegador.
  • La gran mayoría de los navegadores de los teléfonos Smartphone y las tabletas, son compatibles con HTML5
  • Los plugins, widgets y botones que ofrecen los desarrolladores de las redes como Facebook, Twitter y otras, escritos en HTML 5 funcionan excelentemente, con más opciones que los clásicos en XHTML o que los iframes.
  • Es posible insertar directamente videos en las páginas sin tener que acudir a los iframes o usar la etiqueta object.
  • HTML 5 incluye etiquetas orientadas principalmente a los buscadores, para facilitarles comprender el contenido de las páginas, lo que nos beneficia, por ejemplo: header, footer, article, nav, etc.
  • Permite la Geolocalizacion del usuario.
  • Otras de las razones es el empleo del microformato en las páginas web, que algunos son totalmente incompatibles con otros lenguajes por lo que no validan correctamente a no ser que se use HTML5.



Unidad II Lenguaje de marcado


2.1.-  Introduccion.
2.2.-  Representacion de documentos.
2.3.-  Tipos de datos basicos.
2.4.-  Estructura global de un documento.
2.5.-  Elementos basicos: texto, vinculos, listas, tablas, objetos, imagenes y aplicaciones.
2.6.-  Estructura y disposicion.
2.7.-  Formularios.

domingo, 22 de marzo de 2015

1.4 Planificacion de aplicaciones web




A menudo antes de empezar un proyecto no tenemos claro cúal es el objetivo del mismo o qué pretendemos alcanzar por eso esta pequeña lista te puede ayudar a la hora de planificar un proyecto.

Planificar una aplicación web implica pensar y definir muchas cuestiones de importancia: 


1. Planificar el futuro

Puede sonar un poco duro que nos tengamos planear el futuro de algo que aún no existe pero es así, que pasa si en un futuro tuvieramos problemas de escalabilidad, y sí tuvieramos que migrar las bases de datos de MySql a Oracle, de una buena planificación depende la dificultad en un futuro de realizar cambios en la plataforma que sostiene nuestra aplicación. 


2. Documentación

Documenta todo lo que puedas tu aplicación en especial aquellas partes de la misma que hayan requerido un mayor tiempo de desarrollo, en un futuro cercano te librará de más de un quebradero de cabeza. 


3. No empiezes por los pequeños detalles

A menudo es más sencillo plantearse el desarrollo de pequeños servicios cómo pueden ser los RSS o una galería de imágenes, pero es fundamental comenzar por lo que vendrá a ser la base de nuestra aplicación, de este modo podremos ir completando nuestra aplicación en un orden lógico, primero los cimientos.


4. Diseño de la interfaz

Esta entrada puede que te ayude en esta parte, es importante conseguir un buen diseño para nuestra interfaz, es importante conseguir un interfaz que se atractivo y útil para la gran mayoria de los usuarios, lo más importante es llegar a conectar con el usuario y la mejor manera es ofrecerle la mayor cantidad de información posible para que se llegue a sentir parte del proyecto pero todo esto muchas veces no lo llegamos a conseguir por una mala elección en la combinación de los colores que se integran en nuestra interfaz. 


5. Evita construirte librerías o frameworks innecesarios

Muchas personas siempre sostienen que es mejor que cada desarrollador utilize sus propias librerías, pero la realidad es que en muchas ocasiones esto supone una gran pérdida de tiempo, es mejor buscar una librería o framework que se parezca lo más posible a lo deseado que desarrollarlo por ti mismo. 


6. Ten un plan de proyecto

Asegúrate de que cada desarrollador que trabaje en el proyecto sepa qué es lo que debe de hacer y cuándo tiene que hacerlo, teniendo todo esto redactado en un documento te ayudará a identificar problemas.

7. Elige el lenguaje adecuado

Ya sabes que hay numerosas discusiones sobre ¿Cúal es el mejor lenguaje de programación?, la respuesta a menudo es depende de para que quieras utilizarlo, por eso asegúrate de escoger el lenguaje adecuado. 


8. Evita las distracciones

Optimiza tu tiempo, cuando estés trabajando que nada te distraiga, ni llamadas telefónicas, ni clientes de mensajerías instantáneas, proponte un buen número de horas al día de trabajo aislado dedicado al proyecto. 


9. Sigue un buen control de calidad

Muchas veces nos equivocamos al planificar los tiempos de proyecto y esto lleva a menudo a los desarrolladores a tener que escribir “código sucio”, esta es una buena opción si lo que quieres es una demo de la aplicación funcionando pero ea actitud te traerá problemas en el futuro. 


10. Plantéate los pasos a seguir despues del desarrollo

Ten en cuenta que está fase de desarrollo algún día deberá acabar, estudia con qué frecuencia se deberá actualizar y que se necesita para que este funcione.