Tema 3 Diseño de página web usando software de aplicación

Editor web

Un editor web es una aplicación que facilita la elaboración de páginas web, permitiendo con esto enfocarse más a la cuestión estética del contenido, pero también permite la elaboración avanzada de páginas web, permitiendo trabajar con el código de la página.

Elegir un editor.

Existen diversas aplicaciones para la elaboración de páginas web, en nuestro caso utilizaremos Bluefish, que es una aplicación de libre distribución, en otras palabras, gratis, facilita el trabajo con etiquetas, se puede descargar de Internet, da soporte a diversas plataformas de programación, permite trabajar con CSS.

El entorno de Bluefish.

Panel lateral: Contiene tres pestañas, el explorador de archivos, el explorador de referencias de función y el explorador de marcadores.

Área de edición: Permite editar el código de la página web.

Barra de menú: Contiene la mayoría de los comandos que se pueden aplicar en Bluefish.

Barra de herramientas principal: Contiene los comandos más utilizados en Bluefish.

Barra de herramientas HTML: Contiene las herramientas que se pueden aplicar en una página web.

Menú de fragmentos: Proporciona acceso a lenguajes y funciones de reemplazo. Es totalmente personalizable a través del panel de preferencias.

Barra de estado: En la parte inferior de la ventana de Bluefish está la barra de estado. Aquí se presentan los mensajes, el número corriente de línea y columna, la inserción (INS) o el modo sobrescribir (OVR) para el cursor, y la codificación de tipo de archivo y carácter.

Crear reglas de estilo

Para agregar reglas de estilo

- Abra Bluefish, agregue el código correspondiente.

- Agregue una línea en blanco entre las etiquetas de style.

- Seleccione la pestaña de CSS.

- Active el botón crear hoja de estilo.

- Especifique el selector, la propiedad y el valor asignado.

- Active el botón Añadir, agregue tantos selectores como requiera.

- Accione el botón OK.

Ejemplo de agregar estilos

<html>

<head>

<title>Isaac hernandez arroyo</title>

h1 {

background-color: green;

color: yellow;

}

h2 {

background-color: blue;

color: red;

}

p {

background-color: red;

color: blue;

}

</style>

</head>

<body>

<h1>Soy del 12 de Enero</h>

<h2>Mi signo Zodiacal es Capricornio</h2>

<p>Un Capricornio es un de los signos del

zodiaco más estables, seguros y tranquilos.

Son trabajadores, responsables, prácticos y

dispuestos a persistir hasta sea necesario

para conseguir su objetivo.</p>

</body>

</html>

Preparar un Sitio Web

Sitio web

Un sitio web es un compendio de páginas relacionadas entre sí y con un propósito en común, las páginas y los recursos asociados están alojados en un espacio de almacenamiento, en un servidor de hospedaje para sitios web, asesados por medio de un URL, el hospedaje puede incluir diversos servicios como audio, video, chat, correo electrónico y más. Es común que todo sitio tenga una página de inicio, a la cual se le asigna el nombre de index.html, la cual debe facilitar el acceso a las diversas páginas contenidas en el sitio.

La temática del sitio

Todos los sitios tienen una finalidad tal como el comercio, educación, entretenimiento, noticioso, didáctico y más, por eso es importante que determines la finalidad de tu sitio, para allegarse de recursos que conformen el contenido relacionado con la finalidad o temática del sitio texto, imágenes, audios, videos y demás elementos.

Organizar los archivos

Para la organización del sitio se recomienda manejar una carpeta por página y subcarpetas para sus recursos (imágenes, audios, videos y demás elementos). Un segundo orden es manejar las carpetas de las páginas por niveles, acorde con la vinculación entre páginas. Tanto archivos como carpetas asignar un nombre descriptivo del contenido. Podemos utilizar un organigrama del tipo mapa conceptual para representar gráficamente la estructura de nuestro sitio.

Navegación

Para navegar en un sitio se utilizan menús, en todo sitio debe haber un menú principal, que vincule con las páginas de segundo nivel, que a su vez den acceso a las páginas de tercer nivel relacionadas con la opción seleccionada y así sucesivamente hasta el último nivel de cada una de las páginas de segundo nivel. Algunos administradores de sitios web incluyen un menú que se desglosa y da acceso a todas las demás páginas. Es importante considerar una opción de retorno al menú principal y otra a la página previa.

