Máster Profesional en Diseño y Desarrollo Web, CICE (2013)

Las instalaciones de la escuela profesional de nuevas tecnologías CICE, en sus dos centros de formación, te permitirán trabajar con el equipamiento y con el software que utilizan los profesionales en su trabajo diario.

Durante 11 meses, entre noviembre de 2012 y septiembre de 2013, realicé el Master Profesional Especializado en Diseño y Desarrollo de Proyectos WEB en CICE.

CICE certifica el Máster y entrega diploma acreditativo al finalizarlo.
CICE certifica el Máster y entrega diploma acreditativo al finalizarlo.

Características

Máster en Diseño y Programación Web. MDI
Duración: 300 horas lectivas.
Al menos 600 horas de dedicación

El objetivo general del Máster en Diseño y Programación Web es formar profesionales que conjuguen un exacto conocimiento técnico y creativo aplicado al diseño web; reuniendo en un mismo programa de estudios todas las aplicaciones y entornos de diseño, así como el desarrollo y programación web de sitios interactivos y adaptativos.

Este máster permite formar a la nueva generación de profesionales web que utilizan el estándar internacional W3C, dominando las técnicas creativas relacionadas con el Front-End (la parte del software que interactúa con el usuario) y el Back-End (la parte que procesa la entrada desde el Front-End).

El alumno consigue aplicaciones de acabado profesional, válidas para multiplataforma, aplicando herramientas de desarrollo y diseño web, utilizando lenguajes semánticos como HTML5 y CSS3 de manera ágil, escalable y productiva, y desarrollando la personalización de las aplicaciones mediante XML, PHP, MySQL y WordPress.

Al finalizar la formación el alumno podrá desarrollar su actividad laboral como:

  • Diseñador y desarrollador de sitios Web con HTML5, CSS, JAVASCRIPT utilizando Responsive Design
  • Desarrollador y programador de aplicaciones PhP y MySQL utilizando WordPress

Programa

Módulo 1. Introducción al PHP
Módulo 2. Bases de datos MySQL
Módulo 3. PHP estructurado y orientado a objetos
Módulo 4. WordPress
Módulo 5: Programación con HTML 5
Módulo 6: Presentaciones de documentos estructurados
Módulo 7: Programación JavaScript y jQuery
Módulo 8. Proyecto Final

Animación 2D después de Flash

Las restricciones de algunos dispositivos móviles a la avanzadísima
tecnología Flash (lenguaje ActionScript) ha supuesto una caída de los
contenidos animados.

No ha sido así en el campo del vídeo, los juegos y las
apps móviles, donde Flash todavía tiene mucho camino que recorrer.

Ayer, mi amigo y gran profesor Javier Mateo comentaba que en
muchos sitios web ahora encontramos de nuevo el viejo y querido GIF animado, un
formato que es soportado por todos los navegadores y dispositivos.
Actualmente se está produciendo una explosión de nuevos
productos que permiten contar tus historias con movimiento y audio. Nos
encontramos a mitad de camino entre el ‘boom’ de la animación en Flash y la
nueva web móvil.

El principal obstáculo para su implantación siguen siendo los
viejos navegadores, especialmente los fabricados por Microsoft.

Aquí repasamos algunas opciones para animar tus proyectos
sin saber demasiado código. Son programas que ejecutan código CSS y el lenguaje
Javascript o su librería más extendida: jQuery.
I. DE FLASH A HTML5

Pros: Herramienta de Google para convertir documentos Flash
(swf) realizados con ActionScript 2 en contenido HTML5 no editable. Las
conversiones de ActionScript 3 (en funcionamiento desde 2006) se encuentran hoy
en fase experimental.
La conversión se realiza a través del navegador o cargando
una extensión el el programa Flash.
Cons: Así suena my bonito, pero las conversiones no siempre
son posibles.
Los documentos ‘SWF’ deben ser muy sencillos y pesar menos
de un mega.

Adobe Wallaby: fla
Otra herramienta para convertir documentos Flash  (fla) en HTML; en teoría el resultado es editable
y se ejecuta desde un programa instalado en el ordenador.
De momento, ambas herramientas son muy limitadas y están en
proceso de desarrollo.
Convierten pequeños y simples documentos, pero no una
aplicación.
La interactividad es muy difícil de convertir.
II. ANIMACIÓN EN  HTML5

Adobe Edge CC: Nueva versión el día 17


Crear contenido animado e interactivo para la web moderna.
El día 17 de junio sale la nueva versión: Animate CC.

Se
acabó el tiempo de prueba, empieza el partido y la hora de pagar un precio: 499dólares por licencia o 15 dólares de suscripción mensual, en la web de Adobe.

Pros: Una gran herramienta de animación, pensada por Adobe
para sustituir a Flash e integrarse perfectamente con proyectos HTML5. Su
corazón está escrito con jQuery. Es el futuro de la animación 2D.

