TAGS de HTML

HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. Se trata de la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto, que podría ser traducido como Lenguaje de Formato de Documentos para Hipertexto.

Se trata de un formato abierto que surgió a partir de las etiquetas SGML (Standard Generalized Markup Language). Concepto traducido generalmente como “Estándar de Lenguaje de Marcado Generalizado” y que se entiende como un sistema que permite ordenar y etiquetar diversos documentos dentro de una lista. Este lenguaje es el que se utiliza para especificar los nombres de las etiquetas que se utilizarán al ordenar, no existen reglas para dicha organización, por eso se dice que es un sistema de formato abierto.

EL HTML se encarga de desarrollar una descripción sobre los contenidos que aparecen como textos y sobre su estructura, complementando dicho texto con diversos objetos (como fotografías, animaciones, etc).

Es un lenguaje muy simple y general que sirve para definir otros lenguajes que tienen que ver con el formato de los documentos. El texto en él se crea a partir de etiquetas, también llamadas tags, que permiten interconectar diversos conceptos y formatos.👌

S I N T A X I S

Para la escritura de este lenguaje, se crean etiquetas que aparecen especificadas a través de corchetes o paréntesis angulares: < y & >;. Entre sus componentes, los elementos dan forma a la estructura esencial del lenguaje, ya que tienen dos propiedades (el contenido en sí mismo y sus atributos). Por otra parte, cabe destacar que el HTML permite ciertos códigos que se conocen como scripts, los cuales brindan instrucciones específicas a los navegadores que se encargan de procesar el lenguaje. 

Entre los scripts que pueden agregarse, los más conocidos y utilizados son JavaScript y PHP. El marcado estructural es el que estipula la finalidad del texto, aunque no define cómo se verá el elemento. El marcado presentacional, por su parte, es el que se encarga de señalar cómo se verá el texto más allá de su función. Para conocer el código HTML que utiliza una página web, hay que seleccionar Ver código fuente en nuestro navegador (como Internet Explorer o Mozilla Firefox). Al elegir esta opción, se abrirá el editor de texto con el código HTML de la página que se está visualizando.

DISEÑO Y ELABORACIÓN DE PAGINAS WEB

DISEÑO Y ELABORACIÓN DE PAGINAS WEB

1 Desarrolla paginas web estáticas

RESULTADO DE APRENDIZAJE:

Determina la estructura del sitio web con base en las necesidades, elabora paginas web haciendo uso del lenguaje de etiquetas, y construye hojas estilo encascada 

2 Desarrollo de paginas web dinámicas 

RESULTADO DE APRENDIZAJE:

Implementa a las paginas web el codigo en lenguaje Script y establece en base de datos en paginas web 

ACTIVIDADES DE EVALUACIÓN:

Elabore la justificación y estructura del sitio web de acuerdo con lo que el cliente requiere 

EVIDENCIAS A RECOPILAR EN LA RUBRICA:

• Practicas electrónicas e impresas
• Pantalla o captura de la practica
• Sitio personalizado por alumno o equipo

NGCT-603

E) DETERMINACIÓN DE ELEMENTOS DE NAVEGADORES

Hay 11 elementos que conforman el sistema de navegación:

1- Menú general.

2- Pie de página.

3- Barra corporativa.

4- Ruta de acceso.

5- Fecha de publicación.

6- Botón de inicio/ home.

7- Mapa de sitio.

8- contacto.

9- Buscador.

10- Botón de ayuda. 

11- Botón de imprimir.

Estructura del Menú

En una página web debemos usar menús son listas de enlaces a otras páginas el menú se coloca en la parte superior o en el logo, debe ser ligero el contenido, suele producir efectos más visuales.

 Definicion de diseño visual

Se requiere a la forma como presentamos la información a traves del aspecto visual

Ideas básicas para un buen diseño

Comodidad para que nos visita a traves del texto las imágenes la animación etc.

La comodidad para el autor se refiere a la facilidad para modificar o actualizar nuestra pagina

Acessibilidad

en el aspecto técnico nuestra pagina tiene que cumplir con ciertos estándares, que sea compatible navegadores antiguos y actuales y que pueda verse en cualquier aparato que se conecte a internet

Que sea fácil de usar, transmitir información que sea bonito y original que sea simple para el usuario

Diseño de las estructuras en la páginas

