Diseño en la web

Seminario

Miguel Gea http://utopolis.ugr.es/mgea Dpt. Lenguajes y Sistemas Informáticos Universidad de Granada

Act. Feb- 2015 Creative Commons by-nc-sa

Diseño para la Web:

WWW y HTML Gestores de Contenido (CMS)

Blogs

Miguel Gea. Diseño para la Web 2

Herramientas diseño Web

- Web: Estructura Cliente/Servidor

Servidor Web

Cliente

https://dotsub.com/view/25f1be59-9a84-4d75-94ef-acd0b5ccf0af https://www.youtube.com/watch?v=l6IsN8Mv5Hk


Herramientas diseño Web

- Web: Estructura Cliente/Servidor

Servidor Web

Cliente

PHP, JSP, perl, ASP HTML, CSS, javascript, applet Java

Firefox, IE, chrome,… Apache, Tomcat, IIS

Tecnología Cliente Tecnología Servidor


HTML

HTML, lenguaje para describir Hipertexto. Basado en etiquetas (inicio y fin de marca) Es un lenguaje en crecimiento. Actualmente HTML4. Desarrollo futuro sobre HTML5. Incompatibilidades hacia atrás Estructura básica de una página HTML:

<html> <head> <title> Titulo página </title> </head> <body> Cuerpo del documento…. </body> </html>

Inspección en Firefox (complemento: Firebug)


HTML: Formato y estilos

Descripción básica de páginas y texto (el texto se ajusta al tamaño de ventana de navegador). Elementos: Estilos predefinidos: h1…h6, separación de párrafos <p>, atributos de texto, <b> (negrita), <em> (itátilca), <tt> (texto tipo máquina escribir), etc.


HTML: Hipertexto y Multimedia (HTML4)

Enlaces a páginas. Parte del documento (texto) actúa como hiperenlace. <a href=“http://www.ugr.es”> Enlace a UGR </a>

Enlaces de imágenes (GIF, JPG, PNG). Incrusta una imagen que se encuentra en una URL local (en servidor) o externa. <img=“http://www.ugr.es/~senewman/images/logo_ugr.gif”>

Incrustar sonido y video usando <embed>. Puede ser necesario en algunos casos instalar los códecs adecuados.(Hay códigos específicos de diferentes navegadores, BGSOUND en Internet Explorer)

<embed src=”sonido.mp3” WIDTH=“150” HEIGHT=“65” loop=“TRUE” >

Incrustar cualquier tipo de “objeto” <object> (video, pdf, flash,….) Ej. Youtube

<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/J3OtzDWBwOo?hl=es_ES&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/J3OtzDWBwOo?hl=es_ES&version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>


ESTRUCTURA PAGINA WEB

CONTENIDO (HTML)

PRESENTACION (CSS)

COMPORTAMIENTO (JAVASCRIPT)

La evolución de HTML (y la información que se transmite en las páginas web) requiere una separación en 3 capas.


Lenguaje de programación en cliente. Definición de funciones en cabecera. Llamada a código con <script>.

<html> <head> <title>Pagina web</title> <script type="text/javascript"> var mi_numero = 1; function calcula(numero) { return numero + mi_numero; } </script> </head> <body> <script> document.write(calcula(1)); </script> </body> </html>

JavaScript


Uso para preferencias/datos almacenados en el navegador (cookies)

JavaScript

http://www.invattur.org/post/2013-11-14-como-adaptarse-a-la-ley-de-cookies-en-espaa


Lenguaje de estilos que define la presentación de los documentos HTML. Estructura jerárquica de dependencias. Modo de aplicar estilos:

selector { propiedad : valor }

- Selector: elemento HTML que se le aplica el estilo. - Propiedad: atributo a modificar (color, posición, tipo de letra…) - Valor: valor de la propiedad