Cons: No corre en navegadores antiguos. No hay parche. La
API de Animate no permite conversión a etiquetados antiguos.
Crear. Animar. HTML5.
Igualmente, pensado para tecnología HTML5, juega con su
propia API de Javascript.
Su última verión cuesta 60 dólares, en su web o en la Mac
AppStore.
Cons: Sólo para fieles del Mac y OX 10.6.6. No tienen
pensado sacar versión para Windows.
Pros: Compatible con IE6+ si se respetan algunas opciones.
Pros: Software en línea de Adobe Edge e Hype, con línea del
tiempo, escenas, fotogramas clave, efectos y posibilidad de programar con
javascript.
Corre en navegadores modernos, smartphones, iPhone, iPad y
Pcs.
Cons: No IE6+.
Precio: 120 euros.
Software para crear películas interactivas, juegos y
aplicaciones utilizando el motor de Javascript. La última versión acaba de
salir al mercado.
Pros: El nuevo paquete incluye versión para Windows y Mac OS
X. (antes sólo Windows). Según su web, funciona en el 99% de los navegadores
(IE6+) y en teléfonos inteligentes (smart phones).
La licencia cuesta 50 dólares a través de su web.

Animaciones móviles con CSS3.
Precio: 99 dólares.
Pros: Accesible en plataformas Windows, Mac OX y Linux.
Pensado para realizar pequeñas animaciones para móviles y
juegos simples interactivos.
Cons: sólo para navegadores modernos.
Herramienta para crear contenido y audio web en Flash o
HTML.
Pros: permite salida para HTML5 o para Flash y es compatible
con iBooks Author.
Versión para Mac y Windows.
Precio: 109 euros por licencia.
Contar historias visualmente.
Cons: Herramienta pensada para contenidos del iPad y el
iPhone, por tanto para plataformas nativas de iOS.
Están trabajando en una versión para Android.
19 dólares a través de la Mac App Store.

III. HERRAMIENTAS ONLINE
Página digital para crear y compartir dibujos realizados a
mano realizada con Javascript y el canvas de HTML5.
Cons: Herramienta online extremadamente básica.
Pros: Divertida.

Pros: Creatividad en la nube, sin necesidad de descargar
ningún programa.
Se trabaja desde el navegador y se guarda en la nube.
Los resultados se pueden exportar en formato javascript o
CSS a  tu sitio local.
Accesible tras rellenar un formulario.
Cons: Necesita un reproductor de javascript para renderizar
los trabajos.
Pensado especialmente para crear pequeñas publicidades para
navegadores HTML5 y dispositivos móviles. Se recomienda visualizar los trabajos
en Google Chrome.

Pros: sencillo software gratuito al que se accede a través
de navegador.
Cons: Herramientas muy limitadas, pensado para pequeños
trabajos, para navegadores que soporten tecnología HTML5. Recomiendan Firefox y
Chrome.
Como Mixeek, herramienta para trabajar en el navegador.
Pensada especialmente para animar tipografía y logos.
Herramienta para crear pequeñas publicidades, animar
tipografía o logos a través de tu navegador. Se exporta un archivo javascript y
necesita un reproductor que se guarda en la carpeta de tu sitio local o remoto.
Los trabajos se guardan en tu perfil de gmail.com.
Pros: Salida javascript aceptable en todos los navegadores,
incluido IE6. 
Cons: Pocas herramientas, limitaciones. Recuerda a la
primera versión de Flash.
Gratis.
IV. PASARON A OTRA VIDA

Software que reune las cararterísticas de los anteriores,
pero que ha dejado de desarrollarse.

Gráficas con Javascript

Vamos a dar un repaso a algunos motores de gráficas desarrollados por ingenieros y técnicos con Javascript aprovechando las posibilidades de los lenguajes SVG, HTML Canvas y VML para renderizar los elementos gráficos y de XML o JSON para tomar los datos.

Se trata de productos muy recomendables para visualización de estadística financiera, económica o social. Encontramos gráficos de línea, de áreas, de columnas y tartas en todas sus modalidades.

Las ventajas de estas gráficas es que se actualizan dinámicamente, son interactivas, no necesitan módulos complementarios y ocupan muy poco espacio.

HIGHCHARTS JS

Vik i Sogn, Noruega.
Desde 29 dólares por licencia.
Producto desarrollado por Highsoft Solutions AS desde 2009.

amCHARTS

Licencias desde 99 hasta 1.999 euros, dependiendo del número y los websites de uso.
Tienen soluciones para mapas y desarrollos en HTML5/Javascript y Flex.

SENCHA EXT JS 4

Redwood City, California, EEUU
Vancouver, Canadá
Amsterdam, Holanda
Sencha es una compañía especializada en herramientas realizadas con HTML5 y Javascript. Recomendable su página web.
Objetivo: crear la mejor librería de gráficos en Javascript del mundo, según su blog.

YUI

Código libre y gratuíto publicado por los ingenieros de Yahoo! para construir páginas digitales interactivas.

