-->

Menú principal

lunes, 17 de abril de 2017

TIC 4º ESO - Tema 7.- Publicación de páginas web

Tema 7.- Publicación de páginas web

2.- Los sitios web
     2.1.- Conceptos básicos de la web
     2.2.- Funcionamiento de la web
3.- Páginas web y HTML
     3.1.- Clasificación de las páginas web
     3.2.- Etiquetas HTML
     3.3.- Utilización de las etiquetas
     3.4.- Estructura de una página web
4.- Editores de páginas web
     4.1.- Tipos de editores de páginas web
     4.2.- Asistentes
5.- Hipervínculos
     5.1.- Tipos de hipervínculos
6.- Elementos de una página web
     6.1.- Imágenes
     6.2.- Tablas
     6.3.- Elementos multimedia: sonidos, vídeos, animaciones.
7.- Trabajar con hojas de estilo
8.- Publicar un sitio web

1.- Introducción

Internet está transformando nuestra sociedad y la world wide web está siendo uno de los factores claves de este cambio. El mundo se ha transformado en una pequeña aldea global gracias a la enorme posibilidad de acceso a la información existente en la actualidad.

Las páginas webs son documentos escritos empleando un lenguaje denominado HTML ( Hyper Text Markup Languaje), que significa lenguaje de marcas de hipertextto. HTML es un lenguaje que nos permite dar formato a documentos mediante el uso de etiquetas llamadas tags.

Una página web puede estar integrada por numerosos recursos multimedia: imágenes, sonidos, animaciones, vídeos, enlaces a otras páginas o recursos, etc.

Este tema se desarrolla sobre los contenidos de las páginas web, como crearlas, compartirlas, editarlas y publicarlas.

2.- Los sitios web

Un sitio web es un conjunto de páginas web enlazadas entre sí, a las que se accede a través de la misma URL. Para entender mejor el funcionamiento de la web vamos a definir una serie de términos asociados a Internet:

2.1.- Conceptos básicos de la web

La World Wide Web (WWW) es un sistema de documentos relacionados entre sí mediante hipervínculos que permiten su visualización en un ordenador conectado a la red.

-Servidor web: es un ordenador remoto que tiene instalados unos programas especiales y que envía documentos (páginas web) que le son requeridos por otro ordenador cliente. Un ejemplo de programa para servidor web es APACHE.

-Cliente: es un ordenador conectado a Internet que pide documentos como páginas web para visualizarlos utilizando navegadores. Ejemplo de programas clientes son los navegadores Netscape, Firefox, Crome, Explorer, etc.

-Navegador web: es un programa instalado en el ordenador cliente que permite visualizar documento en formatos html y permite que funcionen los hiperenlaces que conectan paginas web entre sí. Navegadores: Internet, Mozilla Firefox, Opera, Google Chrome, Safari.

-URL : es una sigla del idioma inglés correspondiente a Uniform Resource Locator (Localizador Uniforme de Recursos). Se trata de la secuencia de caracteres que sigue un estándar y que permite denominar recursos dentro del entorno de Internet para que puedan ser localizados. Es la dirección de texto que hace que un servidor web envíe un archivo html correspondiente a una página web.

-TCP/IP: son las siglas de Protocolo de Control de Transmisión/Protocolo de Internet (en inglés Transmission Control Protocol/Internet Protocol), un sistema de protocolos que hacen posibles servicios Web, Telnet, FTP, E-mail, y otros entre ordenadores que no pertenecen a la misma red. Es un código que identifica a cada dispositivo que se conecta a Internet. 

-DNS: El sistema de nombres de dominio (DNS, por sus siglas en inglés, Domain Name System) es un sistema de nomenclatura jerárquico descentralizado para dispositivos conectados a redes IP como Internet o una red privada. Este sistema asocia información variada con nombre de dominio asignado a cada uno de los participantes. Es una base de datos que relaciona la URL con la dirección IP real de la página web. Esta base de datos se encuentra en unos servidores llamados de dominio que nos proporcionan nuestra conexión a Internet.

-HTTP: El http son las siglas de “Hypertext Transfer Protocol” es un protocolo de transferencia donde se utiliza un sistema mediante el cual se permite la transferencia de información entre diferentes servicios y los clientes que utilizan páginas web. Este sistema fue desarrollado por las instituciones internacionales World Wide Web Consortium y la Internet Engineering Task Force, finalizado en el año de 1999. Es un protocolo de transferencia de hipertexto. Se coloca delante de la URL para que el servidor sepa que le estoy pidiendo una página web. 

