Para qué te prepara este curso subvencionado Curso Gratuito Web App para iPad: Experto en Desarrollo Webs Responsive para iPad:
Este Curso de Web App para iPad: Experto en Desarrollo Webs Responsive para iPad le prepara para conocer a fondo el desarrollo web Responsive especializado para iOS y más específicamente para iPad.
A quién va dirigido:
El Curso de Web App para iPad: Experto en Desarrollo Webs Responsive para iPad está dirigido a profesionales del sector del desarrollo web que deseen ampliar su formación o especializarse en Web Responsive para Ipad, así como a personas interesadas en dedicarse profesionalmente a este entorno laboral.
Objetivos de este curso subvencionado Curso Gratuito Web App para iPad: Experto en Desarrollo Webs Responsive para iPad:
- Instalar Bootstrap para nuestra web app - Desplegar la ubicación del dispositivo en Google Maps. - Empaquetar nuestra aplicación en PhoneGap Build. - Crear sitios web que se adaptan automáticamente a cualquier resolución para obtener así una visualización óptima, independientemente del tipo de pantalla, ya sea de ordenador, tableta o smartphone.
Salidas Laborales:
Diseño Web / Web responsive para iPad.
Resumen:
Si tiene interés en el sector de la programación y desarrollo y desea conocer los aspectos esenciales sobre el desarrollo web enfocado a iPad este es su momento, con el Curso de Web App para iPad: Experto en Desarrollo Webs Responsive para iPad podrá adquirir los conocimientos necesarios para desempeñar esta labor con éxito, aprendiendo a crear una web app creada específicamente para iPad.
Titulación:
Doble Titulación Expedida por EUROINNOVA BUSINESS SCHOOL y Avalada por la Escuela Superior de Cualificaciones Profesionales
Metodología:
Entre el material entregado en este curso se adjunta un documento llamado Guía del Alumno dónde aparece un horario de tutorías telefónicas y una dirección de e-mail dónde podrá enviar sus consultas, dudas y ejercicios. La metodología a seguir es ir avanzando a lo largo del itinerario de aprendizaje online, que cuenta con una serie de temas y ejercicios. Para su evaluación, el alumno/a deberá completar todos los ejercicios propuestos en el curso. La titulación será remitida al alumno/a por correo una vez se haya comprobado que ha completado el itinerario de aprendizaje satisfactoriamente.
Temario:
PARTE 1. WEB APP PARA IPAD
UNIDAD DIDÁCTICA 1. INTRODUCCIÓN A MI PRIMERA WEB APP PARA IPAD
- Presentación del proyecto de web app para iPad
- Archivos base de Mi primera web app para iPad
- Requisitos de hardware y software
- Simulador de iPad
UNIDAD DIDÁCTICA 2. CREANDO LAS BASES DEL PROYECTO
- Creando las bases en HTML
- Estructura del proyecto de web app para iPad
- Instalando Bootstrap para nuestra web app
- Agregando barras de navegación al proyecto
- Agregando contenido para la página principal
- Formato para los formularios
- Integrando archivos base CSS y JavaScript
- Agregar viewport
UNIDAD DIDÁCTICA 3. AGREGAR CONTENIDOS GRÁFICOS A LA WEB APP
- Tratamiento de imágenes para móviles
- Reducir ancho de banda con CSS
- Detectar realineación de pantalla
- Realinear contenidos según orientación
UNIDAD DIDÁCTICA 4. UTILIZAR CONTENIDO MULTIMEDIA EN LA WEB APP
- Tratamiento de video para iPad
- Crear un reproductor de video
UNIDAD DIDÁCTICA 5. AGREGAR INTERACTIVIDAD A NUESTRA WEB APP
- Obtener coordenadas GPS
- Instalar Google Maps en nuestra web app
- Desplegar la ubicación del dispositivo en Google Maps
UNIDAD DIDÁCTICA 6. APARIENCIA DE LA WEB APP PARA IPAD
- Ejecutar la aplicación desde la pantalla de inicio
- Mostrar aplicación en pantalla completa
UNIDAD DIDÁCTICA 7. EMPAQUETADO DE UNA WEB APP COMO APLICACIÓN NATIVA
- Empaquetando nuestra aplicación en PhoneGap Build
- Definir permisos y configuración
PARTE 2. DISEÑO WEB RESPONSIVE CON HTML5 Y CSS3
UNIDAD DIDÁCTICA 1. INTRODUCCIÓN
- El diseño web actual
- Diseño web responsive
- Planteamientos de diseño
- Pasar a otra cosa
- Objetivos del libro
- Herramientas del maquetador
- Descargar ejemplos
- Objetivos
- Mozilla Firefox
- Google Chrome
- Apple Safari
- Microsoft Internet Explorer
UNIDAD DIDÁCTICA 2. SOLUCIONES PARA LA COMPATIBILIDAD
- Disparidad entre navegadores
- Mejorar la compatibilidad
- Visualización inicial de los navegadores
- Normalize.css
- El HTML5 y html5shiv.js
- Media queries y respond.js
- Las alternativas y Modernizr.js
- Las reglas @supports
- El problema
- El reset universal
- El reset de Eric Meyer
- El reset de HTML5 Doctor
- El proyecto
- Descargar Normalize.css
- Instalar Normalize.css
- Objetivo
- Archivo de ejemplo
- Librería html5shiv.js
- Objetivo
- Archivo de ejemplo
- La librería respond.js
- Objetivo
- Descargar Modernizr
- Crear una página de ejemplo
- Instale y enlace el script Modernizr
- La activación de Modernizr
- Utilizar las clases de Modernizr
- Utilizar Modernizr con JavaScript
- Objetivo
- Utilizar las reglas @supports
- Operadores
UNIDAD DIDÁCTICA 3. EL DISEÑO CLÁSICO
- Diseñadores y maquetadores
- Modelos de cajas
- Los márgenes de los elementos
- Visualización de los elementos
- Visualización en flujo normal
- Posicionamiento absoluto
- Posicionamiento fijo
- Posicionamiento relativo
- Utilizar el diseño en posición relativa y absoluta
- Visualización de cajas flotantes
- Posicionamiento flotante
- Colocar las cajas al lado
- Prohibir la flotación
- Ejemplo con cuatro cajas
- Diseño simplista
- Conclusión sobre diseñar con elementos flotantes
UNIDAD DIDÁCTICA 4. DISEÑAR CON TABLAS
- Objetivo
- La propiedad display
- Diseño simple con una tabla
- Ancho en pantalla de la tabla
- Elementos anónimos
- Otros elementos para las tablas
- Diseño de las filas
- Establecer el ancho de las celdas
- Diseño con una tabla más estructurada
- Otras propiedades de diseño
- Alineación vertical
- Conclusión
- Párrafos en las celdas
- Listas en tablas
- Anchos fijos
- Anchos en porcentaje
- Propiedad table-layout
- Propiedad border-collapse
- Propiedad border-spacing
- Propiedad empty-cells
- Propiedad caption-side
UNIDAD DIDÁCTICA 5. CUADRÍCULAS DE DISEÑO
- Objetivo
- Estructura de las cuadrículas para la web
- Cuadrículas fijas
- La cuadrícula fija 960gs
- Cuadrícula fija notjustagrid
- Cuadrícula fluida Gridiculous
- Cuadrícula
- Archivos CSS
- Página de ejemplo
- Enlaces a las hojas de estilo
- Estilos personales
- Contenedor del diseño
- Bloques en 12 columnas
- Bloques en las columnas de la cuadrícula
- Prohibir los bloques flotantes adyacentes
- Bloques con desplazamiento
- Bloques centrados
- Código completo de la página
- El framework
- Cuadrícula
- Página de ejemplo
- Archivos CSS
- Enlaces a las hojas de estilo
- Estilos personales
- Contenedor del diseño
- Sistema de clases
- Bloque para todo el ancho
- Tres bloques en un tercio de la cuadrícula
- Dos bloques en 3/5 y 2/5 de la cuadrícula
- Un solo bloque en 2/3 de la cuadrícula
- Código completo de la página
- Cuadrículas fluidas
- Cuadrícula Gridiculous
- Página de ejemplo
- Descargar la cuadrícula
- Instalar la cuadrícula
- Estilos personales
- Contenedor
- Filas
- Tres bloques con la misma anchura
- Dos bloques con anchos distintos
- Bloque desplazado
- Visualización de la cuadrícula fluida
UNIDAD DIDÁCTICA 6. MEDIA QUERIES
- Objetivo
- Orígenes
- Uso de media queries
- Sintaxis de las media queries
- Características a prueba
- Dónde ubicar las media queries
- Tamaño de las pantallas de los móviles
- El concepto viewport
- Un ejemplo muy sencillo
- Cuadrícula responsive
- Ejemplos de sitios con media queries
- Esquema
- Código HTML y CSS
- Cuadrícula
- Descargar e instalar la cuadrícula
- Crear una página sencilla de 12 columnas
- Vínculo a los estilos y a los scripts
- Estructura del diseño
- Reglas CSS
UNIDAD DIDÁCTICA 7. EL DISEÑO RESPONSIVE
- El diseño responsive
- Cuadrículas responsive
- Cuadrícula responsive Simple Grid
- -Utilizar Simple Grid
- Cuadrícula responsive Columnal
- Uso de imágenes
- Imágenes fluidas
- Script Response.js
- Script picturefill.js
- Script responsive-images.js
- Propuestas para el futuro
- Tipografía responsive
- Tablas responsives
- Descargar e instalar Simple Grid
- Filas
- Esquema
- Primera fila
- Segunda fila
- Tercera fila
- Utilizar la cuadrícula fluida y responsive
- Código completo
- Utilizar Columnal
- Descargar e instalar Columnal
- Esquema
- Contenedor y filas
- Primera fila
- Segunda fila
- La tercera fila y el desplazamiento
- La cuarta fila y bloques anidados
- Utilizar la cuadrícula fluida y responsive
- Código completo del diseño
- Imágenes responsives
- Código completo para el diseño con una imagen responsive
- Objetivo
- Diseño fijo
- Diseño fluido
- Ancho fluido de otros elementos
- Anchos de imágenes fluidas
- Abrir y cambiar el tamaño de la página
- Código completo de la página
- Utilizar JavaScript
- Descargar el JavaScript
- Enlaces a los JavaScript
- Preparar imágenes
- Código de la página
- Funcionamiento del script
- Optimizar las leyendas
- Código completo de la página
- Utilizar JavaScript
- Descargar el JavaScript
- Enlaces a los JavaScript
- Preparar imágenes
- Código de la página
- Visualización de la imagen responsive
- Código para las pantallas de alta definición (Retina)
- Código completo de la página
- Utilizar JavaScript
- Descarga la demo
- Código de la página
- Utilizar la página
- Grupos de trabajo: RICG y W3C
- Grupos de trabajo: Apple y W3C
- Objetivo
- Unidades utilizadas
- Unidad em y cascada
- Unidad rem y la cascada
- Tipografía responsive y unidad rem
- Tipografía responsive y fuentes
- Unidades relacionadas con el viewport
- Objetivo
- Zurb
- La solución de Geoff Yuen
- La solución de Chris Coyier
- Otras soluciones
UNIDAD DIDÁCTICA 8. FRAMEWORKS DE CSS
- Utilizar los frameworks de CSS
- Frameworks de CSS
- UIkit
- Kube
- Pure
- Utilizar UIkit
- Descargar el framework
- Descargar jQuery
- Instalar el framework
- Crear una cuadrícula fluida
- Utilizar la cuadrícula fluida
- Utilizar la cuadrícula responsive de UIkit
- Crear una barra de navegación
- Crear una tabla con formato
- Utilizar Kube
- Descargar el framework
- Instalar el framework
- Crear una cuadrícula fluida y responsive
- Utilizar la cuadrícula fluida y responsive
- Insertar un formulario
- Insertar botones
- Utilizar Pure
- Descargar el framework
- Enlazar el framework
- Utilizar la cuadrícula fluida responsive
- Insertar una tabla
- Insertar una barra de menú con un menú desplegable
UNIDAD DIDÁCTICA 9. EL FUTURO DEL DISEÑO
- Objetivos
- Multicolumna
- Cajas flexibles
- Otros módulos del W3C
- Preceptos de uso
- Configuración de columnas
- Configuración de las calles
- Configuración de saltos de columna
- Distribución en varias columnas
- Un generador de multicolumnas
- Columnas y diseño responsive
- Ubicación de los elementos de diseño
- Módulo de las cajas flexibles
- Cajas flexibles
- Orientación y dirección de las cajas
- Desbordamiento de las cajas
- Orientación de las cajas
- Alineación horizontal de las cajas
- Alineación vertical de las cajas
- Excepciones en la alineación vertical
- Excepciones en la alineación horizontal
- Propiedades de la flexibilidad
- Propiedad flex-grow
- Propiedades flex-shrink y flex-basis
- Constructores en línea
- Ejemplo de diseño flexible
- Recorrido
- Cuadrículas
- Plantilla de página
- Distribución
- Regiones