DISEÑO Y EDICIÓN DE PÁGINAS WEB

DISEÑO Y EDICIÓN DE PÁGINAS WEB

Trabajo realizado por Mar Albaladejo Ramírez.

BIBLIOGRAFÍA

TAB L A C O N T E N I D O S

Alojamientos de sitios web y transferencia de ficheros

El lenguaje HTML

Introducción

El lenguaje JavaScript

Páginas web

Herramientas de publicación: gestores de contenido

Editores de páginas web

Criterios de diseño

Introducción

El diseño de páginas web es la acción de planificar, diseñar, implementar y mantener la interfaz interactiva y funcional de cualquier sitio web, con los objetivos de transmitir fielmente la imagen de la empresa o marca y, a la vez, lograr una experiencia del usuario final agradable e intuitiva.

Páginas web

PULSA

Lo que habitualmente llamamos web es en realidad un sitio web (website), es decir, un conjunto de documentos enlazados entre sí, a los cuales se accede a través de una dirección común. Los documentos que constitu yen un sitio web son archivos y carpetas que contienen texto, fotografías, botones, iconos, animaciones... y que se han creado para ser vistos por usuarios con ordenadores y navegadores de distintas características.

¿Cómo crear una web?

Una página web se puede crear directamente escribiendo en HTML en cualquier editor de textos y guardandolo con la extensión adecuada (.html o.htm), pero no se suele hacer así más que con fines educativos. En la práctica real se utilizan editores de páginas web, que permiten diseñar webs de una forma más sencilla e intuitiva. A grandes rasgos existen editores de dos tipos:

CLASIFICACIÓN

Son páginas que el servidor interpreta en cada caso, de forma que, sin hacer cambios en el código, devolverán diferentes resultados en función de la actuación del usuario.

ESTÁTICAS

DINÁMICAS

Son aquellas que no cambian, que muestran siempre el mismo contenido cada vez que las cargamos. Se realizan en lenguaje HTML.

Usuarios

Sitio remoto alojado en el servidor

Programas de transferencia de ficheros

Administrador en el sitio local

FUNCIONAMIENTO

Criterios de diseño

PREDISEÑO DE UNA WEB

Pensando en nuestros futuros visitantes debemos:- Crear una jerarquia visual clara en cada página. - Utilizar las convenciones. - Dividir las páginas en áreas definidas. - Facilitar el acceso a los enlaces. - Omitir contenidos innecesarios (simplificar).

Creatividad

17,520

Estructura de una web

ELEMENTOS DE DISEÑO

En la evolución de la página inicial de Google se observa una simplificación visual en conjunto. En el logo se usan colores más planos y puros, una tipografía sencilla y más geométrica y que muestra una pérdida de volumen El resultado es un logo más estilizado, limpio y moderno, sin perder la esencia de Google, que lo considera "simple, amigable y cercano".

En cuanto a los elementos de maquetación: 1. Elementos gráficos y tipográficos. Son, por ejemplo, la tipografía, el pun-to, la línea, la forma y el color. Ninguna maquetación digital puede pasar sin ellos. 2. Elementos de imagen. Las fotografías, ilustraciones, símbolos e iconos atraen las miradas en cualquier maquetación. 3. Elementos funcionales. Convierten una maquetación digital en la interfaz de un medio digital. Son los elementos que pueden seleccionarse entre las herramientas del editor o bien diseñarse. Por ejemplo los botones, los hiper-vínculos.

En la fase de diseño entran en juego dos conceptos diferenciados: la maquetación y la interfaz.

(Consejo)

TIPOGRAFÍA

(Elementos gráficos y tipográficos)

ANÁLISIS DEL PREDISEÑO Y DE ELEMENTOS GRÁFICOS Y TIPOGRÁFICOS

5. TIPO DE LETRA

4. DIRECTRICES

¿Cuáles se usarán en cuanto a forma, organización y estructura?

3. CONTENIDOS

¿Qué contenidos se quieren mostrar?

2. PÚBLICO

¿A quién se dirige?

1. OBJETIVO

¿Qué se pretende conseguir con la web?

(Análisis de elementos funcionales)

ANÁLISIS DE ELEMENTOS DE IMAGEN Y DE ELEMENTOS FUNCIONALES

10. PERSONALIZACIÓN DE CONTENIDOS, CAMBIO DE IDIOMA

9. CAMBIO DE TAMAÑO DE LETRA O ALTO CONTRASTE

(Análisis de elementos funcionales)

8. DISPONE DE BUSCADOR

(Análisis de elementos funcionales)

7. USO DE ILUSTRACIONES, IMÁGENES E ICONOS

(Análisis de elementos de imagen)

6. USO DE COLORES

(Análisis de elementos de imagen)