-HTML: es la sigla de HiperText Markup Language (Lenguaje de Marcación de Hipertexto) es un lenguaje es se utiliza comúnmente para establecer la estructura y contenido de un sitio web, tanto de texto, objetos e imágenes. Los archivos desarrollados en HTML usan la extensión .htm o .html. Es el lenguaje de programación con el que se programan documentos del tipo páginas web.

- Etiquetas o tags: Las etiquetas HTML son fragmentos de texto rodeados por corchetes angulares < >, que tienen funciones y usos específicos y se utilizan para escribir código HTML. Las etiquetas o tags son la forma de escribir código HTML. En HTML existen etiquetas de apertura y etiquetas de cierre, tienen la forma: . Donde es la etiqueta de apertura y
es la etiqueta de cierre indicada por la diagonal. HTML tiene definidas gran variedad de etiquetas para distintos usos

- Blog: Un blog es un sitio web que se actualiza periódicamente y que ofrece la lectura de información de uno o varios autores sobre temas de interés. La unidad fundamental de información de un blog es el artículo, también llamado "post" o "entrada". Estos artículos se muestran siguiendo una ordenación cronológica inversa, es decir, se mostrará primero el artículo más reciente. En consecuencia podemos definir un blog como una recopilación de artículos ordenados cronológicamente.

Para más información visitar la siguiente web del Intef
En este enlace accedes al índice de contenidos de sobre Multimedia y Web 2.0
En este enlace accedes al curso de iniciación a Blogger 

2.2.- Funcionamiento de los sitios web


Para consultar alguna página web necesitamos abrir el navegador y escribir una dirección URL.

El servidor DNS localiza la dirección IP que necesitamos.

El servidor web al ver http// nos envía esa página en formato html.

Nuestro navegador convierte el documento html (todo texto) en el formato que realmente vemos y solicita al servidor el resto de documentos necesarios como las imágenes, etc.

El lenguaje html es sencillo y rudimentario por ello han surgido nuevos lenguajes que mejoran y complementan como pueden ser thp, acs, java script.

Cuando visitamos una pagina web el servidor almacena en nuestro ordenador un pequeño archivo con la información de la visita como pueden ser usuarios y claves, son las cookies.

Estas cookies pueden ser fuentes de virus. Por ello es importante borrar periódicamente esa carpeta donde se guardan las cookies.

Además la páginas web se guardan automáticamente en una carpeta de modo que si miro una página y la vuelvo a consultar otra vez puede ocurrir que mi ordenador la consulte de esta carpeta temporal. En este caso la página estaría sin actualizar. Por ello es importante pulsar F5 para actualizarla. Esto se hace para que la navegación sea más rápido.

3.- Páginas web y HTML

Los documentos Web o también llamados páginas Web o sitio web (website) es un conjunto de documentos enlazados entre sí, a los cuales se accede a través de una dirercción común.

Las páginas web pueden estar localizadas en diferentes sitios de Internet, estos sitios son llamados servidores Web. De manera que un documento WWW puede contener enlaces a otros documentos que se encuentran en el mismo servidor Web o en otros servidores Web, logrando así formar una telaraña mundial de información.

El lenguaje estandarizado para la creación de páginas Web es el lenguaje HTML (HyperText Markup Language, Lenguaje de Marcas Hipertexto). HTML es un lenguaje muy sencillo que permite describir documentos hipertexto. 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).

3.1.- Clasificación de las páginas web

     Según la forma en que se actualizan los contenidos, las web se clasifican en:
  • Estáticas: son aquellas que no cambian y muestran siempre los mismos contenidos cada vez que se cargan. Se realizan en lenguaje HTML.
  • Dinámicas: Son aquellas cuyos contenidos van cambiando en función de las acciones de los usuarios. Se realizan combinado el HTML con lenguajes dinámicos como PHP, Javascript, etc. y el uso de bases de datos donde se guardan diferentes contenidos.
Actualmente la mayoría de las web's son dinámicas, ya que representan la evolución desde la web 1.0 a la web 2.0.

Las diferencias principales entre cada uno de estos paradigmas se pueden ver en el cuadro de la izquierda. Las web's dinámicas suponen una mejora considerable respecto a las web estáticas.

Podemos clasificar las web por su utilidad o contenido:

Personales: como su nombre lo dice, son sitios web donde se expresan las temáticas de una persona o en su defecto la temática de un grupo.

