Please enable JavaScript.
Coggle requires JavaScript to display documents.
Creación de una página web - Coggle Diagram
Creación de una página web
Creamos una página web
Una página web es la interpretación, por parte de un navegador, de un documento escrito en el lenguaje HTML
Estos documentos HTML normalmente se encuentran alojados en el disco de un servidor web. Además del contenido propio de la página, aportan a los navegadores la siguiente información: la forma en la que se debe visualizarse la página y la forma en que debe comportarse la página cuando el usuario interactúe con ella
A diferencia de otros documentos informáticos, los documentos HTML no contienen la información de los objetos gráficos que incluyen, como imágenes, videos, mapas,etc
¿Como los añaden los navegadores?
El documento HTML define marcos con la dirección donde el navegador puede encontrar los objetos gráficos
El navegador compone la página para que sea visualizada, e inserta los objetos en los marcos, procedentes de cualquier servidor de internet
Gracias a las tecnologías Java, Flash y HTML 5 actualmente se inserta todo tipo de contenido gráfico interactivo, como reproductores de vídeo o juegos. Esto permite tener páginas web con funcionalidades parecidas a las aplicaciones de escritoria. Estas páginas web se denominan aplicaciones web
creamos un sitio web de páginas estáticas
las páginas web se dividen en dos tipos
estáticas
son documentos HTML previamente creados y almacenados en el disco de un servidor. Se envían a los navegadores cuando estos lo solicitan. Para cambiar el contenido, es necesario modificar, en el servidor, el documento que la define
Para gestionar una página web estática. puedes seguir estos pasos:
diseña y crea la página web en un ordenador local
sube la página a un servidor web mediante FTP o vía web
dinámicas
Son documentos HTML que el servidor va creando sobre la marcha cada vez que un navegador solicita una página. Para su construcción, el servidor utiliza reglas de creación e información almacenada en una basa de datos
Usamos editores gráficos
existen diversas aplicaciones de escritorio para edición web. Las más utilizadas son:
Amaya
es una herramienta multiplataforma y gratuita. Permite trabajar directamente sobre el servidor
Dreamweaver
es una herramienta no gratuita. Es la más utilizada por profesionales
kompoZer
es una herramienta multiplataforma y gratuita. Trabaja en local y es de muy fácil manejo
El código HTML de una página web tiene etiquetas para describir la presentación, el comportamiento y el contenido.
Aun así, la presentación suele describirse en un documento aparte, llamado hoja de estilo CSS
De esta manera, un mismo documento HTML tendrá un aspecto u otro simplemente cambiando en el servidor la hoja de estilo CSS, sin necesidad de modificar el documento HTML
Otra técnica de desarrollo de páginas web es el diseño mediante una aplicación web que haga la función de edito. En este caso, la página se genera en linea y queda almacenada directamente en el servidor, por lo que no es necesario subirla
los editores web suelen ser gratuitos. Incluyen recursos que permiten crear, de forma sencilla, páginas webs atractivas
permiten usar plantillas y añadir elementos de todo tipo. Puedes encontrar muchos servicios de alojamiento en la nube que incluyen editores web. Algunos de ellos son:
Wix
one
google sites
instalamos gestores de contenidos
existen gestores de contenidos más completos que google sites. Son aplicaciones web muy sencillas de instalar y configurar
Permiten gestionar independientemente el contenido, la funcionalidad y el diseño del sitio que crean, de modo que se puede cambiar el aspecto del sitio web sin tener que modificar su contenido
los gestores de contenido necesitan tecnología de páginas dinámicas. Se alojan en servidores con capacidad para comprender lenguajes de reglas y manejas bases de datos. E estos servidores se almacenan los contenidos del sitio
Los gestores de contenidos gratuitos más usados son:
Joomla
Muy completo y con variadas posibilidades de formato de las páginas. Con una gran comunidad de desarrolladores
Drupal
Con potentes capacidades de gestión de permisos de usuarios. Módulos altamente particularizables
Wordpress
muy sencillo de usar. Ideal para crear blogs. Contiene plugins para aumentar su funcionalidad básica
Usamos el lenguaje HTML
El lenguaje HTML es el lenguaje con el que se constituyen las páginas web
Un documento HTML se compone a partir de etiquetas o tags que describen la forma en que el contenido de una página web que visualizarse y comportarse. Las etiquetas se escriben entre paréntesis angulares
Para asegurar que todos los navegadores entienden el mismo HTML, la organización W3C realiza estándares que definen el lenguaje y la estructura de estos documentos
Las etiquetas HTML permiten especificar enlaces a otras páginas, imágenes, etc. Pueden estar escritas en minúsculas o en mayúsculas
Etiquetas HTML más utilizadas
<
p>
texto </
p>
parrafo
<iframe src=página_fuente.html><iframe>
muestra contenidos de otras páginas
<
hr
>
insertar línea gráfica
<a href="web">nombre</a>
enlace a otra página web
<
br>
salto de linea
<img src=imagen.extensión>
insertar imagen
Insertamos contenidos dinámicos
Los contenidos dinámicos son objetos de una página web que pueden cambiar cada vez que la página web se carga, o incluso durante la visualización de la misma
Estos contenidos dinámicos normalmente usan las tecnologías HTML 5, Java, Javascript o Flash. Para insértalos en las páginas web, se utilizan unos fragmentos de código HTML especiales que se denominan:
gadget
widget
gestionamos el sitio web
Normalmente , las herramientas que se emplean para la creación de páginas web incluyen también la posibilidad de gestionar las diferentes capacidades del sitio:
Acceso al servidor para dar visibilidad al sito, cambiar las rutas de acceso o quitarlo del espacio web
acceso al diseño del sitio para modificar la plantilla o cambiar el aspecto del mismo
Accesoa las paginas para editarlas, actualizarlas o eliminarlas definitivamente
un gestor de contenidos o CMS es la aplicación web que integra los recursos necesarios para la creación y gestión de sitios web
diseñamos un sitio web
un sitio web es un conjunto de páginas web sobre una temática concreta que son accesibles mediante un mismo nombre de dominio
cuando se accede un sitio web, este devuelve siempre la misma página, llamada página principal o home
el diseño de un sitio web implica la definición de:
comportamiento
la funcionalidad de las páginas ante las interacciones del usuario
presentación
la imagen que se va a dar al sitio
contenido
la información que va a mostrar el sitio
el diseño de la presentación de un sitio web suele llevar mucho tiempo y requiere conocimientos específicos de edición gráfica. Para facilitar esta tarea, se usan las plantillas
plantillas
una plantilla es una serie de páginas web formateadas y enlazadas entre sí que constituyen un sitio web. Traen prediseñados la presentación y el comportamiento, a falta de dotarlas del contenido
Evaluamos la accesibilidad web
la accesibilidad web es el nivel de facilidad con el que el mayor número posible de personas pueden acceder y usar un stio web
diseñar un web accesible es conseguir que tanto las personas con altas capacidades como otras que tengan problemas auditivos, visuales o intelectuales pueden comprender y utilizar lo que en ella se expone
las acciones que hay para favorecer la eccesibilidad web son :
Las administraciones desarrollan e implantan políticas de fomento de la accesibilidad web
Algunas organizaciones han definido formas para ayudar a desarrollar páginas web que sean accesibles
W3C
Es una organización internacional que trabaja en definir normas que ayuden a estandarizar las páginas web.
Dentro de W3C hay una sección denominada WAI
WAI desarrolla las WCAG o pautas de accesibilidad al contenido en la web.
Las WCAG 2.0 consisten en doces pautas que establecen niveles de prioridad:
Prioridad 2
Define los aspectos que un desarrollador debe tener en cuenta para que sea más fácil el acceso al sitio web
Prioridad 3
Define los aspectos que un desarrollador debe cumplir para hacer más fácil el manejo del sitio web
Prioridad 1
Define los aspectos que un desarrollador debe cumplir para que todos los usuarios puedan acceder a la información del sitio web
Usamos XML
Los formatos de distribución de contenido son estándares que definen las formas de transmitir y compartir información entre diferentes sitios web
Estos formatos se basan en la utilización de texto, por lo que son fáciles de leer por personas. Para organizar la información, usan estructuras jerárquicas y atributos que pueden ser variables:
CSV
Es el más simple y menos potente de los lenguajes. Consiste en una serie de campos encerrados opcionalmente entre comillas y delimitados por el separados coma (,) o punto y coma(;)
YAML
Es un formato potente, claro y rápido de interpretar. Puede leerse con mucha facilidad. Usa el formato atributo: valor. Las marcas de jerarquía son guiones
JSON
Usa el formato atributo: valor y marca la jerarquía mediante llaves. Es más simple que el lenguaje XML. La mayoría de los navegadores incluyen funciones para codificar y decodificar JSON
XML
usa un formato de paréntesis angulares a modo de etiquetas muy parecidas a las del lenguaje HTML. Pueden usarse para representar cualquier estructura de datos