LLUITEM COMUNICANT - Inici



PRODUCCIÓN MULTIMEDIA

El término multimedia se utiliza para referirse a cualquier objeto o sistema que utiliza múltiples medios para presentar o comunicar información: texto, números, gráficos, imágenes fijas o en movimiento, animaciones, sonidos, interactividad.

Clasificación

• Multimedia educativa, e-learning

• Multimedia publicitaria, viralidad

• Multimedia comercial, su objetivo es convencer a un posible comprador o cliente de adquirir un servicio o producto.

• Multimedia informativa, noticias, prensa, revistas, televisión, diarios

Hipermedia

Hipermedia podría considerarse como una forma especial de multimedia interactiva que emplea estructuras de navegación más complejas que aumentan el control del usuario sobre el flujo de la información.

Hipermedia es el término con el que se designa al conjunto de para crear contenidos que integren soportes tales como: texto, imagen, video, audio, mapas y otros soportes de información emergentes, de tal modo que el resultado obtenido, además tenga la posibilidad de interactuar con los usuarios.

El término "hiper" se refiere a "navegación", de allí los conceptos de "hipertexto" (navegación entre textos) e "hipermedia" (navegación entre medios).

HTML

Para dar formato a la página (bases del html, hipertexto, etiquetas, bloques de construcción)

Lenguaje de etiquetas

Un lenguaje de etiquetas (markup language) es una forma de codificar un documento de modo que junto con el texto se incorporan etiquetas (tags) que contienen información adicional acerca de su estructura o su presentación.

HTML define cuales son las etiquetas estándar para presentar información en Internet (texto, imágenes, etc.) para que cualquier navegador web las pueda interpretar. Podemos decir que HTML es básicamente un conjunto de etiquetas que sirven para definir el texto y otros elementos que compondrán una página web.

Ej: …

La finalidad de los navegadores es interpretar estas marcas y construir la página web que verá el usuario al navegar por internet. Es decir, al visualizar una página web en nuestro ordenador o móvil lo que vemos es la traducción que hace el navegador del código HTML para que podamos consumir la información de forma cómoda y atractiva.

Mi primera web

Hola mundo

Hipervínculo:

Es un elemento de un documento electrónico que hace referencia a otro.

Ej: Link a google

Etiquetas en la cabecera:

Etiquetas en el body:

Las etiquetas siempre se abren y se cierran ( ... ), excepto aquellas que no almacenan contenido, que se cierran enla propia etiqueta (, )

Atributos:

Ofrecen información adicional sobre la etiqueta. (marcado con azul)

Ejemplo: si existiera la etiqueta coche, algunos de sus atributos serían

el modelo, la marca, etc…

Mini

- Atributo Descripción

class: Especifica un estilo css

Id: Especifica un identificador único

Style: Añade un estilo css en la propia etiqueta

Title: Info extra que se muestra como capa flotante

Anidación de elementos:

[pic]

-

La etiqueta div es un contenedor de otras etiquetas, que se usa para estructurar el contenido.

- Margin y padding

[pic]

Anclas

Las anclas son son hipervínculos dentro del propio documento.

Ancla 1

[….]

…

Imágenes:

img/imagen.jpg -> ../imagen.jpg

img/subcarpeta/imagen.jpg -> ../../imagen.jpg

.fondo {background-image:url(../img/imagen.jpg);}

- JPG: fotografías

- GIF: iconos (se usa poco)

- PNG: transparencias o iconos

Elementos de bloque: , ,,,…

Elementos inline: , , , ,

CSS:

Es un lenguaje usado para la rpesentación (aspecto y formato) de un documento HTML.

[pic]

Las hojas de estilos se encargan de la presentación gráfica del documento. Un mismo código HTML puede presentarse de formas muy distintas según su CSS ()

|HTML |CSS |

| |p { color: red; } |

| |.rojo { color: red; } |

| |#cabecera { color: red; } |

Formas de insertar CSS:

• Hoja de estilos interna: Definida en el head

P {margin-left:20px;}

• Hoja de estilos externa: En un archivo css

• Estilos en línea: En el propio elemento HTML

Esto es un párrafo.

CSS= Cascade Style Sheet (Hoja de estilos en cascada):

