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
Las etiquetas (marcas) delimitan cada uno de los elementos que componen un documento 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> .
PÁGINAS WEB
Consideramos una página web a un documento disponible
en Internet, o World Wide Web (www), codificado según sus estándares y con un
lenguaje espcífico conocido como HTML. Es algo a lo que estamos acostumbrados a
acceder si leemos este artículo pero no todos conocen realmente su
funcionamiento.
A estos sitios se puede llegar a través de los navegadores
de Internet, que reciben la información del documento interpretando su código y
entregando al usuario la información de manera visual.
Estos suelen ofrecer textos, imágenes y enlaces a
otros sitios, así como animaciones, sonidos u otros.
Una página web necesita un lugar donde alojarse para
que cuando el usuario solicite la información desde su navegador, la
información que esta contiene se cargue y aparezca en el ordenador.
TIPOS DE PÁGINAS WEB :
Básicamente existen dos tipos de páginas web:
estáticas y dinámicas.
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
o Amazon
.
.
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.
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).
Mozilla Firefox
Opera
¿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 desarrolla dores pueden dotar de un estilo unificado a todos los apartados y páginas de una web, consiguiendo una imagen homogénea y característica.
¿Para qué sirve una Hoja de estilos?
Una Hoja de estilos sirve para dar coherencia al diseño de una web y mantener un estilo uniforme y homogéneo, sin secciones que usen fuentes distintas ni nada que rompa con la imagen que se desea transmitir al visitante. Esta unicidad resulta cómoda y atractiva estéticamente para cualquier usuario, lo que permite que permanezca más tiempo en la web.
Ejemplos de Hoja de estilos
Hay tantos Ejemplos de Hoja de estilos como web abiertas en Internet, por lo tanto, no es difícil dar con casos que ilustren el concepto del que hablamos.
Tablas o plantillas
Puede personalizar la apariencia de las tablas de planificación de paneles. Puede especificar la configuración de apariencia general, así como la información del circuito y el resumen de cargas.
Marcos (frame)
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>
PRESENTACION
ESTA ES LA VERSION
CON FRAMES DE MI PAGINA |
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 llamado editor de texto plano. 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.
PUBLICADOR DE SITIOS WEB
El Publicador es una herramienta que creamos que permite modificar contenidos dentro del Sitio Web. Dicha herramienta permite la adaptación de acuerdo a las necesidades de cada cliente, pudiendo así actualizar los sectores que usted necesite modificar asiduamente, 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 y puede ser realizado por varias personas al mismo tiempo. Cada uno accede con su usuario y contraseña; de modo que usted podrá verificar quién realiza los cambios en contenidos y en que momento.
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 y puede ser realizado por varias personas al mismo tiempo. Cada uno accede con su usuario y contraseña; de modo que usted podrá verificar quién realiza los cambios en contenidos y en que momento.
No hay comentarios.:
Publicar un comentario