lunes, 23 de marzo de 2015

Lenguaje de Marcado

2.1 Introducción

Un lenguaje de marcas es un conjunto de palabras o marcas que se colocan junto al texto de un documento para especificar una propiedad del mismo. 
Ejemplo: <negrita>Diseño de páginas web</negrita> <título>Diseño de páginas web</título>
HTML es un lenguaje de marcas orientado a la publicación de documentos en Internet. La mayoría de las marcas son semánticas. HTML es un lenguaje extensible , al que se le pueden añadir nuevas características, marcas y funciones.

Los documentos HTML están formados por una serie de bloques de texto con una entidad lógica (titulares, párrafos, listas, ...). La interpretación de estas entidades se deja al navegador, lo cual da una gran flexibilidad a la presentación del documento, que puede ser mostrado, por ejemplo, en terminales gráficos o de texto.

El HTML, es el lenguaje que permite diseñar los hipertextos. Hoy en día, la mayoría de los procesadores de textos disponen de opciones para guardar los documentos en este formato, por lo que no presenta dificultad.

Si queremos incluir efectos complicados, con imágenes en tres dimensiones, sonidos, imágenes en movimiento, consultar bases de datos, etc. entonces debemos utilizar un verdadero lenguaje de programación, como Java , ideal para Internet pues tiene la ventaja de que funciona independientemente de la plataforma (mac, pc, unix, etc.) donde se ejecuta.

Elementos

Cada elemento de un documento HTML consta de una marca de comienzo, un bloque de texto y una marca de fin. <MARCA>bloque de texto</MARCA>. Por ejemplo, <H1>Titular de nivel 1</H1>
Estos elementos se denominan contenedores , porque contienen un bloque de texto entre las dos marcas. También existen elementos vacíos , que no afectan a bloques de texto y, por tanto, no contienen marca de fin.
Por ejemplo, línea 1 <BR> línea 2

Atributos

Muchos elementos tienen atributos que definen propiedades del elemento: <MARCA ATRIBUTO="VALOR"> bloque de texto </MARCA>. Por ejemplo, <H1 ALIGN="CENTER">Titular de nivel 1 centrado</H1>
Es recomendable encerrar los valores de los atributos entre comillas dobles. En algunos casos es además obligatorio (por ejemplo, si contienen espacios en blanco).

Distinción entre mayúsculas y minúsculas

HTML no distingue entre mayúsculas y minúsculas. Cuando es importante hacerlo, cosa que puede ocurrir con los valores de algunos atributos (por ejemplo, nombres de ficheros), es preciso encerrar el valor entre comillas dobles. Por ejemplo, <IMG ALT="" SRC="BolaRoja.gif">

Comentarios

Los comentarios se escriben en HTML de la siguiente forma: <!-- Esto es un comentario -- >. Los caracteres de inicio del comentario, <!-- deben ir juntos, pero se permiten espacios entre los -- y el > del final. Los comentarios pueden expandirse varias líneas, aunque no es conveniente porque algunos visualizadores pueden no interpretarlos.

Interpretación de espacios, tabulaciones y retornos de carro

Los espacios, tabulaciones, líneas en blanco y retornos de carro del documento HTML se ignoran, tomándose como un único espacio en blanco. Esto permite añadir espacios para aumentar la claridad del documento. Cuando se quiere forzar un espacio en blanco, se hace de la siguiente forma: &nbsp;

Estructuración

HTML es un lenguaje estructurado. Existen unas reglas estructurales sobre dónde pueden y no pueden ir los elementos. Por ejemplo,
  • Ciertos elementos no pueden contener otros elementos. Por ejemplo, no es correcto colocar un titular dentro de otro. Además, tampoco tiene sentido hacerlo. <H1><H2>Texto</H2></H1>
  • Los elementos no se pueden solapar. No es correcto escribir <EM><H1>Texto</EM></H1>

Estructura de un documento HTML