¿Qué estilo se usa cuando hay más de uno definido para un elemento HTML?

1. Estilos que aplica el explorador por defecto

2. Hoja de estilos externa

3. Hoja de estilos interna (en el head)

4. Estilos en línea (en el propio elemento HTML)

Posicionamiento de capas: Float

Con la CSS float, un element puede ser “empujado” hacia la derecha o la izquierda, permitiendo que otros elementos se sitúen a su alrededor. Es una propiedad necesaria cuando trabajamos con layouts de varias columnas.

[pic]

[pic]

[pic]

CSS. Regla de los pesos

etiqueta = unidad

clase = decena

id = centena

Ej: #caja p{ color:red; } /* 101 */

Resoluciones de pantalla:

[pic]

Caracteres especiales

< <

> >

(espacio en blanco)  

& &

“ "

© ©

Mirar en:

INTERNET

¿Cómo funciona? Servidor, cliente, bases de datos, dominios, historia, estándares…

El servidor es un ordenador conectado a internet esperando que le hagan peticiones y en él se almacenan los archivos html, css, imágenes…

El explorador web hace una petición y el servidor web le devuelve el archivo correspondiente.

Una dirección IP es una etiqueta numérica que identifica, de manera lógica y jerárquica, un dispositivo (habitualmente un ordenador) dentro de una red.

Ejemplo: 31.170.164.68

()

Dominio

Su objetivo es traducir las direcciones IP de cada servidor de internet, a términos emorizables y fáciles de encontrar.

Ejemplo: ub.edu

HTTP (Hypertext Transfer Protocol)

Protocolo mediante el cual se transfieren las páginas web al ordenador cliente.

FTP (File Transfer Protocol)

Protocolo para transferir archivos entre ordenadores conectados a una red. Permite subir archivos al servidor.

Clientes FTP:

• Filezilla

• Cofee free FTP

• GoFTP

• Ciberduck (MAC)

[pic]

[pic]

El navegador lee el HTML y monta la web. Si en el código hay errores o HTML obsoleto el explorador intentará mostrar la web lo mejor posible, pero cada explorador mostrará una cosa distinta.

Para que el resultado se parezca en todos los exploradores hay que cumplir unos estándares.

W3C. World Wide Web Consortium

Organización internacional que escribe las recomendaciones para la World Wide Web y el estándar HTML.

[pic]

1998. HTML 4.0

W3C al rescate! ¿Cuál era el plan? Separar el contenido y la presentación en dos lenguajes diferentes, y convencer a los navegadores de que les convenía adoptar este estándar:

• HTML para la estructura

• CSS para la presentación

¿Cómo sabe el navegador qué versión de HTML estamos usando?

DOCTYPE:

Es la definición de tipo de documento. Le dice al navegador qué tipo de documento es.



CHARSET

Indica el juego de caracteres que se está usando en la página web.

- ISO-8859-1: Estandariza los caracteres del lenguaje latino como el español, portugués, alemán, francés...

- UTF8: Corresponde a un juego de caracteres universales, contiene signos de la mayoría de los lenguajes del mundo.

Transicional vs Estricto

XML

Cien años de soledad

Gabriel García Márquez

1967

XHTML

• Todo en minúsculas

• Tiene que existir el title en el head

• Cerrar los elementos sin contenido con />

• Añade el xmlns en el tag

HTML 4.01

ç

XHTML

WORDPRESS

[pic]

BLOG

Es un sitio web en el que uno o varios autores publican textos o artículos, que se muestran cronológicamente, apareciendo primero el más reciente.

Tipos de blogs: • Personal • Negocios • Periodismo • Period. ciudadano • Profesional

CMS

Un sistema de gestión de contenidos o CMS (Content Management System) es un paquete de software que ofrece las herramientas para la creación, publicación y gestión de contenido en un sitio web.

Entendemos por contenido cualquier cosa que se pueda publicar en una web: una noticia, un post en un blog, un video, una fotografía, un podcast, una descripción de un producto que está en venta...

Podríamos definir “contenido” como cualquier combinación de texto, gráficos, vídeo y audio que el visitante de la web leerá, verá o escuchará.

Plataformas de blogging y CMS’s generalmente ofrecen una interfaz basada en formularios (backend) a la que se accede desde el navegador, desde donde se pueden dar de alta nuevos