Según la legislación española, las páginas web de organismos públicos deben satisfacer los estándares para personas con discapacidades. Existe un compromiso para que los sitios web cumplan unas normas que les permitan ser visitados y utilizados por el mayor número posible de personas. Se trata de minimizar el efecto de las limitaciones físicas y técnicas de los posibles visitantes. Estos criterios, llamados criterios de accesibilidad, están recogidos por el World Wide Web Consortium. La WAI es una rama del W3C que establece niveles de conformidad o accesibilidad para las webs en función del grado de cumplimiento de dichos criterios, desde los más básicos hasta los más exigentes.

ESTÁNDARES DE ACCESIBILIDAD DE LA INFORMACIÓN

Los estándares de publicación más básicos son: • Utilizar hojas de estilo. • Asegurarse de que la página se ve bien en distintos navegadores. • Usar las etiquetas de texto alternativo para describir la función de los elementos visuales. • Facilitar la trascripción de los ficheros de sonido y la descripción de los vídeos. • Organizar las páginas usando encabezados, listas y una estructura consistente. • Realizar tablas de manera que se puedan leer línea a línea. • Revisar y validar el código HTML.

Herramientas de publicación.

LAS HERRAMIENTAS DE PUBLICACIÓN.

Las herramientas de publicación son herramientas relativamente fáciles de usar que permiten al usuario crear sus propios contenidos y publicarlos en Internet sin la necesidad de contar con conocimientos técnicas de diseño o programación. De acuerdo con las características de los contenidos que se vayan a tratar, se pueden utilizar distintas herramientas, como vimos en la unidad anterior. En esta unidad nos centraremos en los gestores de contenidos.

WIKI

BLOGS

GESTORES DE CONTENIDO

Un gestor de contenidos es una herramienta de publicación que permite generar contenidos web y editarlos y actualizarlos online sin necesidad de contar con conocimientos técnicos de diseño o programación. En inglés se conoce como CMS. Los gestores de contenidos se basan en plantillas ya definidas que el usuario puede adaptar y personalizar según sus gustos, lo cual abarata los costes de creación de las páginas web y ahorra tiempo en su elaboración.

WORDPRESS

DRUPAL

JOOMLA

ALGUNOS GESTORES DE CONTENIDO

+ Info

+ Info

+ Info

EL LENGUAJEHTML

+ Info

HTML

El HTML es el lenguaje usado para la construcción de páginas web. Por convención, los archivos de formato HTML usan la extensión .htm o .html.

CARACTERÍSTICAS DEL LENGUAJE HTML

ETIQUETAS Y ATRIBUTOS DEL LENGUAJE HTML

NAVEGADORES

Se trata de un lenguaje diseñado para incorporar etiquetas específicas de funcionalidades multimedia. Con su lanzamiento ha comenzado el declive del que hasta ahora era el rey del con-tenido multimedia, el lenguaje Flash. Este declive se ha acentuado por la negativa de algunos de los principales fabricantes a que funcione Flash en sus dispositivos. Una vez desarrollado el estándar, la implementación del lenguaje por parte de los diferentes navegadores está siendo paulatina, dado que muchos de ellos crearon su propia versión de HTML5 (no regida por el W3C y que, por lo tanto, no funciona exac tamente igual).

EL LENGUAJE JAVASCRIPT

LENGUAJE

JavaScript es un lenguaje dinámico que se ejecuta en local en el ordenador, es decir es el propio navegador el que se encarga de la ejecución de las instrucciones de este lenguaje. La diferencia con HTML es que, con éste, el navegador presenta la información, mientras que con JavaScript podemos interactuar con la página, es decir, el navegador interpreta y ejecuta el código Este hecho lo convierte en el lenguaje ideal para, por ejemplo, validar datos en formularios, como paso previo al envío al servidor para su almacenamiento.

EDITORES DE PÁGINAS WEB

+ Info

Los editores de páginas web son aplicaciones que permiten crear páginas web Ya hemos visto al principio de la unidad que los editores WYSIWYG nos permiten confeccionar una web como si estuviéramos escribiendo un documento con un procesador de texto y generan automáticamente el código fuente en HTML. Los editores NVU o Kompozer son editores avanzados, libres y multiplataforma.

ALOJAMIENTO DE SITIOS WEB Y TRANSFERENCIA DE FICHEROS

Generalmente, las empresas que ofrecen servicios de Internet incluyen espacios para sus clientes. Algunos son gratuitos, otros incluyen publicidad pero tienen condiciones limitadas o bien esperan que los usuarios acaben contratando planes de pago con mayores posibilidades.

El último paso para que la página web que hemos creado pueda ser vista por otros usuarios es situar en un servidor de Internet. Desde ese momento debemos mantener el sitio web y actualizar sus contenidos en la medida en que sea necesario.

ALOJAMIENTO DE SITIOS WEB

