Objetivo: Diseñar y construir soluciones web de nivel intermedio con interfaz amigable, empleando herramientas multimedia que permitan promocionar la información e imagen de una organización y/o cliente.
ETIQUETAS DE HTML
El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas. El siguiente esquema muestra las partes de una etiqueta HTML genérica.
La etiqueta de apertura está delimitada por el signo < "menor que", a continuación el propio nombre de la etiqueta (en este caso p), y opcionalmente, un atributo (en este caso class="fondo"), finalmente el signo > "mayor que".
A continuación está el texto del contenido de la etiqueta, lo más frecuente es un texto, pero podría ser otra etiqueta, una imagen, ...
La etiqueta de cierre está delimitada por el signo < "menor que", a continuación la barra inclinada /, el propio nombre de la etiqueta (en este caso p), y finalmente el signo > "mayor que".
Algunas etiquetas no tienen contenido, y se cierran sobre sí mismas, no tienen etiqueta de cierre, se llaman etiquetas vacias, como la etiqueta
<br>. En estas etiquetas opcionalmente se puede colocar una barra justo antes del signo >, por ejemplo: <br />. La etiqueta <br> produce un salto de línea. Las etiquetas vacias no tienen contenido pero si pueden tener atributos. Algunas otras etiquetas vacias son <hr>, <img>, <input>, <link>, <meta>, <param> y <source>.
En una etiqueta, la primera palabra que aparece es el nombre de la etiqueta. También podemos encontrar atributos con sus valores, siguiendo el formato
<etiqueta atributo1="valor"atributo2="valor">. La forma más correcta es escribir el nombre de la etiqueta y los atributos en minúscula, y los valores entre comillas dobles.
Por ejemplo,
<a href="https://www.aulaclic.es">Visita aulaClic</a
ETIQUETAS DE HTML MAS UTILIZADAS
<div>:div de "división" -división . Sirve para crear secciones o agrupar contenidos.
<p>:El elemento p (párrafo) es el apropiado para distribuir el texto en párrafos.
<html>:representa la raiz de un documento HTML. El resto de elementos descienden de este elemento.
<head>:La HEAD es la primera de las dos partes en que se estructura un documento HTML. En la HEAD reside información acerca del documento, y generalmente no se ve cuando se navega por él.
<title>:Etiqueta Title. La etiqueta title se encuentra dentro de la etiqueta head de sus páginas. El contenido de la etiqueta title es el título en el cual se puede hacer clic en las páginas de resultados de los motores de búsqueda (SERPs). Un título debe tener menos de 70 caracteres de longitud.
<body>:Esta es una de las etiquetas principales ya que es la que sirve para definir el cuerpo del documento web, en el cuerpo se han de situar todos los objetos que se desean visualizar en el documento web, sirviendo esta etiqueta como un contenedor para los mismos.
<h1>:H1 es una etiqueta que sirve para colocar la frase que indica el título del contenido de una página web. Importante en este punto delimitar de forma clara la diferencia entre sitio web y página web: un título H1 debe hacer referencia a una página de tu sitio web, y no al sitio web en general.
<h2>:La etiqueta H2 es un elemento similar al H1, que indica títulos de importancia para subsecciones del documento web actual. Por su naturaleza, puede haber varios H2 en un sitio, que indiquen los diferentes títulos de importancia de la página en la que nos encontramos.
<h3>:Las etiquetas H3 en adelante nos permiten definir títulos de subapartados de un bloque encabezado con un H2. Su incidencia en SEO es más limitada, y por ello no es habitual ni recomendable el trabajar los titulares a partir de H4.
<class>:El atributo global class es una lista de las clases del elemento separada por espacios. Las clases permiten a CSS y Javascript seleccionar y acceder a elementos específicos a través de los selectores de clase o funciones como método document.getElementsByClassName del DOM.
<style>:Es el elemento encargado de indicar la información de estilo.
<br>:El elemento HTML line break <br> produce un salto de línea en el texto (retorno de carro). Es útil para escribir un poema o una dirección, donde la división de las líneas es significante. No utilices <br> para incrementar el espacio entre líneas de texto;para ello utiliza la propiedad margin de CSS o el elemento <p> .
de clic para mas etiquetas
TIPOS DE PÁGINAS WEB :
Tipos de páginas web que existen
Estáticas
Las estáticas forman parte de épocas anteriores, puesto que son de contenido fijo y no son aptas a actualizaciones constantes. Son aquellos sitios enfocados principalmente a mostrar una información permanente, donde el navegante se limita a obtener dicha información, sin que pueda interactuar con la página Web visitada, las Web estáticas están construidas principalmente con hipervínculos o enlaces (links) entre las páginas Web que conforman el sitio, este tipo de Web son incapaces de soportar aplicaciones Web como gestores de bases de datos, foros, consultas on line, e-mails inteligentes...
La principal ventaja de este tipo de páginas es lo económico que resulta crearlas, con un diseño vistoso e incluyendo las imágenes y el texto con el cual queremos informar a los navegantes, se puede crear fácilmente sin necesidad de ningún tipo de programación especial (php, asp, ...) un sitio Web estático.
La gran desventaja de los sitios Web estáticos reside en lo laborioso que resulta su actualización así como la pérdida de potentes herramientas soportadas con bases de datos, como pueden ser la creación de registros históricos de los clientes, pedidos on-line,
Ejemplos:
1. WEB QUEST:
Son sitios Web desarrollados principalmente por profesores y universidades, con un claro objetivo educativo, proponiendo a un grupo de alumnos un tema en particular (biología, geometría, física, literatura con un serie de cuestiones formuladas acerca del tema elegido, el grupo tiene disponible, en la misma Web, direcciones (links) a otras páginas Web donde pueden indagar e investigar acerca del tema, de tal forma que puedan responder a las preguntas planteadas. El principal objetivo de las Web Quest reside en aprender los contenidos del tema elegido de una manera interactiva.
2. BLOC O BITÁCORA:
Es un sitio Web donde se recopilan cronológicamente mensajes de uno o varios autores, sobre una temática en particular siempre conservando el autor la libertad de dejar publicado lo que crea pertinente, también llamado blog o bitácora,
3.WEB INFORMATIVA:
Aquellos sitios Web que simplemente ofrecen información acerca de un tema específico (Fiestas en Valencia: Las fallas, Gastronomía andaluza. por lo general estos sitios no se actualizan, de tal forma que los contenidos permanecen invariables a lo largo de su vida
Dinámicas
En el caso de las dinámicas, pueden ser construidas en HTML o en otra extensión, como por ejemplo PHP. En este último caso se permite la interacción en tiempo real, apto para algunas páginas web con estas necesidades específicas, como pueden ser los foros.
son aquellos que permiten crear aplicaciones dentro de la propia Web, otorgando una mayor interactividad con el navegante. Aplicaciones dinámicas como encuestas y votaciones, foros de soporte, libros de visita, envío de e-mails inteligentes, reserva de productos, pedidos on-line, atención al cliente personalizado.
Ejemplos:
1.Tiendas online
Los ecommerces o tiendas online son sitios webs en los que se comercializan productos o servicios. En la actualidad están teniendo un gran crecimiento debido a que muchos usuarios ya realizan sus transacciones por Internet y también muchos comercios tradicionales se han lanzado a desarrollar este tipo de sites para generar negocio en la red. Por darte algún dato, algunos ecommerces se han convertido ya en gigantes de la distribución y son algunas de las empresas más grandes del mundo como Alibaba .
2.Wikis
Son páginas web dónde los usuarios son los que crean y modifican su contenido directamente desde su navegador. La wiki más famosa es la Wikipedia, una de las páginas web más visitadas del mundo.
3. información meteorológica
En este sitio Web se presentan observaciones, predicciones y datos climatológicos OFICIALES de un cierto número de ciudades proporcionados por los diferentes Servicios Hidrológicos y Meteorológicos Nacionales, que realizan las observaciones en sus países respectivos. También se ofrecen, cuando es posible, enlaces a sus páginas oficiales y de información turística. Las predicciones para cada jornada se expresan mediante un símbolo y una frase corta. Los medios de comunicación pueden hacer uso de la información contenida en este sitio citando siempre la fuente.
PROTOCOLO IP
El protocolo de IP (Internet Protocol) es la base fundamental de la Internet. Porta datagramas de la fuente al destino. El nivel de transporte parte el flujo de datos en datagramas. Durante su transmisión se puede partir un datagrama en fragmentos que se montan de nuevo en el destino.Las principales características de este protocolo son:
· Protocolo orientado a no conexión.
· Fragmenta paquetes si es necesario.
· Direccionamiento mediante direcciones lógicas IP de 32 bits.
· Si un paquete no es recibido, este permanecerá en la red durante un tiempo finito.
· Realiza el "mejor esfuerzo" para la distribución de paquetes.
· Tamaño máximo del paquete de 65635 bytes.
· Sólo ser realiza verificación por suma al encabezado del paquete, no a los datos éste que contiene.
El Protocolo Internet proporciona un servicio de distribución de paquetes de información orientado a no conexión de manera no fiable. La orientación a no conexión significa que los paquetes de información, que será emitido a la red, son tratados independientemente, pudiendo viajar por diferentes trayectorias para llegar a su destino. El término no fiable significa más que nada que no se garantiza la recepción del paquete.
La unidad de información intercambiada por IP es denominada datagrama. Tomando como analogía los marcos intercambiados por una red física los datagramas contienen un encabezado y una área de datos. IP no especifica el contenido del área de datos, ésta será utilizada arbitrariamente por el protocolo de transporte.
Direcciones IP
Para que en una red dos computadoras puedan comunicarse entre sí ellas deben estar identificadas con precisión Este identificador puede estar definido en niveles bajos (identificador físico) o en niveles altos (identificador lógico) de pendiendo del protocolo utilizado. TCP/IP utiliza un identificador denominado dirección internet o dirección IP, cuya longitud es de 32 bites. La dirección IP identifica tanto a la red a la que pertenece una computadora como a ella misma dentro de dicha red.
Tomando tal cual está definida una dirección IP podría surgir la duda de cómo identificar qué parte de la dirección identifica a la red y qué parte al nodo en dicha red. Lo anterior se resuelve mediante la definición de las "Clases de Direcciones IP". Para clarificar lo anterior veamos que una red con dirección clase A queda precisamente definida con el primer octeto de la dirección, la clase B con los dos primeros y la C con los tres primeros octetos. Los octetos restantes definen los nodos en la red específica.
¿Qué son los Navegadores?
Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, además de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software realmente habitual y muy utilizado actualmente.
¿Qué son los navegadores web ?
Un navegador web (en inglés, web browser) es un software, aplicación o programa que permite el acceso a la Web, interpretando la información de distintos tipos de archivos y sitios web para que estos puedan ser visualizados.
La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto, posiblemente con recursos multimedia incrustados. Además, permite visitar páginas web y hacer actividades en ella, es decir, enlazar un sitio con otro, imprimir, enviar y recibir correo, entre otras funcionalidades más.
Los documentos que se muestran en un navegador pueden estar ubicados en la computadora donde está el usuario y también pueden estar en cualquier otro dispositivo conectado en la computadora del usuario o a través de Internet, y que tenga los recursos necesarios para la transmisión de los documentos (un software servidor web).
¿Qué es una Hoja de estilo?
Una Hoja de estilo es un archivo que suele acompañar al fichero principal de cualquier página web, con la extensión css, y que se encarga de definir diferentes aspectos relacionados con el formato y el diseño de la web, estableciendo los parámetros que definen las etiquetas utilizadas en el código fuente de la misma.
Este fichero es donde se almacena información del estilo del tipo de fuente a utilizar, los colores, su tamaño, el espaciado entre párrafos, las dimensiones de los diferentes títulos y un larguísimo etcétera. Gracias a esto, los diseñadores y desarrolladores pueden dotar de un estilo unificado a todos los apartados y páginas de una web, consiguiendo una imagen homogénea y característica.
Además de todo esto, es de los primeros ficheros que los programadores crean a la hora de construir una nueva web. A través de él, plasman las señas de identidad de la imagen de marca de la compañía tras la página, estableciendo los parámetros esenciales con los que marcar la línea estética de la web. Una vez está hecho, puede modificarse a medida que se avanza en el desarrollo para realizar diferente ajustes con el fin de conseguir un mejor resultado.
La Hoja de estilos es la clave para establecer el diseño de una web, por lo tanto, se convierte en el principal espacio de trabajo para los diseñadores web. El lenguaje que usa es el CSS, por lo que programar en ella es algo natural para cualquier programador web.
¿Qué es una tabla o plantilla?
Una tabla es una forma de representar mucha información de manera esquematizada, ordenada y compacta. Aunque Wikipedia acepta el código HTML para la creación de tablas como en cualquier página web, posee también un código propio, cuya sintaxis basada en barras verticales resulta bastante más limpia y compacta.
¿Qué son marcos(frames)?
Un marco (o frame) es una ventana independiente dentro de la ventana general del navegador. Cada marco tendrá sus bordes y sus propias barras de desplazamiento. Así cada página se dividirá en la práctica en varias páginas independientes.
Para crearlos necesitaremos un documento HTML específico, que llamaremos documento de definición de marcos. En él especificaremos el tamaño y posición de cada marco y el documento HTML que contendrá. Vamos a ver un ejemplo de este tipo de documento:
<HTML>
<HEAD>
<TITLE>Mi primera página con marcos</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.html">
<FRAME NAME="principal" SRC="introduccion.html">
<NOFRAMES>
<P>Lo siento, pero sólo podrás ver esta página
si tu navegador tiene la capacidad de visualizar
marcos.</P>
</NOFRAMES>
</FRAMESET>
</HTML>
¿Qué es un software de edición de sitios web?
Un editor de páginas web es una aplicación diseñada con el fin de facilitar la creación y edición de documentos HTML o XHTML. Su complejidad puede variar desde la de un simple editor de texto plano, entornos WYSIWYG, hasta editores WYSIWYM.También tenemos el editor de texto sin formato. Este tipo de editor suele ser muy sencillo. Dos ejemplos son Notepad o Bloc de Notas (incluido en Windows) y Kate (GNU/Minix). Con cualquiera de los dos bastaría para escribir las líneas de código necesarias para diseñar una página Web.Existen editores de texto específicamente diseñados para la edición Web, que como Kate, incluyen dentro de su simplicidad coloreado de sintaxis y las etiquetas de marcado usuales necesarias en el lenguaje de hipertexto. Dichos editores incluyen una serie de botones para insertar rápidamente las etiquetas, o combinaciones de estas, más corrientes, salvar el documento con un clic y visionarlo posteriormente en una nueva ventana. el paquete¿Qué es un publicador de sitios web?
El Publicador es una herramienta que creamos que permite modificar contenidos dentrodel Sitio Web. Dicha herramienta permitela adaptación de acuerdo a las necesidades de cada cliente, pudiendo así actualizarlos sectores que usted necesite modificarasiduamente, siendo estos fotos, imágenes, textos y otros.Para poder utilizar ésta herramienta no necesita conocimientos previos en informática.El mantenimiento de su Sitio Web depende de la o las personas que usted desee yvarias personas al mismo tiempo. Cada uno accede con su usuario y contraseña; de
puede ser realizado por
modo que usted podrá verificar
quién realiza los cambios en contenidos y en que momento.
No hay comentarios.:
Publicar un comentario