contenidos y editar los ya existentes.

Imaginemos un periódico o cualquier otro sitio web que tiene que ser actualizado frecuentemente, donde además, las personas que editan la información no tienen conocimientos de informática. A estos redactores se les tiene que facilitar el trabajo mediante una herramienta que les permita subir contenidos a la web y clasificarlos para que aparezcan en el lugar correcto. Estas personas no tienen que preocuparse del código de la página ni las particularidades de programación de la plataforma donde se aloja el sitio, sólo tienen que preocuparse de escribir las noticias y publicarlas de la forma más sencilla e intuitiva posible. Una vez publicadas las informaciones deben aparecer en el sitio web en los lugares que haya decido el redactor.

Frontend vs Backend

[pic]

Ventajas WP

• Instalación fácil y rápida

• Publicación de contenidos a través de una interfície web. Se acabó el código.

• Categorías para clasificar los posts

• Archivo de post antiguos con listas y calendarios

• Comentarios de los usuarios

• Herramientas para publicar fotos, vídeos y audios

• Extensible. Cientos de plugins para ofrecer múltiples funcionalidades.

• Gran comunidad de usuarios

• Alta cuota de mercado

• Software libre de código abierto (open source)

Software libre (open source)

Software cuyo código fuente está disponible para el público en general de forma gratuita. Los usuarios tienen libertad para descargar, usar, copiar, distribuir, e incluso modificar el código y

distribuirlo modificado.

Dos opciones

-

Wordpress ofrece el alojamiento (hosting) de forma gratuita y cobra por servicios adicionales.

-

Código para descargar e instalar en cualquier proveedor de hosting.

[pic]

- Widget: reloj, últimas subidas, visitas …

- Plugin: pequeños programas que instalas que te dejan hacer otras cosas. Cesta de la compra donde añades productos, …

- Temas: interface de la web. Colores, donde están las cosas, .. la parte gráfica.

Tecnologías

[pic]

Cliente hace petición al servidor via http. El servidor la monta y la devuelve. Para montarla lo hace a través de PHP y Mysql.

JAVASCRIPT

Es un lenguaje del lado cliente que permite interactuar con nuestros usuarios, crear efectos, animaciones…

Todos los navegadores web modernos interpretan el código JavaScript integrado en las páginas web. Quien sabe entenderlo es nuestro computadora. Ej: que puedas arrastrar, ….

Éste y el PHP hacen cálculos que pintamos en los códigos, y la diferencia es que cada uno lo hace en su “lado”.

PHP

Es un lenguaje del lado servidor para crear páginas web dinámicas.

Cuando un usuario carga una página construida en PHP el servidor procesa el PHP y envía el resultado al cliente en forma de HTML.

MYSQL

Es un software para gestionar bases de datos (añadir, modificar o borrar información). Edita las bases de datos y coge de ellas la información PHP (códigos).

Base de datos

Una base de datos es un conjunto de información ordenada de forma que un programa de ordenador pueda obtener rápidamente los fragmentos de datos que necesita.

Wordpress está conectado a una base de datos donde se aloja el contenido del sitio web. De modo que el editor lo que está haciendo desde las pantallas de administración es actualizar la base de datos, incluyendo nueva información o editando la ya existente.

Contenido estático vs dinámico

El contenido estático es aquél que permanece invariable desde el momento en que su autor lo crea. Es decir, no depende de quién lo visualice ni en qué momento lo haga, no hay bases de datos interactuando. Por ejemplo, un aviso legal.

El contenido dinámico es aquél que se genera automáticamente en el momento que alguien solicita su visualización, por tanto, puede cambiar dependiendo de quién lo solicite o en que momento lo haga. Por ejemplo, una sección de noticias.

Contenido dinámico=Bases de datos (MySql) + PHP

Conceptos generales

- Post:

Un post es una entrada del blog. Por lo general, cada post tiene un título, una fecha, y un cuerpo del artículo donde se puede introducir texto, fotografía, código html, vídeo...

/

· se organizan por fechas y normalmente se muestran por orden cronológico inverso

· se clasifican con categorías y etiquetas

- Página:

Contenido estático del blog. Ofrecen información general transversal al sitio web.

