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-ﬂash"
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=”ﬁchero_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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Diseño en la web

Similar a Diseño en la web (20)

Más de Miguel Gea

Más de Miguel Gea (18)

Último

Último (20)

Diseño en la web