Los programas de transferencia de ficheros (FTP) son los encargados de comunicar nuestro ordenador con el servidor que nos brinda alojamiento, de forma que ese conjunto de archivos que componen nuestro sitio web y que manipulamos en nuestro ordenador local puedan sustituir, cuando sea necesario, a los que aloja el servidor.

TRANSFERENCIA DE FICHEROS

Libro Tecnologías de la información y la comunicación. 2 Bachillerato.

BIBLIOGRAFÍA

FIN

¡GRACIAS!

El primer paso para diseñar una web es la fase que podemos llamar prediseño. Debemos analizar qué objetivos queremos conseguir con nuestra web y posteriormente construirla según la planificación marcada para que se cumplan esos objetivos.

Google permite realizar búsquedas de diversos tipos. Las habituales búsquedas de texto se complementan con un buscador de imágenes y un buscador de videos, entre otros.

El código HTML siempre empieza con la etiqueta de apertura <html> y siempre acaba con la etiqueta de cierre </html>.

El uso de colores es muy reducido. Se utiliza el blanco para el fondo de todas las páginas, y colores básicos para mostrar el texto (negro para el texto, azul y verde para los enlaces y rojo para destacados).

VS

Con un editor WYSIWYG

El código no es tan limpio. No se maneja el código (es la máquina la que lo maneja). El aprendizaje es sencillo. Hacer una página es relativamente rápido.

Escribiendo en HTM

- El código queda más limpio. - Es más fácil reutilizar código. - El código se maneja con más precisión. - Es necesario manejar HTML. - El aprendizaje es más difícil. - Hacer una pagina lleva más tiempo.

El uso de gestores de contenido facilita la creación de páginas web para un usuario poco experto. La función de los navegadores que utilizamos habitualmente (Chrome, Firefox, Edge etc.) es interpretar ese lenguaje y transformarlo en la página web que se nos muestra.

Para acceder a las páginas web usamos un navegador (Mozilla Firefox, Microsoft Edge, Google Chrome, etc.), que se encarga de comunicar el ordenador con los servidores que albergan las páginas web, descargar las páginas y mostrarlas.

LENGUAJE

El lenguaje básico que se usa para crear los documentos que conforman el sitio web es el HTML (hypertext markup language, lenguaje de marcas hipertextuales). La últi ma versión de este lenguaje es HTML5.

NAVEGADOR

• Los blogs, que son como diarios en Internet, constituyen otra herramienta de expresión y comunicación. En ellos se publican de manera instantánea entradas (también llamadas artículos o posts) que se organizan cronológicamente empezando por la más reciente. Los lectores pueden publicar comentarios en cada una de las entradas.

Google no dispone de una opción específica de cambio de tamaño de texto o de alto contraste (más allá de su propio diseño de fondo blanco con los textos en color oscuro).

Google utiliza, en sus páginas interiores, una letra estándar, sin serifa, de tamaño normal. Básicamente, se utilizan el color negro para los textos, el azul para los enlaces descriptivos y el verde para las direcciones URL. El subrayado sirve para los enlaces y no se emplea la cursiva. Para facilitar la lectura, en la página de resultados se resaltan con negrita las palabras buscadas.

El contenido básico, una vez hecha la búsqueda, está formado por los resultados, que son frases descriptivas y enlaces a las páginas encontradas. Los contenidos se ordenan en función de un algoritmo propio de Google y cambian con cada criterio de búsqueda establecido.

Está desarrollado en lenguaje PHP por una comunidad de desarrolladores. Es una opción muy recomendable si nuestra página web va a recibir muchas visitas, porque admite más que WordPress. Está orientado a comunidades y permite definir varios perfiles de usuarios con permisos y accesos diferentes. Es muy seguro.

Los sitios web son creados por programadores y diseñadores. Una vez creados, las personas encargadas de mantenerlos se llaman administradores. El proceso de trabajo habitual de un administrador es crear en su ordenador el conjunto de archivos que conforman la web. El administrador manipula estos archivos. Los servidores son ordenadores que alojan las páginas web y las ponen a disposi ción de toda la red.

INTERFAZ

La interfaz es el conjunto de comandos y métodos que facilitan la interacción entre el usuario y el sistema (el sitio web). Debe tenerse en cuenta el dispositivo de salida: ordenador, teléfono móvil, tableta digital...

MAQUETACIÓN

La maquetación se encarga de organizar espacios y contenidos escritos, visuales y audiovisuales. Abarca los aspectos semánticos y formales de una aplicación digital.

En estos sitios nos debemos conformar con la URL que nos asignen para nuestra página, pero también tenemos la posibilidad de comprar un dominio con el nombre que queramos, algo usual para la mayoría de las empresas e incluso muchos particulares. Desde el inicio de Internet, los nombres de dominio han generado toda una industria a su alrededor. Los dominios más codiciados son aquellos que contengan palabras como juegos, viajes, vuelos, etc. Algunos de ellos fueron comprados por particulares con visión de negocio en Internet y posteriormente se vendieron por miles e incluso millones de dólares.