Por lo general, cada página tiene un título y un texto explicativo.

Ejemplos: sobre-nosotros, nuestros servicios, contacta…

/

· no se organizan por fechas

· no usan categorías ni etiquetas

- Categorías:

Organización jerárquica de los contenidos del blog. Permite archivar el post de modo que los lectores puedan seleccionar solo los posts de una tipología.

- Etiquetas:

Las etiquetas permiten describir un post de forma más detallada. No son jerárquicas.

No están predefinidas.

- Roles:

Grupo de usuarios con los mismos permisos.

Facilitan que el propietario de blog pueda controlar lo que los usuarios pueden hacer o no en el sitio web.

Roles en WP

• Administrador. Tiene acceso a todas las páginas y tareas de administración

• Editor. Puede publicar artículos y gestionarlos, así como gestionar los artículos de otros usuarios.

• Autor. Puede publicar y gestionar sus propias entradas.

• Colaborador. Puede escribir y gestionar sus propias entradas pero no publicarlas.

• Suscriptor. Puede leer y comentar.

- Temas:

Un tema es una serie de elementos gráficos que, al aplicarse sobre un determinado software, modifican su apariencia externa.

En wordpress está formado por un conjunto de archivos .php (llamados templates), hojas de estilo .css e imágenes.

- Widgets:

Un widget es un pequeño programa que da acceso rápido a funciones que se usan frecuentemente.

En WP se suelen situar en la barra lateral. Por ejemplo: mostrar las últimas entradas, widget calendario, contador de visitas…

- Plugins:

Un plugin es una aplicación que se relaciona con otra para aportarle una función nueva y generalmente muy específica.

Permiten que desarrolladores externos colaboren con Wordpress creando herramientas que extienden sus funcionalidades.

Ejemplos: Akismet, Facebook, Multiidioma, Twitter, SEO…

- Permalinks:

Un permalink es un enlace permanente. Se usa en los blogs para asignar una URL permanente a cada entrada del blog, para luego poder referenciarla.

Ej: /

RSS

RSS (Really Simple Syndication) es un archivo en formato XML que permite compartir contenidos en la web. Pensado para sitios que se actualizan con frecuencia y por medio del cual se puede compartir la información y usarla en otros sitios web o programas.

A esto se le conoce como redifusión web o sindicación web.

HTML5- CSS3:

La última revisión del estándar HTML fue en el año 2000.

La web ha cambiado mucho desde entonces (videos, música, 3D, TV…) En diciembre de 2012 la W3C presentó un candidatura a estándar de la WWW, la quinta versión de HTML, conocida como HTML5.

El grupo de trabajo de HTML 5 incluye empresas como Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, AOL…

HTML5 aún no es un estándar oficial, por lo que ningún explorador ofrece soporte total de HTML5. Pero los navegadores más importantes (Safari, Chrome, Firefox, Opera, Internet

Explorer) ya están implementando en sus últimas versiones las mejoras y nuevos elementos ofrecidos por HTML5.

Aunque todavía se encuentra en modo experimental, ya es usado por múltiples desarrolladores web por sus avances y mejoras.

HTML5 incluye nuevas etiquetas que no son reconocidas por los navegadores antiguos, por lo que si usamos HTML5 hay que tener en cuenta que sólo las últimas versiones de los navegadores lo podrán mostrar correctamente.

Como sus antecesores, HTML5 es multiplataforma, no le importa si estás usando un ordenador, Tablet, teléfono móvil, Smart TV…

Pero ofrece mejoras y ventajas pensando en esos múltiples dispositivos.

Novedades:

• Nuevas etiquetas y atributos

Multimedia: Mejora HTML con soporte para elementos multimedia.

Elementos semánticos: HTML5 incorpora nuevas etiquetas semánticas. Estas etiquetas

ofrecen información adicional que permite describir cuál es el significado del contenido. Por ejemplo su finalidad y las relaciones que existen.

[pic]

Estas etiquetas no tienen ningún impacto en la visualización, se orientan a buscadores, que podrán indexar e interpretar esta meta información para no buscar simplemente apariciones de palabras en el texto de la página.

En vez de todo en divs, es como si hubiera divs que ya saben que son (unos más importantes que otros, etc.): , ...