<HTML>
<HEAD> ... Encabezamiento del documento </HEAD>
<BODY> ... Cuerpo del documento </BODY>
</HTML>
Elementos más importantes del encabezamiento : TITLE y META.
<TITLE>Título de la página</TITLE>
<META NAME="description" CONTENT="Página dedicada al diseño eficiente de páginas web para internet mediante el lenguaje HTML y otras herramientas auxiliares">
<META NAME="keywords" CONTENT="web diseño HTML hipermedia">
<META HTTP-EQUIV="refresh" CONTENT="5; URL=http://dominio/pagina2.html">
<META HTTP-EQUIV="expires" CONTENT="Fri, 05 Jan 2001 13:00:00 GMT">
El cuerpo del documento viene a continuación del encabezamiento, y contiene todo el texto y material del documento que se va a mostrar.
<BODY BGCOLOR="color" BACKGROUND="fichero imagen"
TEXT="color" LINK="color" VLINK="color" ALINK="color">
...
</BODY>
El formato de los colores se puede especificar de dos maneras distintas:
  • Mediante el nombre del color. Por ejemplo, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow (y otros 124 colores extendidos).
  • Mediante la intensidad , en hexadecimal, de los componentes RGB (rojo, verde, azul) del color: #RRGGBB (siendo 00 la intensidad nula y FF el máximo brillo).
2.2. Representación de documentos.


La representación de documentos es útil para poder procesarlos y recuperar

información necesaria.

El objetivo de la representación de los documentos es el de traducir los mismos

a términos del sistema, es decir la codificación necesaria con la cual este
comprenda la información y la represente a los usuarios que la soliciten, los
documentos son alojados en un servidor el cual tiene el soporte necesario para
contenerlos y ejecutarlos cuando sea requerido. Esta representación se lleva a cabo mediante simplificaciones y generalizaciones que presentarán una vista

lógica de los mismos. 

Cuando se habla de la representación de documentos HTML, se trata desde otro
enfoque, ya que se revisan las estructuras del diseño, el peso del mismo por la
organización de datos y contenidos. La información que se requiere para el
análisis del mismo se encuentra en el diseño maestro de la misma página o
documento en el que se determina las características de la estructura, como; el
número de páginas principales, el contenido de la página maestra, el número de
menús existentes, las opciones dentro de cada menú, las ramificaciones de cada
página y el diseño que tendrá cada contenido desde el marco principal o las
divisiones que mostrará cada uno.


2.3. Tipos de datos básicos. 

Un tipo de dato es una propiedad o atributo que determina las características y
dominios, funciona en operaciones a las cuales se pueden aplicar, es decir, los
tipos de datos varían en junto con el lenguaje de programación que se utiliza, al
igual que sus estructuras lógicas debido a los compiladores de información que
determina cada software. Los tipos de datos pueden ser;
• Números enteros
• Números reales
• Valores lógicos
• Texto
• Nulo
• Etc.
Es importante conocer todos los tipos de datos para saber en qué lugar se
pueden aplicar de mejor forma y obtener resultados óptimos.

¿Para qué son los tipos de datos básicos?

Los tipos de datos básicos se clasifican según la forma en que se utilicen y
pueden cambiar conforme el lenguaje en que se apliquen, sin embargo existe
una gran similitud entre todos estos ya que la mayoría se basan en C++.
Algunos lenguajes no se basan en C++, pues su estructura de programación es
más sencilla y no requiere de una lógica tan grande en los scripts, por ejemplo
HTML, tiene una sencilla aplicación que solo describe la formación del
documento con etiquetas las cuales solo contienen el nombre de lo que se está
realizando.

Actualmente los tipos de datos son aplicados en diferentes medios y plataformas,
es decir, debido a la naturaleza de los datos se crean aplicaciones que son
utilizadas en la web, calculadora, sistemas operativos, aplicaciones móviles, etc.
Lo que permite tener una gran variedad en el desarrollo y gran potencia de uso
en las mismas ya que con los scripts, se pueden mejorar o potenciar los
sistemas sin tener que agregar más piezas de hardware. Por ejemplo, la
empresa Nvidia® en los sistemas gráficos que utiliza, aplican núcleos de
procesamiento los cuales no se aprovechaban concretamente, por lo que en el
cambio y evolución de tecnologías se desarrolla un sistema llamado CUDA® el
cual es una pieza de código que aprovecha los núcleos del sistema grafico y los
potencia mejorando el rendimiento de las vistas 3d y aumentando la velocidad
de sistema.