En esta fase se describe los componentes y ubicación de los elementos lo ideal es dibujar nuestra pagina antes de hacerla crear bocetos borradores etc..los borradores aprueban cuando el boceto esta terminado y esto da paso a la ultima fase llamada maqueta del diseño que como su nombre lo dice es la parte como va a quedar nuestra pagina 

D) DISEÑO DE LA ESTRUCTURA DEL SITIO

Consiste en 3 etapas: 

1- Definir la estructura, mapas del sitio.

2- Definir el árbol de contenidos

3- Definir los sistemas para que avancen área vez de sus contenidos.

Elaboración del mapa del sitio

El mapa del sitio, o el site mapa como su nombre lo dice es una representación gráfica o textual de un sitio web equivalente al índice de un sitio y consta de una sola página. En HTML mostrando la estructura del sitio directorios, archivos y como está en lazados el mapa del sitio de la navegación a nuestros usuarios a si como los buscadores.

Características de un mapa del sitio en HTML 

• Debe  de ser claro
• Debe ser Jerarquizado 
• Con títulos descriptivos 
• Cortos 
• Agradables a la vista 

Definir el árbol de contenidos

Es un diagrama que muestra de manera práctica en cuanto a secciones tendrá el sitio de desarrollo y cuentos niveles habrá de cada uno.

Tipos de árboles

El de organización que agrupa los contenidos de manera que se organiza la institución y el árbol funcional que agrupa los contenidos según las tareas de la página.

Definición en los sistemas de navegación.

Son los que generan los sistemas de acceso a los contenidos del sitio es decir la forma de en qué navegan los usuarios sin perderse y se refieren a 2 elementos muy importantes;

1- Elemento textual, lo que tenga que ver con textos guia, enlaces menús etc...

2- Elementos con textual, lo que está basado en botones, imágenes, etc todo esto si se cuida visualmente ayudan al usuario a no perderse.

C) DETERMINACIÓN DE LA INFORMACIÓN DEL SITIO

Tematica del sitio: 

"La idea de crear un sitio web es que vamos a publicar o difundir algo al mundo"

El tema que elejimos para nuetrapagina tiene que llevar introducion o imagenes sobre lo que vamos a hablar o difundir  ytiene que haber una mision o vision para definir los objetyivos de nuetrapagina debemos saber que mensaje queremos transmitir y hacernos la pregunta para que se publica este sitio y de esa manera establece mas nuestro objetivo.

Supongamos que vemos una pagi na web donde la imagen centra es la imagen entonces para que publicaramos un sitio que hable de animales.

Elaboracion del objetivo de la pagina 

si existen mas de uno hay que hacer una lista del mas importante al menos, esto nos sirve para que  nuestra pagina este mejor visualmente. Al hablar de la audencia publica quiere decir aquel tipo de personas queremos que llegue a nuestra pagina por ejemplo si vamos a subir videojuegos si vamos a descargar nuetrapublico en la mayoriasera   joven si el contenido de nuestra pagina trata de decoraciones para la casa nuetro publico sera de adultos. La audiencia a quien va dirijidanuetrapagina se dividen en 2 tipos de personas las de capacidad tecnica que son los que saben de computacion informatica o que saben descargar en otro tipo de audiencia son los de capacidad fisica es decir personas que batallan para ver, las que le fallan las muñecas de las manos etc...

Contenidos

Esta informacion que debe llevar nuestra pagina es decir un organigrama de la empresa o institucion, horario de atencion , telefonos, etc..ademas de productos o servicios, noticias, etc. debemos agregar formulario de contacto, correo electronico, mapa de sitio, etc,,

B) COMPARACION DE USO DE ESTANDARES EN EL CODIGO DE PROGRAMACION

Una pagina web es accesible para todo el mundo cuando se puede navegar, independientemente si la persona es discapacitada o no  las paginas web de las dependencias del gobierno en casi todos los paises cumplen con ciertos estandares de acceso.

Esto aplica a personas con vista cansada, que carezcan de la vista , problemas en las muñecas etc...

Validacion HTML

Es la forma de visulaizar archivo de tipo grafico atra ves de los estandares establecidos por el www w3c en base a la tecnologia de las computadoras y suforma de accesar

El formato de un sitio web es:

Que el usuario tenga una interfaz facil para navegar que los mostradores faciliten las busquedas y que se apliquen estandares XTML. CSS.

La estructura de la pagina tiene que desarrollar codigos HTML en su contenido CSS en su presentacion.