El objetivo final que lo entiendan los ordenadores y no que haya persona detrás.

Web semántica: Información adicional que describe el contenido, el significado o la relación entre los datos, para que sea procesada automáticamente por máquinas.

Doctype: Para indicar al navegador que una página está escrita en HTML5 usamos

Title of the document

La desventaja de HTML5 se necesitaran programadores, no será tan fácil hacer las webs como lo que hemos aprendido nosotros

• CSS3:

Añade nuevas funcionalidades a CSS2, manteniendo las anteriores para asegurar la compatibilidad. CSS2 va por paquetes, en CSS3 hay partes que ya se están usando (más tipos de fuentes, bordes, sombras, …)

Como HTML5, la especificación CSS3 está aún bajo desarrollo por la W3C, pero muchas de las nuevas propiedades CSS3 a han sido en las últimas versiones de los navegadores.

- Nuevos selectores

- Nuevas propiedades

- Animaciones, transformaciones 2D/3D y transiciones:

div{

transform: rotate(30deg);

-ms-transform: rotate(30deg); /* IE 9 */

-webkit-transform: rotate(30deg); /* Safari y Chrome */

}

- Degradados:

.degradado {

background: -webkit-linear-gradient(red, blue); /* Safari, chrome */

background: -o-linear-gradient(red, blue); /* Opera 11.1 to 12.0 */

background: -moz-linear-gradient(red, blue); /* Firefox 3.6 to 15 */

background: linear-gradient(red, blue); /* Standard */}

- Backgrounds: body{background-image:url(img/fondo.jpg); background-size:cover;}

- Esquinas redondeadas: div{ border-radius:25px; }

- Sombras: div {box-shadow: 10px 10px 5px #888888;}

h1{text-shadow: 5px 5px 5px #FF0000;}

- Webfonts:

Hasta hace poco el uso de tipografías en la web estaba muy limitado. Apenas

se podía usar una pequeña selección de tipografías comunes a todos los

sistemas que ya estaban preinstaladas en el ordenador del usuario.

p {

font-family:Verdana, Geneva, sans-serif;

font-family:Georgia, "Times New Roman", Times, serif;

font-family:"Courier New", Courier, monospace;

font-family:Arial, Helvetica, sans-serif;}

Con CSS3 se incorpora las webfotns, que ofrecen la posibilidad de usar

cualquier tipografía gracias a la propiedad:

@font-face: coge la fuente de tu ordenador

@font-face {

font-family: 'opensans';

src: url('../fonts/opensans.eot');

src: url('../fonts/opensans.eot?#iefix') format('embeddedopentype'),

url('../fonts/opensans.woff') format('woff'),

url('../fonts/opensans.ttf') format('truetype'),

url('../fonts/opensans.svg#opensans') format('svg');

font-weight: normal;

font-style: normal;}

Formatos:

• ttf La mayoría de exploradores

• eot IE

• woff (Web Open Font Format). Formato comprimido, cada vez lo aceptan más

exploradores

• svg iphone/ipad

Las webfonts utilizan una licencia específica para poder ser usadas online. No todas las fuentes se pueden usar libremente, muchas tienen copyright y hay que pagar para poderlas usar en la web.

La fuente tiene que alojada en el servidor junto a los archivos HTML, del mismo modo que hacemos con las imágenes. O puede estar alojada en servidores especializados como Google fonts.

· Myfonts,

· squirrelfonts,

· googlefonts

• Video y Audio

• Gráficos 2D/3D

- elemento (ej: pajaritos que se apartan cuando pasas el cursor)

- gráficos SVG -> necesita javascript

- CSS3 2D/3D

• Almacenamiento Local

• Aplicaciones web

- Almacenamiento local de datos

- Acceso a archivos locales: puedes consultar sin irte al servidor

- Bases de datos SQL en el cliente: no tienes que programar en distintos lenguajes de programación según el ordenador

- Caché

- Offline

- Drag&Drop

- Geoposicionamiento

Según Explorador:

Prefijos para marcar en que navegador se va a ver, para incrementar propiedades que todavía no son estándar:

-webkit- Chrome

-moz- Mozila

-o- Opera

-ms- Microsoft

Explorer

Con HTML5 y CSS3 será standard.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download