JS CHARTS

Licencia para generar gráficas, que cuesta desde 39 hasta 169 dólares.
Tiene una versión gratuita, pero genera una marca de agua.

FLOT

Aalborg, Dinamarca
Gráficas con jQuery, la popular librería de Javascript.

Si te ha interesado este post, aquí te dejo un link a Daily Tekk, con 100 recursos sobre infografía.

HTML5: El futuro tiene muchos nombres

Texto publicado en VisualThinking.es.

Hace relativamente poco tiempo que las páginas en la red no tenían imágenes. El vídeo, la infografía o los gráficos interactivos eran un sueño para muchos diseñadores y editores. Las páginas eran puramente textuales y, así, las posibilidades de diagramación eran mínimas. Con la llegada de los ‘movie clips’, el PDF y el reproductor de animaciones ‘Flash’ los contenidos empezaron a moverse.
Rápidamente iban surgiendo tecnologías que se convertían en estándares para la comunidad digital. Pocos se preguntaban si aquello era realmente un modelo universal. Funcionaba después de darle muchos cabezazos al teclado del ordenador; cumplía el objetivo.

¿Funcionaba en todos los navegadores y sistemas operativos? No. Ante un problema de funcionalidad se buscaba la solución que abarcase la mayor parte del mercado. Es decir, se dejaba fuera una parte importante. Por tanto, funcionábamos sin un estándar. No existía. Lo que teníamos eran varios estándares propietarios desarrollados por las compañías de navegadores. Compartían vocabulario, pero no escritura y pronunciación.

Objetivo 2014
La llegada del lenguaje HTML5 (‘HyperText Markup Language’, en su versión número 5) es un hito histórico en el desarrollo del diseño web. Pese a que todavía está en desarrollo, la normativa final HTML5 se espera que sea aprobada en 2014, las posibilidades que ya conocemos son plenamente satisfactorias. En 2010, Steve Jobs dio las primeras pistas: ‘Los nuevos modelos creados en la era móvil, como el HTML5, ganarán el mercado’.

A partir de aquí comenzó a hablarse de un enfrentamiento entre los lenguajes Javascript (estandarizado en 1996) y ActionScript (propiedad de Adobe), HTML5 (abierto) y Flash (propiedad de Adobe) y los sistemas operativos MacOs X (Apple) y el Android (código libre basado en Linux).

En 2009, el ‘World Wide Consortium’ (W3C, la autoridad que valida el lenguaje HTML5) y el ‘Web Hypertext Application Technology Working Group’ (WHATWG, la comunidad que desarrolla el lenguaje HTML) decidieron caminar juntos para desarrollar definitivamente un estándar para la web, un lenguaje de etiquetas abierto a la participación de todo el mundo, no dependiente de compañías propietarias del desarrollo y que fuera compatible con todas las tecnologías de la web.

HTML5 no es propiedad de ninguna compañía. Las compañías deciden desarrollar con este lenguaje porque entienden que es el que mejor cumple sus expectativas de negocio. Lógico. En la era móvil y social todo el mundo quiere estar en todos los frentes. Por tanto, las batallas planteadas en los últimos años son molinos de viento que no merecen más comentario. Lo importante es que va a existir un estándar compatible con todos los navegadores y con el que ya se puede trabajar.

Sumando códigos hermanos
La combinación del lenguaje HTML5 (etiquetas básicas de la página) con las posibilidades del lenguaje en cascada CSS3 (estilo y presentación de las etiquetas) y el lenguaje de programación orientado a objetos Javascript (desarrollo de operaciones y aplicaciones) y todas sus librerías (gráficos, efectos visuales, formularios, tablas, matemáticas, criptografía o AJAX) es todo un reto para cualquier desarrollador, creativo o diseñador.

A finales de septiembre, Adobe Systems lanzó oficialmente al mercado el programa de gráficos animados Edge Animate 1.0. De momento, es gratuito y se descarga en su página web. Edge es una tecnología para crear contenido con HTML5, Javascript y la librería JQuery. Por tanto, los trabajos realizados con Edge alcanzarán todo el mercado de los móviles sin necesidad de instalar nada en ellos. El diseñador no se tendrá que preocupar de las excepciones de cada dispositivo o navegador, sencillamente porque ya no existirán. Esa es la promesa.

El problema actual es que no todo el mundo tiene instalado en su ordenador las últimas versiones de los navegadores, que son las que están preparadas para visualizar los contenidos en HTML5. A medida que las empresas pongan al día sus máquinas y los usuarios vayan descargándose las versiones más recientes de los navegadores, HTML5 empezará a crecer exponencialmente y conoceremos realmente todas sus posibilidades. Recuerdo ahora esta frase de la escritora francesa Françoise Sagan: ‘Sólo cerrando las puertas detrás de uno se abren ventanas hacia el porvenir’.

———————————-

Quick Tour VT.

———————————-