Blog: Se le conoce normalmente como bitácoras, donde se publican artículos referentes a un segmento de mercado.

Foros: Son sitio web de debate o dialogo, donde se hacen preguntas y entre los miembros se responden.

E-commerce: Son los sitios dedicados a la venta de productos y/o servicios, normalmente conocidos como tiendas online.

Directorios: Se podría decir que son como catálogos virtuales, que muestran hipervínculos hacia otras páginas web.

Institucionales o corporativas: Son los sitios construidos para dar una proyección de marca en particular.

3.2.- Etiquetas HTML

El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje.

Definición: Las etiquetas HTML son fragmentos de texto rodeados por corchetes angulares < >, que tienen funciones y usos específicos y se utilizan para escribir código HTML. Las etiquetas o tags son la forma de escribir código HTML.

En HTML existen etiquetas de apertura y etiquetas de cierre, tienen la forma: . Donde es la etiqueta de apertura y es la etiqueta de cierre indicada por la diagonal. HTML tiene definidas gran variedad de etiquetas para distintos usos.

3.3.- Utilización de las etiquetas

Las etiquetas pueden presentar modificadores que llamaremos atributos que permitirán definir diferentes posibilidades de la instrucción HTML. Estos atributos se definirán en la etiqueta de inicio y consistirán normalmente en el nombre del atributo y el valor que toma separados por un signo de igual.

El orden en que se incluyan los atributos es indiferente, no afectando al resultado. Si se incluyen varias veces el mismo atributo con distintos valores el resultado obtenido será imprevisible dependiendo de como lo interprete el navegador. Cuando el valor que toma el atributo tiene más de una palabra deberá expresarse entre comillas, en otro caso no será necesario.

Puedes ver esta presentación donde se explica la utilización de las etiquetas:



3.4.- Estructura de una web

Uno de los aspectos más importantes de las estructura de una página web es decidir dónde posicionaremos los menús de navegación y enlaces a otras páginas web y dónde posicionaremos el contenido que van a consultar los navegantes.

Existen diversos tipos de estructuras estándares de páginas web que especifican la posición de los menús de navegación y el contenido, manteniéndose esta estructura y diseño durante toda la navegación por el sitio web. Lo que define el diseño de una página web es la forma de organizar los elementos que la componen.
Básicamente, los sitios web se componen y estructuran de la siguiente manera:
Contenedor: Elemento que abarca al resto de las parte de la web. Dentro de este contenedor estarán todos los elementos del sitio; módulos, contenidos, imágenes, etc.

Logotipo: es la imagen o símbolo identificativo de la empresa, entidad, organización, equipo, etc., que identificará la marca en todo el sitio. Puede ser el logotipo o el nombre. Al estar arriba acompañara la navegación por todo el sitio ayudando al reconocimiento de la marca.

Navegación: la forma más aceptada y fácil, es el menú horizontal, que tiene los enlaces a cada una de las partes del sitio web. Los menús verticales pueden usarse como complementos o sub menús, de los horizontales.

Contenido: lo más importante y fundamental de una buena página. Lo que mantiene al visitante cautivo e interesado. Si el contenido es bueno e interesante, llamará la atención del visitante y hará que permanezca más tiempo en el sitio. El mejor lugar debe ser para los contenidos. Para Google, el contenido es el rey.

Pie de página o footer: localizado al final del sitio, abajo, generalmente dejamos ahí información de Copyright y legales o menús secundarios. Aunque en los últimos años, se usa mucho para incluir información de redes sociales, direcciones, noticias.
   

4.- Editores de páginas web

Los editores de páginas web son aquellas aplicaciones diseñadas especialmente para la creación de documentos electrónicos desarrollados en lenguaje HTML o XHTML.


4.1.- Tipos de editores de páginas web

