El documento describe CSS (Cascading Style Sheets), que son instrucciones que le indican a un navegador cómo presentar la información. CSS separa la forma de la presentación del contenido subyacente. CSS ordena la visualización del contenido a través de selectores y reglas que controlan aspectos como los colores, fuentes y posicionamiento.
Trabajo de Investigación que de algun modo explica el modo de percepción de objetos de una imagen y la manera de interpretar los elementos que la conforman.
Trabajo de Investigación que de algun modo explica el modo de percepción de objetos de una imagen y la manera de interpretar los elementos que la conforman.
Presentación sobre "Barthes y la retórica de la imagen" por Ramirez, Facundo y Pomerane, Camila , Semiología, 3er año Publicidad, Universidad de Belgrano, Argentina.
Calambur, figura retóricas en la publicidadRethorika
Los juegos de palabras/imágenes suponen un mecanismo efectista que da un carácter lúdico al eslogan o al anuncio. El resultado de esta estrategia comunicativa se impone al receptor-consumidor como juego. Podemos considerarlo un mecanismo eficaz para desbaratar la prevención del receptor ante mensajes interesados, útil para aproximar el mensaje al receptor, sobre todo, si es infantil.
Presentación sobre "Barthes y la retórica de la imagen" por Ramirez, Facundo y Pomerane, Camila , Semiología, 3er año Publicidad, Universidad de Belgrano, Argentina.
Calambur, figura retóricas en la publicidadRethorika
Los juegos de palabras/imágenes suponen un mecanismo efectista que da un carácter lúdico al eslogan o al anuncio. El resultado de esta estrategia comunicativa se impone al receptor-consumidor como juego. Podemos considerarlo un mecanismo eficaz para desbaratar la prevención del receptor ante mensajes interesados, útil para aproximar el mensaje al receptor, sobre todo, si es infantil.
Análisis de las sedes web de los archivos nacionales de HispanoaméricaAmalia Mas-Bleda
Defensa de la tesis titulada "Análisis de las sedes web de los archivos nacionales de Hispanoamérica: estudio de su evolución y propuestas de mejora" (2006-2009)
Curso impartido desde la asociación IEEE Student Branch of Granada por Rubén Martín y Julián Fernández (yo). La primera parte hace referencia al lenguaje XHTML y la segunda a las hojas de estilos en CSS3
1. CSS
Instrucciones que debe seguir un navegador para
presentar la información
taller_media
viernes 26 de agosto de 2011
2. Separar al máximo la forma
(presentación) y el fondo (datos)
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
3. contenido
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
4. maquetación
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
5. SINTAXIS
COMO ESCRIBIMOS AQUELLO QUE QUEREMOS VISUALIZAR
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
6. css ordena la visualización del contenido
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
7. css ordena la visualización del contenido
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
8. velocidad de carga
El código web de calidad se optimiza para que los
elementos propios del diseño (fondos, estilos de texto,
modalidades de presentación de elementos...) sea ligero,
esto es, con pocas instrucciones se consiga el efecto
visual deseado, y se reutilice múltiples veces.
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
9. tipos de selectores
etiquetas: nativas de HTML
identidad: posicionamiento, un elemento
clase: múltiples elementos
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
10. Selector: Etiqueta
¿Dónde?
body
{
background-color:#FFFFFF;
}
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
11. documento
body
{
background-color:#FFFFFF;
}
etiqueta
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
12. Selector: Identificador individual
¿Dónde?
#encabezado
{
background-color:#666666;
}
1
vez por documento
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
13. documento
body
{
background-color:#666;
}
id
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
14. Selector: Identificador común
¿Dónde?
.datos
{
background-color:#00FFCC;
}
+1
vez por documento
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
15. documento
body
{
background-color:#00FFCC;
}
class
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
16. reglas básicas
para trabajar con CSS
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
17. JERARQUÍA
autor - usuario - navegador
<h1>Hola</h1>
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
18. JERARQUÍA Hola
autor - usuario - navegador
<h1>Hola</h1>
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
19. JERARQUÍA Hola
autor - usuario - navegador
<h1>Hola</h1> HTML
h1
CSS
{
color:red;
}
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
20. JERARQUÍA Hola
autor - usuario - navegador
<h1>Hola</h1> HTML
h1
CSS
{
color:red;
}
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
21. ESPECÍFICO
GENÉRICO
<body>
<h1>Hola</h1>
HTML
<p>Contenido</p>
</body>
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
22. ESPECÍFICO
GENÉRICO Hola
Contenido
<body>
<h1>Hola</h1>
HTML
<p>Contenido</p>
</body>
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
23. ESPECÍFICO
GENÉRICO Hola
Contenido
<body>
<h1>Hola</h1>
HTML
<p>Contenido</p>
</body>
body
CSS
{
color:red;
}
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
24. ESPECÍFICO
GENÉRICO Hola
Contenido
<body>
<h1>Hola</h1>
HTML
<p>Contenido</p>
</body>
body
{
color:red;
}
CSS
p
{
color:blue;
}
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
25. ESPECÍFICO
GENÉRICO Hola
Contenido
<body>
<h1>Hola</h1>
HTML
<p>Contenido</p>
</body>
body
{
color:red;
}
CSS
p
{
color:blue;
}
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
26. SINTAXIS
EXTRICTA Hola
Contenido
<body>
<h1>Hola</h1>
HTML
<p>Contenido</p>
</body>
BODY
{
}
color:red;
CSS
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
27. SINTAXIS
EXTRICTA Hola
Contenido
<body>
<h1>Hola</h1>
HTML
<p>Contenido</p>
</body>
BODY
{
}
color:red;
CSS
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
28. CONTENEDORES
DIV
La etiqueta <div> o división de bloque es un elemento de
html utilizado para definir secciones de un documento.
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
29. contenedores
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
30. CONTENEDORES
DIV
Una etiqueta <div> define un bloque donde incluiremos
información dentro de nuestro documento. A este bloque
definido con la etiqueta <div> le asignaremos por medio
del CSS, las propiedades de posición, tamaño, color, etc
etc.
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
31. <body>
<div>
etiquetas de definición de un contenedor dentro de un
documento html
</div>
</body>
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
32. imaginemos los divs
como cajas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
33. En una pagina web standard, se
visualizan normalmente 4 cajas
imaginarias:
- Contenedor principal
- Cabezal
- Cuerpo
- Pie
estructura
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
34. veamos algo mas
gráfico
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
35. Tenemos el cuerpo de la
página, y dentro de ella
metemos cajas y las
ubicamos como queremos y
donde queremos.
estructura
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
36. } menu
} banner
} cuerpo
footer
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
37. <body>
<div id="contenedor">
<div id="menu">
</div>
<div id="banner">
</div>
<div id="cuerpo">
</div>
<div id="footer">
</div>
</div>
</body>
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
38. si pasamos esto a
CSS
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
39. #menu {
height: 52px;
width: 968px;
background-color: #00F;
}
#slices {
height: 359px;
width: 968px;
background-color: #FF0;
}
#cuerpo {
height: 700px;
background-color: #C60;
}
#contenedor {
width: 968px;
}
#footer {
height: 50px;
width: 968px;
background-color: #C09;
}
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
40. 2 atributos básicos
float
clear
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
41. float
La propiedad float permite sacar a un elemento del flujo
del documento, y posicionarlo a la izquierda o derecha
de otros elementos adyacentes. Admite tres valores, right,
left y none.
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
42. FLOAT 1
<div id=“caja1”>1 </div> 2
3
<div id=“caja2”>2 </div> HTML
<div id=“caja3”>3 </div>
#caja1
{
border-color:red
float:left; CSS
}
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
43. FLOAT 1 2
<div id=“caja1”>1 </div> 1 3
<div id=“caja2”>2 </div> HTML
<div id=“caja3”>3 </div>
#caja1
{
border-color:red
float:left; CSS
}
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
44. FLOAT 1 2
<div id=“caja1”>1 </div> 1 3
<div id=“caja2”>2 </div> HTML
<div id=“caja3”>3 </div>
#caja1
{
border-color:red
float:left;
CSS
}
#caja2
{
border-color:blue
float:left;
width:25px;
}
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
45. FLOAT 1 2 3
<div id=“caja1”>1 </div>
<div id=“caja2”>2 </div> HTML
<div id=“caja3”>3 </div>
#caja1
{
border-color:red
float:left;
CSS
}
#caja2
{
border-color:blue
float:left;
width:25px;
}
reglas básicas
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011