Estructura del Menú

El menú se recomienda estructurarlo de acuerdo a la información que maneja el sitio en secciones como en un periódico, estas secciones se pueden dividir en subsecciones, en forma similar ocurre con las opciones de menú, el menú puede contener todas las posibles opciones del sitio o las principales y pasando al siguiente nivel se especifican las de tercer nivel y así sucesivamente. La ubicación del menú casi siempre es lateral, en la sección ya se de arriba, a la derecha o izquierda y en raras ocasiones debajo de la sección visible de la página.

Estructura de la página

Para tener un orden de visualización podemos seccionar (<div>) visualmente el contenido y opciones de menú de nuestras páginas, las opciones de menú (<ul>) pueden estar en forma de lista vertical u horizontal.

Evaluación Integradora

Elabora un sitio relacionado con tus datos generales, el significado de tu nombre, un hecho histórico del día de tu cumpleaños, el significado de tu signo zodiacal e información de una persona destacada con tu nombre.

Estructura de carpetas y sus archivos respectivos:

Ejemplo de sitio web

Index.html

<html>

<head>

<title>Sitio personal de Chack</title>

</head>

<body>

<h1>Sitio persona de chack</h1>

<h2>

<a href="datos/datos.html">Datos</a> .....

<a href="nombre/nombre.html">Nombre</a> .....

<a href="zodiaco/zodiaco.html">Zodiaco</a> .....

<a href="conmemoracion/conmemoracion.html">Conmemoracion</a> .....

<a href="famoso/famoso.html">Famoso</a> .....

<a href="index.html">Inicio</a>

</h2>

</body>

</html>

Estilos.css

body {

background-color: black;

}

h1 {

border-style: double;

color: red;

background:darkblue;

text-align: center;

}

h2 {

border-style: double;

color: blue;

background:darkred;

text-align: center;

}

h3 {

border-style: double;

color: yellow;

background:darkgreen;

text-align: center;

}

Datos.html

<html>

<head>

<title>Sitio personal de Chack</title>

</head>

<body>

<h1>Sitio persona de chack</h1>

<h2>

<a href="../datos/datos.html">Datos</a> .....

<a href="../nombre/nombre.html">Nombre</a> .....

<a href="../zodiaco/zodiaco.html">Zodiaco</a> .....

<a href="../conmemoracion/conmemoracion.html">Conmemoracion</a> .....

<a href="../famoso/famoso.html">Famoso</a> .....

<a href="../index.html">Inicio</a>

</h2>

<h3>Hola soy isaac y algunos me dicen chack, soy de Tulancingo,

Hidalgo, Mexico. Soy ingeniero en sistemas computacionales,

me dedico a lo docencia, cree este sitio con fines didacticos

</body>

</html>

Nombre.html

<html>

<head>

<title>Sitio personal de Chack</title>

</head>

<body>

<h1>Sitio persona de chack</h1>

<h2>

<a href="../datos/datos.html">Datos</a> .....

<a href="../nombre/nombre.html">Nombre</a> .....

<a href="../zodiaco/zodiaco.html">Zodiaco</a> .....

<a href="../conmemoracion/conmemoracion.html">Conmemoracion</a> .....

<a href="../famoso/famoso.html">Famoso</a> .....

<a href="../index.html">Inicio</a>

</h2>

<h3>Mi nombre es de origen hebreo, cuyo significado es

"Aquel con el que Dios reira" o "Aquel que hara reir".

</h3>

</body>

</html>

Zodiaco.html

<html>

<head>

<title>Sitio personal de Chack</title>

</head>

<body>

<h1>Sitio persona de chack</h1>

<h2>

<a href="../datos/datos.html">Datos</a> .....

<a href="../nombre/nombre.html">Nombre</a> .....

<a href="../zodiaco/zodiaco.html">Zodiaco</a> .....

<a href="../conmemoracion/conmemoracion.html">Conmemoracion</a> .....

<a href="../famoso/famoso.html">Famoso</a> .....