h1 { color: #0000FF; background-color: #FFFF00; font-family: arial, verdana, sans-serif; font-size: 30px; }

Se puede escribir en fichero externo todo el estilo: <head> <link rel="stylesheet" type="text/css" href=”fichero_estilos.css" /> </head>

CSS (cascading Style Sheet)


HTML 5

Mayor control sobre la estructura de la página y tipo de contenidos. Uso de etiquetas para definir las secciones básicas de contenidos. Estructura similar a un Blog.

Etiquetas específicas para <audio> y <video>

<audio src=”audio.mp3″ type=”audio/mp3″ controls autoplay /> <video src=”video.AVI” controls autoplay />


GESTORES DE CONTENIDO (CMS)

UN CMS (Content Managment System) o gestor de contenido es una aplicación informática usada para crear, editar, gestionar y publicar contenido digital multimedia (en la Web) en diversos formatos.

Se dispone de plantillas y funciones para gestionar usuarios, añadir contenidos, modificar la apariencia sin tener que conocer detalles de código HTML.

Para almacenar la información requieren de una base de datos y un lenguaje de programación de los distintos módulos.

Pueden ser servicios online o paquetes que hay que instalar en un servidor.


GESTORES DE CONTENIDO (CMS)

Los CMS más populares son:

- Gestores de comunidades: -  drupal (http://www.drupal.com/) -  joomla (http://www.joomla.org/)

-  Blogs -  Wordpress (http://www.wordpress.org/) -  Wordpress (http://www.wordpress.com/) ONLINE -  Blogger (http://www.blogger.com/ adquirido por google) ONLINE

-  Portfolio -  Behance (http://www.behance.net/) ONLINE -  DevianArt ( http:///www.deviantart.com/) ONLINE

-  Escritorios -  Netvibes (http://www.netvibes.com/ ) ONLINE


BLOGS

Enlaces: - permanente (permanent-link) -  trackback (enlaces inversos) -  blogroll (lista enlaces a otros blogs) -  sindicación (seguimiento RSS)

Los Blogs es un cuaderno digital donde periódicamente se publican artículos. Más del 10% de sitios web están basados en Blogs


BLOGS

Organización. Categorías / etiquetas. Fechas.


BLOGS

Estilo del blog: -  Basado en temas (CSS) -  Plugins

-  Estilo de Web Adaptativo (Responsive Web design) VS Tamaño Fijo 1, 2 o 3 columnas Adaptado para dispositivos móviles Ej: Bootstrap: http://getbootstrap.com/examples/theme/


BLOGS: Consejos de Diseño

-  Simplificar diseño. Estilo orientado a tu audiencia. Legibilidad, centrar atención en contenido

- Adaptado para diferentes navegadores (incluidos móviles)

-  Facilitar la comunicación

- Promocionar medios sociales.


BLOGS: Uso

-  Bitácora / Diario -  Tematica: resolver dudas… -  Porfolio -  monetización (sponsorización/publicidad) -  de autor/opinión -  revista -  (CV)


BLOGS http://utopolis.ugr.es/cmi


Recursos:

Tutorial interactivo HTML/CSS/JavaScript

http://www.w3schools.com/


Referencias

[HTML4] Reference Guide http://www.w3.org/TR/REC-html40/ Guía de referencia HTML4 http://html.conclase.net/w3c/html401-es/cover.html

[HTML5] Referencia HTML5: http://dev.w3.org/html5/html-author/ Novedades http://www.jmocana.eu/2011/01/07/html5/ Cómo usarlo: http://www.trazos-web.com/2010/02/01/html5-que-es-y-como-usarlo/

[CSS] Tutorial CSS http://es.html.net/tutorials/css/

Tutorial interactivo (HTML Java, CSS): http://www.w3schools.com/

EDITORES HTML: Notepad++ (Win) http://notepad-plus-plus.org/ Textwrangler (Mac) http://www.barebones.com/products/textwrangler/

Diseño en la web

Design

Transcript of Diseño en la web