El entorno de trabajo de ambos es muy similar, así que para empezar a usar un editor de páginas web nos vale cualquiera de ellos. En las prácticas de la unidad nos referiremos a KompoZer porque es más sencillo de obtener (en especial, la extensión para poner el menú en español), pero se puede usar también NVU. Ni KompoZer ni NVU soportan HTML5.

Un elemento de HTML está compuesto de dos etiquetas (la de apertura y la de cierre).

En las páginas de Google hay un claro predominio del texto (descripción y enlaces). Prácticamente se renuncia al uso de imágenes, salvo en el logotipo y en los enlaces de paginación.

También desarrollado en lenguaje PHP, es menos eficiente que WordPress para la creación de blogs pero resulta muy atractivo para el diseño de revistas digitales.

Aunque permite elaborar cualquier tipo de sitios web, se utiliza principalmente para la creación de blogs. Está desarrollado en lenguaje PHP. Por su facilidad de uso, es el CMS más utilizado actualmente.

Puedes comprobar la compatibilidad de tu navegador visitando la siguiente página: html5test.com Por otro lado, a través del enlace indicado a continuación podrás encontrar algunos ejemplos de páginas desarrolladas con HTML5: html5demos.com

Para acceder a las páginas web, los usuarios utilizan un navegador (Google Chrome, Mozilla Firefox, Internet Explorer, etc.), que se encarga de comunicar cada ordenador con los servidores que albergan las páginas web, descargar las páginas y mostrarlas.

El lenguaje HTML se escribe en forma de etiquetas entre corchetes angulares (<>). Pueden ser de apertura (por ejemplo: <body>) o de cierre (por ejemplo: </body>); ésta se distingue de la primera por la barra (/).

Un sencillo documento creado en HTML tiene el aspecto de la figura. En un documento HTML se distinguen dos partes principales: El encabezado, comprendido entre las etiquetas <head> y </head> que constituye una instrucción de cabecera del documento, como el título. El cuerpo, comprendido entre las etiquetas <body> y </body>, que constituye el contenido de la página.

Las etiquetas se completan con atributos, que son parámetros que definen las propiedades o el comportamiento de la etiqueta; están siempre en la eti-queta de apertura y su valor va siempre entre comillas.

Prima la sencillez. Básicamente se trata de una caja de texto (donde se introducen las palabras de la búsqueda) y un botón para comenzar el proceso de búsqueda. Está diseñada con fondo bianco y únicamente destaca el colorido diseño de su logotipo, que es la imagen de marca del buscador.

En el tema usaremos FileZilla, programa de transferencia de ficheros libre y multi-plataforma. El navegador Firefox también sirve como programa de transferencia de ficheros si se le añade un complemento que se llama FireFTP, y algunos editores, como NVU o KompoZer, permiten publicar directamente las páginas web.

Google permite una personalización muy avanzada de contenidos a través de su herramienta Google. Desde ella puedes hacer cosas como personalizar noticias, recibir información del tiempo o habilitar un acceso a Gmail. También permite el uso de varios idiomas.

Para que la página web que tiene el administrador pueda ser vista por otros usuarios, debe estar situada en un servidor de Internet, ofrecido normalmente por empresas privadas.

Editores WYSIWYG. Son aquellos que nos permiten confeccionar una web como si estuviéramos escribiendo un documento y generan automáticamente el código fuente en HTML.Editores que trabajan directamente con HTML. Requieren un conocimiento avanzado del lenguaje HTML

La sencillez de su diseño permite que todo tipo de público utilice este buscador. La variedad de público que lo visita es una de las características que sustentan su modelo de negocio basado en la publicidad.

Tiene una estructura lineal de páginas (página siguiente, página anterior). En cuanto a la organización, tiene una cabecera en la cual destaca el logo y que contiene enlaces a otras aplicaciones de Google. Los contenidos ocupan la parte principal de la página. No dispone de un menú de navegación.

Son los programas encargados de comunicar el ordenador local con el servidor que brinda alojamiento, de forma que ese conjunto de archivos que componen el sitio web y que manipula el administrador en su ordenador local puedan sustituir, cuando sea necesario, a los que aloja el servidor.

• Una wiki es un sitio web de construcción colectiva sobre un tema específico. Facilita la discusión sobre temas diversos y puede ser editada por cualquier usuario desde la Web (añadiendo, modificando o eliminando contenidos). La más conocida mundialmente es Wikipedia.

Es la persona responsable de mantener el sitio web y actualizar los contenidos, así como de transferirios al servidor.