<a href="../index.html">Inicio</a>

</h2>

<h3>

Mi signo zodiacal es Capricornio,

un Capricornio es uno de los signos del

zodiaco mas estables, seguros y tranquilos.

Son trabajadores, responsables, practicos y

dispuestos a persistir hasta sea necesario

para conseguir su objetivo

</body>

</html>

Conmemoración.html

<html>

<head>

<title>Sitio personal de Chack</title>

</head>

<body>

<h1>Sitio persona de chack</h1>

<h2>

<a href="../datos/datos.html">Datos</a> .....

<a href="../nombre/nombre.html">Nombre</a> .....

<a href="../zodiaco/zodiaco.html">Zodiaco</a> .....

<a href="../conmemoracion/conmemoracion.html">Conmemoracion</a> .....

<a href="../famoso/famoso.html">Famoso</a> .....

<a href="../index.html">Inicio</a>

</h2>

<h3>Naci un 12 de enero y tambien un 12 de enero despego

por primera vez el transbordador Columbia, se empleo para

tramsportar satelites y ser reutilizado

</body>

</html>

Famoso.html

<html>

<head>

<title>Sitio personal de Chack</title>

</head>

<body>

<h1>Sitio persona de chack</h1>

<h2>

<a href="../datos/datos.html">Datos</a> .....

<a href="../nombre/nombre.html">Nombre</a> .....

<a href="../zodiaco/zodiaco.html">Zodiaco</a> .....

<a href="../conmemoracion/conmemoracion.html">Conmemoracion</a> .....

<a href="../famoso/famoso.html">Famoso</a> .....

<a href="../index.html">Inicio</a>

</h2>

<h3>La revolucion cientifica iniciada en el Renacimiento por Copernico y continuada

en el siglo XVII por Galileo y Kepler tuvo su culminacion en la obra del cientifico

britanico Isaac Newton (1642-1727)

</h3>

</body>

</html>

Alojamiento Web (Web Hosting)

El alojamiento web (en inglés: web hosting) es el servicio que provee a los usuarios de Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier contenido accesible vía web. Es una analogía de "hospedaje o alojamiento en hoteles o habitaciones" donde uno ocupa un lugar específico, en este caso la analogía alojamiento web o alojamiento de páginas web, se refiere al lugar que ocupa una página web, sitio web, sistema, correo electrónico, archivos, etc., en internet o más específicamente en un servidor que por lo general hospeda varias aplicaciones o páginas web.

(alojamiento web, 2018)

¿QUE ES UN HOSTING? Hosting es el alquiler virtual de un espacio para publicar su página Web.Al contratar un Hosting, (que en ingles quiere decir hospedaje), usted tendrá un espacio que le permitirá almacenar información, imágenes, vídeo, o cualquier contenido accesible vía Web. HOSTING quiere decir hospedar o alojar aplicado al Internet, significa poner una pagina web en un servidor de Internet para que ella pueda ser vista en cualquier lugar del mundo entero con acceso al Internet.(WEB HOSTING o WEBHOSTING) es un negocio que consiste en alojar, servir, y mantener archivos para uno o más sitios web.

(¿Que es un Hosting?, 2018)

Sitios de web hosting

Uno de los sitos, que ofrecen el servicio de web hosting gratuito es http://260mb.net/, en caso de problemas también puede usar https://mex.000webhost.com/.

La siguiente imagen muestra la interfaz de sitio (del 21 de marzo del 2018), en la cual nos informa de los servicios que ofrece, active la opción de Registrarse.

Llene el formulario, especifique el nombre del subdominio (ej. Abcdb), para el password elija una palabra de ocho caracteres, especifique una dirección de correo electrónico, para activar su cuenta y para casos de recuperación de contraseña. Especifique la categoría del sitio (Educación), el idioma (Español), ingrese el código de seguridad (Ej. FEC93) y envíe la información.

En caso de no tener errores, enviara la siguiente pantalla, en la que indica, que verifiques tu cuenta de correo electrónica para activar el servicio.

Como es un proceso automatizado, es probable que el correo no esté en recibidos, busca en Spam, abre el correo de 260mb y da clic en el vínculo de activación.