El documento de la pagina web cumplen con estandares si esta escrito en codigo XHTML, que usa codigo CSS que funciona en todos las navegsdores y que no use elementos flash.

La dimension de la pagina web son 1024 y 768 pixeles como reolucion  optima el ancho de pagina de 900 pixeles, debe llevar fuentes, mapas de sitio etc,,,.

En conclusion la valides de una pagina web es la estructura de sus componetes.

A) IDENTIFICACIÓN DE ELEMENTOS DE UNA PAGINA WEB

A)  IDENTIFICACIÓN DE ELEMENTOS DE UNA PAGINA WEB

El Internet es el resultado de la interconexion de miles de computadoras que comparten los protocolos de comunicacion es decir el mismo lenguaje estos protocolos son TCP/IP

Los servicios basicos del internet son el correo, redes sociales, noticias, vídeo llamadas etc...

WWW (WORLD WIDE WEB)

Significa red ancha mundial y es la menos usada en internet atraves de interconexiones remotas llamadas sitios utiliza vinculos e hipertextos ademas de imagenes , videos, contenidos multimedia etc. todo esto atraves de las llamadas URL 

HIPERTEXTO

Son los que contienen los enlaces como por ejemplo los links de este tipo http://www.blogcaguamas.com estas ligas nos enlazan a otras paginas o documentos 

El hipertexto esta habituado a mensajes escritos pero tambien a contenido de multimedia, es decir si impulsamnos cualquier imagen o video tambien nos enlaza a otra pagina a esto se llama intermedia

FUNCIONAMIENTO DE LA WEB 

EL programa que se usa para leer los documentos de hipertexto se llama browser es decir internet explorer, google chrome, firefox, opera, safari por eso al decir que estamos navegando es la forma de decir que nos movemos entre paginas por todo el mundo.

NAVEGADORES

Como ya mencionamos aparte del internet explorer google chrome existen varios tipos de navegadores pero losmas populares son los que mencionamos

SISTEMAS DE BUSQUEDA

En la actualidad los motores de busqueda como yahoo googlechrome posee los motopres de busqueda mas importantes de la red mundial el motor de chrome añade texto clave que facilita la busqueda por medio de una base de datos ejemplo escribimos la palabra lady y aperece lady gaga o las multiples ladys de mexico, esto en base a una preferencia de busquedas ya sea mundial o nacional

PROTOCOLO HTTP

Es elprotocolo usado para acceder a la web y nos muestra todotipo de informacion visitada se utilizan los cookies que son archivos de textos que dejan el rastro de donde navegamos el protocolo http utiliza elpuerto 80 para navegar

ESTANDARES WEB Y SUS BENEFICIOS 

Son un conjunto de recomendaciones otorgadas por el www 3c word wide de web consortium yotros organismos sobre la forma de crear documentos web es decir consejos sobre el uso de tecnologia para publicaciones web

entre los beneficios una pagina web debe tener un agrado visual colores de fondo agradables a la vista de cargas de imagenes sin exagerar o sobrecarga de texto
otro beneficio es el uso de codigos XHTML Y CSS que mejora la apariencia visual agregando efectos que antes usaba el javascript este tipo de codigos son relevantes para agregar motores de busqueda hace compatible a los navegadores y permite que las personas discapacitadas utilicen su contenido

CSS
Las hojas de estilo cascada es un codigo o lenguaje utilizando en codigos HTML XML que hacen mas presentable nuestra pagina web

SCRIPT
Un script cuya tradicion natural es decir una archivo de ordenes que ejecuta varios archivos para realizar diversas tareas y combinar componentes

LENGUAJES DE EL LADO DEL CLIENTE

XHTML
el primero de ellos el XHTML es un lenguaje de hipertexto extensible es mas estrictoque html y nacio con ese objetivo reemplazarlo esta orientado al uso correcto de las etiquetas elementos cerrados "valores"

HTML
El HTML es una lenguaje de etiquetas de hipertexto para crear documentos que son portales para otros programas

XML
es una lenguaje que tienes distintas tecnologías que cubren un amplio abanico de posibilidades juega un papel fundamental en la programación webylenguajes.net

JAVASCRIPT
Era un codigo con lenguaje muy usado pero en la actualidad ha vuelto a usarse debido a las mejoras que presenta

LENGUAJES DEL SERVIDOR
Son los que generan la pagina antes de enviarlos al cliente