¿Qué quiere decir esto?
Lo que se quiere dar a notar, es que la programación dependiendo de los tipos
de datos puede mejorar o no un sistema, cuando se comprenden los datos es
fácil entender el desarrollo de cualquier script. Los datos actualmente se utilizan
para aplicaciones web, gracias a la evolución de los dispositivos móviles, pues la
demanda aumenta cada día, estos datos pueden formar mapas, datos de geo
localización, información de consultas médicas en tiempo real, etc.
Algunos de los tipos de datos más utilizados son; numero enteros, números
reales, valores lógicos, strings, nulo, double, byte, etc.

2.4. Estructura global de un documento.

La estructura de un documento nos permitirá conocer el inicio y el final del
mismo, sin dejar a un lado los contenidos, los tamaños de la hoja y el margen
con el que contará y se divide en zonas principales que son;

• Cabeza
• Titulo
• Cuerpo

Dentro de los apartados el contenido el distinto y puede manejar un número
mayor de etiquetas y clasificaciones que se complementas con lenguajes de
programación como java, CSS3 y otros más. Todo lo que se encuentra dentro de
este documento se puede localizar mediante exploradores de internet siempre y
cuando se cumpla con los requerimientos de localización de documentos.
Las características de los documentos se pueden modificar dependiendo del
lenguaje de programación con el que se trabaje, es decir, no es la misma
estructura de un documento XML, HTML, PHP, MYSQL, SAP, las diferencias se
notarán en la sintaxis de cada uno y las instrucciones y manejos de códigos con
los que se cuenten.
Al hablar de un documento en general, sin intervenir en HTML o cualquier
lenguaje de programación, podemos notar que la estructura es la misma, cuenta
con un título o encabezado, el contenido o cuerpo y dentro del contenido se
puede aplicar información adicional como imágenes, citas, tablas, etc.
Es importante conocer los lenguajes de programación que se pueden acoplar a
otros y la codificación que requiere como UTF8 o ASSCI, para saber los riesgos
de incompatibilidad posibles dentro de cada elemento.

2.5. Elementos básicos: texto, vínculos, listas, tablas, objetos, imágenes y aplicaciones


Los elementos básicos con los que cuenta un documento HTML, son el medio
por el cual el usuario tiene interacción con la información, los elementos que son
más utilizados son;
Vínculos LENGUAJES DE PROGRAMACIÓN WEB (PHP, HTML5) 5
• Imágenes
• Objetos
• Aplicaciones

Actualmente con evolución de la programación de elementos se pueden apreciar
inclusive animaciones, videos, nuevos elementos como la realidad aumentada y
uso de más widgets.
Todos estos elementos son incluidos en el documento mediante etiquetas en el
código fuente, puede crearse todo de manera manual o con el apoyo de software
de diseño que facilita la creación y modificación de los elementos.
Algunas de las etiquetas que se utilizan para definir los elementos son;

• <div align=”center”>texto centrado</div>
• <U>texto subrayado</U>
• <a href="http://www.htmlquick.com/es/reference/tags/a.html">
• <object type="application/x-shockwaveflash"data=http://direccionweb.comstyle
="width: 425px; height:350px;" >
• <img src="imagen.gif">

2.6. Estructura y disposición. 



<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.


<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
Ejemplo: Estructura básica de una 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 manny.fco@hotmail.com</p>
  </footer>
</body>
</html>
















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:

    

      

    1. 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. 
      2. 

    2. 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) 
      3. 

    3. target nos permite mostrar el resultado en la ventana deseada:
      4. 

    

      

    • 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>

    


    
Fuentes

    

    Fuentes
    

    

    

    [Videos de Muestra(Los videos son tomados de YouTube, no son de mi autoria)]
    

    

    

    video
    

    

    video
    

    

    video
    

    video
    

    

    

    

    

    

    

    

    

    

Publicado por



en













    


    

    

    



    

    



    

    

    

    


    No hay comentarios:
    

    

    

    

    

    

    


    Publicar un comentario
    

    

    





    

    

    

    

        
    
      

    


    

    

    
Suscribirse a:
Enviar comentarios (Atom)