Desde el inicio de la web, se han venido desarrollando distintos editores, que varían dependiendo de su complejidad. Así, es posible distinguir entre 3 tipos de editores de páginas web: los editores de texto sin formato, los editores de texto con ventanas y los editores WYSIWYG (What You See Is What You Get).
  • Editores de texto sin formato: En este grupo se incluirían los editores más básicos, que permiten escribir las líneas de código, pero no ofrecen grandes prestaciones adicionales para el diseño web de tu página. Destaca el tradicional bloc de notas.
  • Editores de texto con ventanas: Este tipo de editores permite, además de desarrollar el código en un área de trabajo determinada, visualizar el resultado en tiempo real.
  • Editores WYSIWYG:Comprenderían los editores más complejos, en los que el usuario va colocando distintos elementos en una página y el propio software se encarga de generar el documento HTML.
 Algunos editores de páginas web son:

  • Sublime Test es uno de los editores de HTML más conocidos. Disponible para Windows, Linux y OS X, destaca por su soporte para muchos lenguajes de programación, además de HTML o CSS. Este editor cuenta con numerosos plugins y un sistema de pantallas múltiples que permite crear proyectos y trabajar cómodamente con varios archivos al mismo tiempo.

  • Notepad ++ es un editor de código abierto disponible solo para Windows. Este editor aumenta las funcionalidades de cualquier bloc de notas. Entre sus funcionalidades, se encuentran el resaltado de sintaxis, la estructuración del código o la función de autocompletado. Además, es posible añadir diferentes plugins para su personalización. Al tratarse de un editor muy popular, hay muchos entre los que elegir.

  • Dreamweaver. Es uno de los productos estrella de Adobe, Dreamweaver permite trabajar no solo con código en HTML y CSS, sino también entre otros, en lenguajes, como PHP, XML o JavaScript. Como editor WYSIWYG, Dreamweaver permite trabajar en una vista preliminar y que el propio editor genere el código HTML, lo que resulta especialmente atractivo para aquellos que se inician en el diseño web.
  •  NVU: es un [creador de páginas web]] WYSIWYG Multiplataforma basado en Mozilla Composer, pero de ejecución independiente. ... Mozilla Composer está todavía en desarrollo como parte de la suite Mozilla para otras plataformas.

 
  • Kompozer es un editor WYSIWYG (What You See Is What You Get = Lo que ves es lo que tienes) de páginas web. Resulta una herramienta de uso fácil, de libre distribución y de uso gratuito basado en el motor de Mozilla.



4.2.- Asistentes para crear páginas web

 Los editores de texto como Microsoft Word o LibreOffice Writer tienen asistentes para crear páginas web que nos guian en el proceso de creación paso a paso.

Para ver en detalle este proceso consulta la siguiente web:

Creación sencilla de páginas web

También puedes consultar el asistente de páginas web de LibreOffice

Asistente para páginas web

5.- Hipervínculos

Un hipervínculo (también llamado enlace, vínculo, o hiperenlace) es un elemento de un documento electrónico que hace referencia a otro recurso, como por ejemplo otro documento o un punto específico del mismo o de otro documento.

Un hipervínculo es un enlace, normalmente entre dos páginas web de un mismo sitio, pero un enlace también puede apuntar a una página de otro sitio web, a un fichero, a una imagen, etc. Para navegar al destino al que apunta el enlace, hemos de hacer clic sobre él. También se conocen como hiperenlaces, enlaces o links.  


5.1.- Tipos de hipervínculos.

Existen varios tipos de hipervínculos. Vamos a ver los más usados. 

Hipervínculo de texto: es un enlace que se encuentra asociado a un texto, de forma que si hacemos clic sobre ese texto, navegamos dónde indique el hipervínculo. Por defecto, cuando creamos un hipervínculo de texto, el texto aparece subrayado y en un color distinto al del texto normal.

Hipervínculo de imagen: es un enlace que se encuentra asociado a una imagen, de forma que si hacemos clic sobre esa imagen, navegamos dónde indique el hipervínculo.

Hipervínculo local o interno: es un vínculo a una página que se encuentra en el mismo sitio web (sitio local).

Hipervínculo externo : es un vínculo a otro sitio web en Internet (sitio externo). Es un vínculo a cualquier otro lugar fuera del sitio actual. Cuando ponemos un vínculo externo, escribimos la dirección completa de la página incluido http://www....

Hipervínculo a una dirección de correo electrónico: es un vínculo que contiene una dirección de correo. Al pulsar en él, automáticamente se abre el programa de correo que tenga el usuario instalado para poder escribir a esa dirección de correo.

Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.
Referencia absoluta: Conduce a una ubicación externa al sitio en el que se encuentra el archivo. La ubicación es en Internet, es decir toda la url identificativa del archivo en la red. Los hipervínculos externos siempre deben tener una referencia absoluta.

Referencia relativa (al sitio o al documento): La referencia relativa al sitio conduce a un archivo situado dentro del mismo sitio que el documento actual partiendo del directorio raiz y al documento conduce a un archivo situado dentro del mismo sitio que el archivo actual, pero partiendo del directorio en el que se encuentra el actual.


