En este vídeo haremos un repaso por diferentes softwares de programación y explicaremos por qué usaremos code en el curso y un poco cómo está organizado.
Una vez que tenemos el libro, vamos a configurarlo según las opciones que nos ofrece la documentación del plugin.
Dando estilo al libro - Bueno, pensé que el vídeo sería en el tema de JavaScript, pero el presentador sólo demuestra cómo él cambio CSS para efectuar cambios en una página HTML.
Este efecto de navegación mejora si guiamos a los usuarios para que, en vez de usar el scroll, ofrezcamos una botonera de navegación. Aquí la programaremos.
Vemos un truco para crear la base de datos sólo la primera vez que arranca la app. Crearemos la base de datos, y usaremos localStorage mediante el plugin Storage.
Al hacer click, hay que recuperar todos los datos del registro en la página de detalle: aquí se aprende a pasar el id y usarlo para recuperar un registro.
Vamos a recuperar la información de la búsqueda, que tiene cierta dificultad, y a continuación pasaremos los datos recuperados al formulario de añadir contacto.
Antes de empezar a trabajar con Camera, haremos un repaso por este plugin y por el plugin Capture, que nos permite hacer lo mismo pero no solo con imágenes.
Modificaremos el formulario para que permita seleccionar entre si queremos recuperar una foto de la librería o si queremos sacar una nueva con la cámara.
Cómo controlar la fusión de ramas y las herramientas visuales para facilitar su uso. Veremos GitX-dev, un programa gratuito externo para apoyarnos y gestionar el branching.
Esta estrategia de captación es la que menos envuelve al usuario en el entorno AR, pero muy útil en cambio para integrar al público en museos o centros comerciales.
En este vídeo vamos a repasar las diferentes formas de identificar los elementos de la realidad capturada susceptibles de ser reinterpretados por la RA.
La técnica más habitual hoy en día para la identificación es el uso de trackers (o markers) que sirven de referencia simple sobre donde incluir nuestra capa aumentada.
Un avance importante ha sido la incorporación de tecnología que permite el reconocimiento de fotografías, haciendo que se pueda aplicar RA sin usar trackers.
El mapeado 3D hace que la identificación trackerless sea más exacta, además de que gracias a ello la integración de la capa aumentada se podrá hacer tridimensionalmente.
Uno de los últimos avances consiste en prescindir de pantalla y de mezclar una cámara y un proyector con el reconocimiento de gestos para crear un terminal virtual integrado en el entorno.
El mayor avance que en estos momentos funciona en el mercado es el de la identificación mediante modelos 3D exactos a la realidad, ya que gracias a ellos se puede simular con más precisión la integración 3D de la capa aumentada.
Esta forma de añadir contenidos consiste en hacer sistemas que funcionan independientemente del entorno en que se reproducen; su uso simplifica el desarrollo y aumenta el rendimiento, y permite crear efectos interesantes.
La integración de aceleradores 3D es la que ha permitido llevar a la realidad aumentada a nuestros dispositivos móviles, y por tanto a su uso cotidiano.
Esta parte del proceso va a condicionar las opciones que tendremos de identificación, de procesamiento y de generación final, así que es importante conocer las posibilidades que hoy en día tenemos.
Si la forma de renderizar nuestros contenidos es importante, para crear un efecto correcto es necesario que el sistema interactúe con el usuario: aquí repasaremos diferentes opciones de interacción.
Un vídeo aparte merecen las consolas porque, al disponer de su propia tecnología, nos ofrecen soluciones que podemos usar para desarrollos AR concretos.
En cuanto a software, vamos a poder estructurar nuestras aplicaciones accediendo a los datos de dos modos distintos. Aquí se comenta la arquitectura autónoma en cuanto a contenidos.
Cada día tienen más importancia las aplicaciones basadas en contenidos almacenados en remoto, ya que permite extender la AR al mundo real gracias al GPS y la red móvil.
Probablemente, el programa más extendido en este momento de creación 3D para entornos AR es el 3D Studio Max, que es un programa muy potente y con un completísimo sistema de plugins.
Podemos simplificar el flujo de trabajo reutilizando modelos 3D creados por otros: hay librerías con grandes colecciones de modelos 3D fácilmente integrables en nuestros proyectos.
ARMedia es un plugin integrable en la mayor parte de los programas de creación 3D y ofrece un visor que para las típicas demos basadas en trackers, que simplifica mucho el trabajo.
Layar es una plataforma que cada día tiene más fuerza: ofrece un SDK de programación, un programa de creación simple y una plataforma para dispositivos móviles, para la visualización de sus contenidos.
Total Immersion es una plataforma parecida a Layar, con buenas opciones para la creación de contenidos profesionales complejos y con un creador de contenidos adaptado al nivel que necesitemos.
Metaio es la plataforma en este momento más completa, y ofrece programas, SDK, plataforma para dispositivos móviles y varias tecnologías propias para identificación.
Las plataformas más importantes implementan canales de visualización de contenidos AR a través del móvil, buscando que la realidad aumentada esté en el día a día de todo el mundo.
Otro planteamiento diferente es la creación de contenidos para plataformas de creación de juegos, como Unity, que aún están en desarrollo, o la creación de contenidos para dispositivos específicos con capacidades especiales, como Kinect.
La AR se usa constantemente en el proceso de diseño: es un lujo poder mostrar prototipos de objetos, edificios, diseños, etc, sin necesidad de haberlos construido físicamente.
La universalización de los dispositivos móviles que combinan GPS con redes de datos hacen que haya infinidad de posibles aplicaciones de la AR a usos relacionados con el posicionamiento.
Presentamos el Metaio Creator: una buena opción si queremos introducirnos en la AR, porque permite hacer trabajos simples, pero también tiene opciones más avanzadas.
Este curso está pensado para todas aquellas personas interesadas en saber qué es el diseño web responsivo o responsive design y que quieren saber más sobre cuáles son sus ventajas e inconvenientes.
Qué es el responsive design - Habla de lo que es Response Web Design. Lo principal que me gustó de este video fue la hermosa presentacióon gráfica.
La variedad de dispositivos capaces de conectarse a internet hace difícil crear webs que se vean bien en todos ellos. Responsive design puede ser una solución en algunos proyectos web.
Un punto de corte o breakpoint es el momento en el que tu diseño debe cambiar según el tamaño de la pantalla. Este concepto es fundamental al diseñar para múltiples dispositivos.
No debemos dejar de lado el rendimiento de nuestro sitio por primar el diseño: en dispositivos móviles, se actúa de forma diferente a la web, y tenemos que tenerlo en cuenta.
Cada página web es distinta, y tiene unas necesidades distintas a la hora de adaptarse a dispositivos móviles, pero sí hay algunas nociones generales que tenemos que tener siempre en cuenta.
Aprenderemos a crear los mockups que necesitamos, para no perder demasiado tiempo en ellos y tener una idea clara de cómo va a quedar nuestro sitio adaptado.
El contexto es la forma en la que los usuarios actúan con nuestro sitio móvil. Según cada contexto, debemos realizar el responsive design de una u otra forma.
Cada dispositivo móvil posee unas capacidades distintas y, si las aprovechamos, ofreceremos a los usuarios contenidos más exclusivos y que apreciarán más.
No solo debemos tener en cuenta el CSS en nuestro diseño, sino también crear un HTML lo suficientemente flexible para que podamos mostrar nuestro sitio en los distintos dispositivos.
El testeo consiste en mucho más que cambiar el formato y tamaño de pantalla para comprobar cómo se verá nuestro sitio: también debemos testear el comportamiento de la página en los dispositivos móviles.
El uso de frameworks de retícula fluida permite acelerar el desarrollo y mantener el código entre distintos proyectos, además de darnos una base de código bastante sólida.
Veremos algunas de las herramientas que nos pueden ayudar, como Tiny Fluid Grids, Fluid Grids, Categorizer Modernizr, fitvids.js, respond.js, o Filament Group.
Conoce la capacidad de combinar CreateJS con otras librerías como por ejemplo jQuery y GSAP de Greenshock. También descubrirás que puedes usar CreateJS con TypeScript.
Como en todas las librerías, es fundamental conocer cómo buscar y encontrar las propiedades y métodos que necesitamos. Por suerte CreateJS cuenta con un buen índice para facilitarnos esta tarea.
Descubre los principales componentes de CreateJS, qué misión tiene cada uno de ellos y cómo se complementan, así como algunos extras que te facilitarán determinadas tareas.
Descubre la importancia de esta clase, que nos permite trabajar de forma anidada, simplificando algunas acciones cuando queremos realizarlas sobre un conjunto de elementos.
Aprende a crear formas geométricas vectoriales con las clases Shape y Graphics. La primera funciona como elemento interactivo y al segunda como herramienta de dibujo vectorial.
Aprende a crear un sistema que permita mostrar tu juego en cualquier pantalla adaptando solamente el stage, y dejando que CreateJS haga el resto, como si de Flash se tratara.
Aprende a gestionar las cargas en tu juego para tener a tu disposición todo lo que necesites. Tendrás información del estado del proceso, para que tu usuario esté siempre informado.
El sonido es uno de los elementos más complicados de gestionar en HTML5, descubre lo que te aporta una librería como SoundJS, y cómo te simplifica el trabajo con este tipo de contenido multimedia.
Daremos un repaso por el proceso para poder disponer de un set de sonidos consistente entre navegadores.
Cargando y reproduciendo audio con SoundJS - Él tiene un botón en una página web que haga clic y se reproduce un sonido. Para creer esa, usa CreateJS. La biblioteca de audio es SoundJS.
Aprovecha PreloadJS para disponer de los audios precargados y poder integrar el sonido como un elemento más de todos los requeridos antes de la inicialización del juego.
Animar puede llegar a ser complicado y laborioso, pero las animaciones controladas por código pueden ayudarte mucho en esa tarea. Descubre todo lo que TweenJS puede hacer por ti.
Animando con TweenJS - El presentor muestra cómo utilizar TweenJS en un juego muy simple con los planetos.
Aunque TweenJS es una muy buena librería para gestionar tus animaciones, no podemos hablar de esta característica sin mencionar a la mejor librería existente, que incluye soporte para CreateJS.
Vamos a examinar los principios del funcionamiento de una directiva.
Directivas y estándares web - Él demuestra que un documento AngularJS no es válida acuerdo con un validador HTML5, pero es válido si se añade data-.
Data Binding - Demuestra el ejemplo clásico de AngularJS: él teclea un nombre y aparece en la pantalla.
Qué es un controlador en AngularJS - Este video muestra cómo se puede definir una variable en un controller y luego usar la variable en el código HTML.
Incluir múltiples controladores - El presentador se muestra cómo crear dos constructors y demuestra cómo las variables se mantienen separados.
Crear métodos en un controlador - En este vídeo, se aprende cómo crear una función dentro de un controlador. Esta fonción se ejecuta por un botón, y define un valor.
Representar colecciones de datos - Esta vez se muestra cómo guardar colecciones de valores en el controlador, y cómo mostrar estos valores en HTML.
Filtrado de datos - Aquí se muestra la facilidad con que se puede poner en práctica una forma que permite al usuario buscar a través una colección de campos de texto.
En este vídeo veremos cómo intercambiar imágenes mediante el uso de programación.
Incluir datos externos - En esta video él está construyendo un menú. Lo que entendí es que se puede utilizar ng-include que puede ser útil.
Administramos rutas - Este es un buen video que muestra cómo utilizar las rutes en AngularJS. Rutas permiten sitios de una página ser indexados por Google.
Este vídeo explica qué supone elegir la versión Pro de Unity frente a la versión Basic y viceversa: cuál deberíamos elegir en función de nuestras necesidades.
Describiendo nuestro ejemplo de proyecto con Unity: el juego Tres en Raya.
Creación del juego Tres en Raya - Muestra cómo se puede crear un juego de tic-tac-toe. Para hacer este juego, creó unas pocas clases. Me sorprení al ver que se utiliza el lenguaje C#.
En este momento estamos listos para añadir algunas naves enemigas a nuestro escenario y distribuirlas por él, con su velocidad de movimiento y de giro.
El SkyBox nos permite proporcionar un efecto de cúpula de cielo con ciertas texturas. Unity 3D proporciona además algunas texturas por defecto, que veremos cómo podemos importar.
La exportación a otras plataformas, por ejemplo iOS, es sencilla desde Unity. Veamos las opciones de configuración para conseguir un juego para iPhone o iPad.
Para los ejemplos del curso, empleamos una estructura de carpeta y un conjunto de archivos base que permiten partir de código de ejemplo para cada una de las principales características de cada lenguaje.
Analizamos los principales inconvenientes del lenguaje CSS convencional, a partir de la utilidad que tiene y de cómo la evolución que ha seguido el desarrollo web ha hecho necesario contar con soluciones más potentes como los preprocesadores CSS.
Qué son los preprocesadores CSS - Se introduce el tema preprocesadores CSS y dice que los más populares son SASS, Less y Stylus.
Instalaremos todos los componentes necesarios para poder emplear Grunt como gestor de tareas automatizado, de manera que agilice notablemente el trabajo con los preprocesadores.
Aprenderemos las diferentes formas que tenemos hoy en día de usar LESS en nuestros proyectos, tanto integrado en aplicaciones como con lenguajes de servidor e incluso en el lado del cliente.
Aprenderemos a identificar cuándo se ha podido producir un error al compilar LESS a lenguaje CSS, y a entender la información que nos ofrece el compilador para localizar más fácilmente el error.
Sintaxis anidada en LESS - Creó dos archivos en SublimeText, entonces él comenzó Grunt, que compiló LESS en CSS.
Descubriremos la interesante funcionalidad que nos permite el uso de la referencia al antecesor de una regla CSS en LESS, así como todos los detalles y aplicaciones que puede tener en este lenguaje.
Recorreremos una de las características más conocidas de los lenguajes de preprocesamiento CSS como es la disponibilidad de variables para mejorar notablemente la capacidad de mantenimiento y cambio de nuestros proyectos.
Comprobaremos la importancia de la capacidad de extender selectores CSS a partir de otros existentes, para reutilizar nuestro código y optimizar en muchos casos el resultado en el formato CSS final.
Conoceremos las diferentes maneras de importar contenido en LESS, para mejorar nuestra organización de código y aprovechar al máximo nuestras reglas CSS.
Aprenderemos a crear estructuras iterativas en LESS con el uso de bucles, para poder gestionar de forma óptima la creación de algunas estructuras CSS que así lo pueden requerir.
Aprenderemos los fundamentos de esta popular funcionalidad, que nos permite entre otras cosas agilizar tareas como la creación de prefijos en propiedades CSS específicas que los requieren para algunas versiones de navegadores.
Comprobaremos que en LESS es posible incluso pasar como parámetro a un mixin, conjuntos de reglas CSS completas, que posteriormente podremos usar en el interior de la función.
Configuraremos el editor de texto para reconocer correctamente la sintaxis del lenguaje y facilitarnos la tarea de escritura de código Sass en el mismo.
Aprenderemos las importantes ventajas que nos ofrece la escritura de reglas CSS con una sintaxis anidada, y las particularidades de Sass con esta funcionalidad.
Analizaremos los diferentes tipos de datos disponibles en Sass, así como las operaciones que nos permite realizar Sass sobre ellos y algunas de las útiles funciones predefinidas del lenguaje.
Haremos un recorrido por los diferentes tipos de estructuras condicionales que nos ofrece Sass, y analizaremos la utilidad de las mismas en algunas situaciones habituales en el uso de CSS.
Analizaremos lo fácil que es en Sass generar diferentes formatos de CSS que nos permita obtener un código más optimizado y compacto, o más legible y ordenado.
Usamos GIMP para crear un proyecto de retoque fotográfico y composición por capas.
Optimización de imágenes para sitios web - Este presentador tiene una voz agredable, tambíen. Muestra cómo se puede cambiar el tamaño de la imagen y añadir un marco.
Mientras que con la herramienta Zoom es posible acercarse y alejarse de diferentes zonas de la imagen, la herramienta Panorámica nos permite movernos perpendicularmente a la imagen.
La mayoría de los equipos tienen la posibilidad de crear aplicaciones para Android, pero necesitas algunos programas y especificaciones de sistema. Vamos a revisar que tengas todo preparado para empezar.
Las casillas de texto te permitirán comunicar tu mensaje a los usuarios. En este vídeo veremos cómo administrar este importante elemento en tu aplicación.
Al crear aplicaciones que soporten múltiples lenguajes, puedes aumentar las descargas. Veremos cómo centralizar la administración de texto en un solo archivo y cómo aprovecharlo para crear aplicaciones en varios lenguajes.
Android posee un sistema especializado para alinear nuestros elementos en pantalla. Vamos a aprender cómo posicionar los elementos y vamos a diseñar una aplicación que se ajuste a tamaños variables de pantalla.
El icono de la aplicación es la forma en que los usuarios van a reconocer tu aplicación entre todas las demás. En esta lección veremos cómo darle el ajuste perfecto.
Las entradas de texto permiten al usuario insertar información a través del teclado. Con este vídeo aprenderemos a capturar y procesar los datos de un formulario.
La principal herramienta de depuración para tus aplicaciones Android es el logCat, y esta será tu primera línea de defensa contra cualquier error de código.
En este curso aprenderemos a usar Handlebars, un motor de plantillas para la parte cliente, que permite generar y modificar partes de nuestro código HTML desde JavaScript de una forma limpia y sencilla.
Veremos un ejemplo que refleja claramente el problema existente al trabajar con HTML en JavaScript, y que ha impulsado el uso de motores de plantillas.
Descubriremos los conceptos básicos que están detrás de cualquier motor de plantillas en JavaScript y los beneficios de su uso, así como las diferentes opciones existentes en la actualidad.
Qué es Handlebars - El presentador explica lo que Handlebars es, que incluía las ventajas, una de las cuales es que fonctiona con el Mustache, que es una herramienta de plantillas.
Uso básico de Handlebars: Hola mundo - Él escribo un archivo HTML de una página que incluye todos sus bibliotecas, la plantilla, y él código Handlebars. El código parece muy mínimo. Me gustaría aprender más sobre Handlebars.
Descubriremos la forma de la que dispone Handlebars para poder mostrar contenido HTML proveniente de los datos dinámicos que cargamos en nuestra plantilla.
Mi primera plantilla con Handlebars - Noté que Handlebars tiene una sintaxis similar a Angular. Creo que es mas apropiado utilizar con Backbone.
Veremos un primer caso práctico donde emplear un helper de diferentes maneras, para afianzar los conceptos que hay detrás de este mecanismo que nos ofrece Handlebars para personalizar nuestras plantillas con la lógica que necesitemos.
Aplicaremos un helper de bloque en mayor profundidad, contando con contexto y contenido para ver cómo podemos crear estructuras más complejas con la lógica que necesite nuestra aplicación, tal y como lo hacen los helpers de bloque predefinidos de Handlebars, como son each, if y with.
Aprenderemos qué son los partials y cómo nos pueden ayudar a la hora de reutilizar fragmentos de plantillas, dentro de una misma página o incluso en páginas diferentes.
Descubriremos la posibilidad de precompilar las plantillas para mejorar el rendimiento del uso de Handlebars en nuestros proyectos y a la vez poder reducir la carga de la página al no tener que incluir la librería completa.
Descubriremos un interesante recurso, donde tendremos acceso a cientos de helpers ya creados por miembros de la comunidad que nos permitirán ahorrarnos mucho tiempo en tareas ya resueltas.
En este capítulo explicaremos qué es Node.js y cómo puede ayudarnos en nuestros proyectos web 2.0.
Instalando gedit - En este video no mostró nada de node.js. Él sólo mostró cómo descargar gedit y crear una archivo de texto.
Código del servidor - Esta fue una interesante pero simple video. Él creó un pequeño programa que actuará como servidor web. Lo probó, pero la página se descargó en su lugar.
Arranque y comprobación - Él muestra lo fácil que es crear un servidor web que sirve HTML cuando recibe una solicitud de cliente.
La llamada involuntaria a favicon.ico hace que nuestro servidor se cuelgue, al no saber cómo tratarlo. En este video desarrollamos una sencilla solución.
Te explicamos por qué el código que hemos de desarrollar es secuencial, y los problemas que esto te puede ocasionar cuando muchos usuarios intenten entrar a tu servidor.
Conoce las causas por las cuales el uso de un framework como Bootstrap puede ayudarte notablemente en el proceso de desarrollo front-end en un proyecto web.
Sentamos las bases del desarrollo práctico que vamos a realizar, en un entorno local y con una serie de recursos y documentación que nos puedan dar soporte durante el proceso.
Podrás descubrir una forma de escritura HTML muy ágil mediante el plugin Emmet en el editor Sublime Text 2, así como la base de cualquier proyecto web basado en Bootstrap 3.
Antes de comenzar la maquetación, debemos analizar el proyecto de forma global, definir los navegadores compatibles y preparar la estructura del mismo, así como los contenidos que necesitaremos.
Cuando se realiza un proyecto web es fundamental marcarse una serie de navegadores destinatarios, a los que tendremos que dar soporte. Descubre la manera de tomar decisiones correctas a la hora de marcar tu mínimo navegador soportado.
Entiende el cambio de filosofía que supone la aplicación de la técnica de Responsive Web Design en un proyecto web, frente a la aproximación clásica sin adaptación a diferentes pantallas.
Aprende a reutilizar fragmentos de código a lo largo de todas las páginas que lo componen, mediante una correcta estructuración de carpetas y el uso de PHP.
Cuando se trabaja con Bootstrap es importante identificar de antemano y razonar qué estructuras vamos a emplear para solventar los diferentes escenarios que nos encontramos, para elegir aquellas que mejor resultado nos puedan aportar.
Descubre la metodología de trabajo más adecuada para aplicar Bootstrap en tus proyectos web: identificando contenidos, trasladándolos a HTML mediante un etiquetado semántico y posteriormente aplicando estilos visuales.
Definimos la estructura del código HTML para la cabecera del proyecto, compuesta por la zona del logotipo y un menú basado en el componente nav de Bootstrap 3.
Estructura de la cabecera de la web - Esta video muestra cómo hacer une barra de navegación en la parte superior de la página. También me acordé de user emmet.
Desarrollaremos la estructura del contenido de la home, y analizaremos cómo poder lograr la distribución deseada reutilizando las clases disponibles de la mejor forma posible.
Definiremos el etiquetado HTML necesario para dar vida al índice de contenidos, así como ir preparando alguna estructura adicional para su posterior revisión visual.
Crearemos una estructura parcial para dar cabida a la zona de alojamiento del proyecto en la pantalla detalle, preparando el layout para la posterior inclusión del mapa.
Crearemos una estructura habitual en páginas web como son las preguntas frecuentes, atinando en la forma de crear el etiquetado HTML para tener posteriormente la mayor flexibilidad a la hora de gestionar los contextos responsive.
Definiremos los estilos generales para el sitio en función de aquellos aspectos visuales que se repiten en todas las páginas, y aprenderemos a modificar el aspecto visual que Bootstrap nos ofrece por defecto.
Aplicaremos estilos visuales a la cabecera para dar forma al logotipo y al menú de navegación. Aprenderemos a modificar los estilos por defecto que nos ofrece Bootstrap en sus componentes, para personalizarlos según nuestras necesidades.
Daremos estilos al pie de la página para completar esta etapa de aplicación de estilos iniciales, que tendrá que ser revisada posteriormente al ajustar la web a todos los contextos responsive.
Daremos el estilo visual a los contenidos de la home y de la pantalla de detalle, crearemos el componente para el registro con una estructura flexible y combinaremos un mapa de Google Maps con la estructura previa creada en Bootstrap.
Aplicaremos estilos al bloque de registro, haciendo especial hincapié en que se comporte de forma fluida para encajar correctamente con el sistema de rejilla sobre el que va incluido, basado en Bootstrap 3.
Crearemos e integraremos el mapa, y aplicaremos los estilos necesarios para combinarlo con el layout basado en Bootstrap 3 que ya habíamos elaborado durante la creación de la estructura de esta zona de detalle.
Definiremos con algo más de precisión los estilos de las preguntas frecuentes para aproximarlos más estéticamente a su apariencia visual en el diseño original.
Nos replantearemos todas las estructuras creadas para encontrar la mejor forma de que puedan ser válidas para todos los contextos responsive. Aprenderemos que es importante hacer esto desde el principio para evitar errores como los que veremos en el propio ejemplo.
Ajustaremos la estructura de rejilla inicial del pie, para que todos los contenidos se puedan ver correctamente en todos los contextos, y especialmente en el contexto más reducido donde aplicaremos un layout a una columna de ancho completo.
Entenderás qué implica la filosofía "mobile first" que sigue Bootstrap 3 y cómo no seguir ese criterio nos puede llevar a situaciones no deseadas. Corregiremos los problemas encontrados y ajustaremos el HTML y los estilos para lograr una correcta visualización en todos los contextos.
Aprenderás a usar media queries para aplicar tus propios estilos diferenciados en los contextos en los que trabaja Bootstrap: xs, sm, md y lg. Podrás comprobar de nuevo cómo Bootstrap es "mobile first" y que todos los estilos fuera de esas media queries se aplican desde el contexto más reducido.
Adaptaremos el sistema de rejilla inicial de las zonas de descripción, formadores, registro y agenda para que se acomoden perfectamente a todos los contextos y funcionen a ancho completo en el contexto más reducido.
Descubrirás cómo un etiquetado HTML no adecuado (por no haber tenido en cuenta desde el inicio los contextos responsive) puede provocar que no podamos aplicar el sistema de rejilla que deseemos en cada contexto.
Usaremos estilos propios aplicados en los contextos propios de Bootstrap 3 para cambiar por completo el comportamiento de la zona de mapa y alojamiento, de manera que puedan funcionar como contenido a ancho completo.
Contrastaremos un buen etiquetado HTML y la flexibilidad que nos permite frente a los diferentes contextos responsive, en comparación con la zona de índice de contenidos. Aprenderás a forzar saltos de "fila" dentro de un conjunto de columnas del sistema de rejilla, para evitar que algunos contenidos se monten.
El objetivo de este ejercicio será exportar una hoja de estilos CSS y un HTML dentro del ePub lo más ligero posible para poder aplicar así las reglas de estilo desde cero.
La partición por sílabas depende del modelo del dispositivo lector (eReader). Sin embargo, manipulando la hoja de estilos CSS podremos decidir qué párrafos y en qué dispositivos tiene que hacerse dicha partición.
El ePub tiene una maquetación fluida al cambiar el tamaño del texto y esto podría provocar que las listas numeradas o de viñetas acaben partidas. Esto se puede evitar con un retoque en la hoja de estilos CSS.
Con CSS podemos elegir si queremos que el tamaño de las imágenes ancladas a los párrafos sea fijo, relativo al tamaño de la página o incluso, relativo al tamaño del texto.
En este vídeo aprenderemos a estilizar con CSS una tabla HTML dentro de un ePub y a hacer que dicho estilo sea compatible con el máximo número de modelos de eReaders.
En este vídeo veremos cómo acabar de estilizar manualmente con CSS el aspecto de la zona de las notas al pie de página que genera Adobe InDesign. Éstas serán notas al final del capítulo en el ePub.
Por defecto, las notas al pie de página en un ePub son referencias cruzadas interactivas; es decir, hipervínculos de ida y vuelta de la nota a la referencia. En este vídeo veremos cómo cambiar su aspecto con la ayuda del CSS.
Qué diferencia hay entre CMYK y RGB, algunas de sus peculiaridades y una pequeña síntesis de lo que son y cómo funcionan; es lo que veremos en este vídeo.
Objectifs et présentation de la formation - Il dit qu'on développe les websites aujourd'hui avec une grille. Cette classe est sur les sujets le HTML5 et CSS3. Il parlera également de Responsive Web Design, également des d'audio, vidéo, sprites, animations et canvas.
Les nouvelles balises - Il indique simplement que HTML5 a beaucoup de nouvelles balises.
Web Forms 2.0 et les types de champs - C'etait une vidéo très utile qui a montré nombreuses nouvelles fonctionnaltiés HTML5 pour les formulaires, par exemple, autofocus, et un input type de date, bien que le soutien de le dernier ne semble pas trop fort.
Nous allons au cours de cette étape réaliser l'installation de Compass sous Mac OS. Depuis le terminal, les lignes d'instruction et le mode opératoire sont les mêmes que sous Windows.
En répétant la même approche que celle mise en place pour la gestion d'images adaptatives, il est possible d'imbriquer des vidéos qui pourront se redimensionner en fonction de l'espace du conteneur parent.
Collectify est votre application web d'exemple. Il est également un gestionnaire de collection. Julien Moulin vous la présente dans cette séquence.
Penser objet avec PHP - Il montre comment on peut créer une classe simple, puis il démont namespaces, et après ça il montre comment on peut étendre une classe avec RedBean_SimpleModel.
Vous ne remplacez pour le moment que des variables simples. Qu'en est-il si vous souhaitez travailler avec des objets dans la vue et donc afficher des propriétés d'un objet ? Vous le saurez en visionnant cette séquence.
En couplant deux éléments d'interaction, draggable et droppable, et en jouant avec leurs propriétés respectives, il est possible de mettre en place un outil de glisser-déposer, qui serait complexe à développer sans avoir recours aux librairies de jQuery et jQuery UI.
Le Datepicker est un composant qui ne contient pas d'option event, mais qui possède certaines propriétés qui permettent la même finalité. Prenez quelques instants pour explorer leur fonctionnement qui diffère un peu des écouteurs traditionnels, notamment au niveau des arguments de la fonction de rappel.
Il est important de ne jamais oublier la version avec laquelle vous travaillez. Certaines fonctionnalités sont devenues obsolètes, et certains plugins ne fonctionnent plus au-delà d'une certaine version.
Manipuler le head d'un document - Il explique comment utiliser jQuery pour changer le nom de fichier CSS à un autre nom similaire. J'ai été étonné que le navigateur recharge le fichier CSS automatiquement.
Tout commence avec la petite histoire de Bootstrap et les différences entre les versions. Vous jetterez aussi un oeil à la documentation pour découvrir toute la richesse d'un tel outil.
Voici une présentation de deux outils essentiels à tout bon développeur front-end. Voyez comment rapidement débugger une application avec le panneau de Chrome et comment facilement tester votre site responsive avec un bookmarklet facile à mettre en place.
Lorsque vous téléchargez Sublime Text, vous pouvez choisir entre la version 2 ou la version 3, vous devez aussi décider d'enregistrer votre licence, ou travailler en version non enregistrée. Quel que soit votre choix, l'ensemble de ces tutoriels seront applicables.
La granularité des préférences vous permet de caler des préférences au niveau des projets, ce qui vous permet dans certains cas de pouvoir uniformiser des réglages entre tous les membres d'une équipe de développement, projet par projet.
Mettez en oeuvre un token pour garantir la provenance des données par soumission de votre formulaire. Cette technique permet d'éviter les soumissions zombies.
Gérer des projets dans Aptana - Il a déjà tous les fichiers et dossiers pour un site simple. Il montre ensuite comment il ouvre et fait un projet avec Aptana.
Une autre manière de gérer les niveaux va être d'employer des groupements d'éléments en les plaçant entre parenthèses. Vous pouvez également avoir recours à des multiplicateurs afin de répéter un certain nombre d'opérations.
Il existe deux manières de mettre en place la notion d'héritage : soit en clonant une classe ou un module déjà en place et en l'appliquant à une autre classe ou module, soit en usant d'un pseudo garde-place qui va vous permettre de fabriquer des classes ou modules similaires, sans pour autant être présent dans le CSS final.
Nous verrons ici que le langage SQL est un peu particulier. Il s'agit d'un langage ensembliste adapté pour poser des questions (envoyer des requêtes) à un moteur de bases de données relationnelles.
ALL et ANY - Il a démontré les commandes ANY et ALL. Il a également montré des examples de EXISTS.
Vos amis ont grise mine avec leurs yeux rouges sur vos photos ? Dans ce cas regardez comment corriger ce petit défaut avec la fonction Suppression des yeux rouges, tout simplement.
Vous avez l'habitude de créer et d'utiliser toujours le même type de fichier avec les mêmes caractéristiques ? Et bien sachez que vous pouvez gagner du temps en enregistrant ces paramètres sous la forme de modèles qu'il vous suffira de sélectionner par la suite.
Vous utiliserez le filtre Antiparasite sur une photo, et une méthode pratique pour réduire le bruit d'une image consiste également à utiliser le Filtre NL, NL pour Non Linéaire.
Les modules pour Firefox sont répartis en trois catégories : extension, thèmes et plug-ins. Les modules vous permettront de personnaliser Firefox en fonction de vos besoins ou vos goûts.
Votre module choisi, vous pouvez l'installer et le désactiver facilement quand bon vous semble.
DownloadHelper - Cette vidéo montre comment tu peux installer le module DownloadHelper qui permet à télécharger n'importe quelle vidéo de YouTube dans les mp4 ou flv formats.
Assurez-vous de proposer une structure rédactionnelle claire et ergonomique de façon à offrir une analyse simplifiée de votre site aux robots des moteurs de recherche.
Comprendre les utilités des Web Workers - Il est expliqué que les Web Workers ne bloquent pas la page quand il est en cours de chargement. Ils chargent parallèl à la page.