Referencia a una parte de un documento: Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Primero debemos definir un punto de fijación, anclaje o marcador. El punto se define dentro de un documento con el cursor en el lugar exacto a través del menú Insertar , opción Anclaje con nombre (DW) o Marcador (FP). 

6.- Elementos de una página web

Un sitio web debe ser una combinación de múltiples elementos, entre ellos texto, imágenes, vídeos, animaciones, applets, esquemas, gráficos, etc. Todos ellos han de estar organizados de forma eficiente, de tal manera que den gran vistosidad al sitio web y permitan una navegación fácil y rápida.

Los principales elementos de diseño web que toda página debe tener, se pueden resumir en los siguientes:

 Contenido.

Una página web debe ser atractiva… Pero no solo a la vista, sino también en el contenido. Eso significa que debe tener contenido interesante que atraiga (y atrape) al público objetivo. De hecho, ninguna página puede considerarse exitosa si no cuenta con un contenido atractivo y actualizado con cierta frecuencia. Eso servirá no solo para aumentar el número de nuevas visitas, sino para que los antiguos visitantes consulten la página a menudo y la usen como referencia.

 Tipografía.

Es importante usar fuentes llamativas pero sencillas de leer. También es importante variar el tamaño de una misma fuente para resaltar secciones interesantes del contenido y del texto. Blogger permite seleccionar el tipo de letra seleccionando entre los diferentes estilos: Encabezado, subencabezado, encabezado secundario y normal. Cada estilo destaca el texto en función de su importancia en el blog.

 Imágenes.

En el diseño web es muy importante las buenas fotografías, preferentemente tomadas por un profesional. Es importante que no estén pixeladas o desenfocadas, ya que puede causar una mala imagen del sitio en general. Hoy día los dispositivos móviles permiter realizar fotografías de gran calidad y de forma rápida.

 Animaciones y movimiento.

Para generar una sensación de dinamismo es bueno utilizar elementos animados.
Pero atención: no abuses de ellos, ya que pueden sobrecargar la página.
Lo ideal es que no sobrepasen el 20% del total de la página ya que de otra forma pueden causar saturación, distraer la atención de cosas importantes que se quieren decir y por último sacar al usuario del sitio. Podemos usar imágenes animadas procedentes de Internet o realizar nuestras propias animaciones con programas que realizan ésta función, entre ellos Gimp, Photoshop, Gifcam, MakeGif, etc.

 Botones e iconos.

Utilizar botones prácticos y representativos, así como iconos grandes y vistosos aumenta la facilidad de navegación en la página. Pero no es necesario colocar accesorios que no brinden un valor real, por ejemplo un reloj para clientes que se encuentran en el mismo uso horario.

 Fondos claros y sencillos.

Los fondos claros o totalmente blancos facilitan la visualización, pero también dan un aspecto despejado a la página resaltando las imágenes. Existe la tendencia a utilizar fondos negros para lecturas largas, para no cansar al lector con la luz del monitor.

 Enlaces a redes.

Es de gran ayuda para los usuarios colocar enlaces a redes sociales con las cuales interactúan con facilidad. Esto ayuda además a crear comunidad.

 Sobriedad.

Una página debe permitir una fácil visualización de los contenidos (vídeos, imágenes, textos).


 Menús desplegables.
 
 Todo blog bien organizado debe incorporar menús desplegables que permiten el acceso rápido y organizado a cada una de sus páginas, y realizar clasificaciones por temática u otras propiedades que sean de interés en el Blog.

Esquemas y gráficos

Los esquemas y gráficos son fundamentales sobre todo en web o blog relacionados con la enseñanza o la educación, donde se pretende dar formación, etc.

6.1.- Imágenes

Para añadir imágenes al blog se utiliza la etiqueta siguiente:






















Los procedimientos de este tema son:

1.- Crear el sitio web local.
2.- Crear la página web.
3.- Agregar contenidos.
4.- Crear el sitio web en el editor.
5.- Crear una nueva página web con NVU.
6.- Trabajar con NVU. Formatos.
7.- Crear un hipervínculo.
8.- Añadir un enlace relativo.
9.- Editar un enlace.
10.- Insertar un enlace interno.
11.- Crear una página con vínculos.
12.- Separar elementos de la página.
13.- Insertar una imagen en una página web.
14.- Organizar las fotografías mediante tablas.
15.- Agregar un sonido.
16.- Agregar estilo al documento.
17.- Insertar una hoja de estilo.
18.- Configurar el servidor FTP.
19.- Publicar una página web.

1 comentario: