PDF de programación - Desarrollo de aplicaciones web

Table of Contents

1. Introduction 1.1
2. Entorno de trabajo 1.2
1. Software 1.2.1
2. Configuración de Sublime Text 1.2.2

3.
4. Multimedia 2.1

1. Imagen 2.1.1
2. Video 2.1.2
3. Audio 2.1.3
4. Qué funciona en la web 2.1.4

5.
6. La Web actual 3.1

1. La Web actual 3.1.1
2. Proyecto Web básica 3.1.2
3. Tiempo de carga 3.1.3

7.
8. CSS avanzado 4.1

1. Lenguajes de preprocesado: Sass 4.1.1
2. Uso de Bootstrap 4.1.2

9.
10. JavaScript 5.1

1. Características generales 5.1.1
2. linters 5.1.2
3. jQuery 5.1.3

1. Efectos en jQuery 5.1.3.1
2. html y jQuery 5.1.3.2
3. Eventos 5.1.3.3
4. Ajax 5.1.3.4
5. ¿Adios jQuery? 5.1.3.5

11.
12. Node.js 6.1

1. Introducción a Node.js 6.1.1
2. Crear una librería en node.js 6.1.2
3. Arquitectura de una API REST 6.1.3
4. Creación de una API con node.js 6.1.4

13.
14. SPA 7.1

1. Arquitectura de un SPA 7.1.1
2. PhoneGap 7.1.2

15.
16. Web Components 8.1

1. Entorno de desarrollo mediante Webpack 8.1.1
2. Características de ES2015 8.1.2
3. Evolución del CSS 8.1.3
4. Reactjs 8.1.4
5. Real Time 8.1.5

17.
18. Proyectos solucionados 9.1

1. Proyecto Web básica 9.1.1

1

2. Web con bootstrap y gulp 9.1.2
3. React.js con material-ui 9.1.3

2

Introduction

Introduction
Introducción
Objetivos del curso

Configurar entornos reales de trabajo para desarrollo web

Editor de código
Control de versiones
Automatización de tareas

Desarrollo Web actual

Páginas adaptables
Criterio Mobile First
Frameworks de CSS: Bootstrap y Material Design
Frameworks de JavaScript: React.js

Conocer arquitecturas de desarrollo de software

MEAN stack
Real time
Aplicaciones híbridas para móviles
Web Components

Apreciar la evolución en el desarrollo del software

Tests: Mocha, Code coverage, Travis...
CSS -> Preprocesado de CSSS -> Frameworks de CSS -> CSS Modules...
Uso de transpilers y evolución actual de JavaScript

Conocimientos previos

html, css y js básico
Puedes seguir este tutorial para html y css básico
Empezaremos con un ejercicio práctico:

Nos familiarizamos con Sublime Text
Practicamos con Emmet
Repasamos Chrome Developer Tools
Repasamos etiquetas html5 y css

Relación con el currículo de DAW

Sistemas informáticos

Utilizaremos comandos de consola de Linux
Ejecución de servicios
Añadir repositorios e instalar paquetes

3

Introduction

Bases de datos

Utilizaremos una base documental MongoDB (la opción más extendida)

¡¡¡No aparece en el currículo!!!

Quizá algún ejercicio con MySql y phpMyAmin

Lenguaje de marcas

Crear y validar documentos en html

Programación

Utilizaremos elementos y estructuras propias de los lenguajes de programación, mediante
JavaScript

Entornos de desarrollo

Arquitectura de aplicaciones Web

Api REST
Aplicaciones para móviles

Instalación y uso de entornos de desarrollo
Configuración y uso de Sublime Text
Otras opciones
Entornos de optimización y automatización de tareas mediante con node.js

Pruebas mediante Mocha
Integración continua mediante Travis CI
Code Coverage con istanbul
Control de versiones con Git y GitHub

Despliegue y aplicaciones Web

Instalación de un servidor Web

Express y node.js

Control de versiones con Git y GitHub

Desarrollo Web en entorno Servidor

Arquitectura de aplicaciones Web
Api REST

Soluciones híbridas
Soluciones en tiempo real
¡Nada de etiquetas embebidas: asp, php...!

Desarrollo Web en entorno Cliente

Repaso general de todo el temario

Diseño de interfaces Web

Repaso general de todo el temario

Cómo trabajar

4

Introduction

Roles

¿Quién es el profesor?

Persona con conocimientos límitados
Tiempo de respuesta: ¿horas? ¿días?
Buen orientador

¿Quién es stackoverflow?

Multitud de personas con múltiples conocimientos (ver tags)
Tiempo de respuesta: ¿minutos?
La mejor herramienta junto con GitHub para ir haciendo curriculum

Trabajo por proyectos

Complicado con los módulos si los hacemos "estancos"
Fomenta la creatividad y el trabajo en equipo
Que trabajen los alumnos. Es más interactivo y menos cansado :-)
Los controlamos mediante GitHub o Bitbucket

Repositorios privados o públicos
PR en vez de copiarse del compañero
Tiene que estar claro como funciona desde 1º y no hay otra forma que haciendo código

Otras ideas

Servidor en la nube

So You Start con Vesta
Primer portfolio del alumno
Entorno real

Virtualiza con Docker

Más rápido
Se puede montar un servidor de imágenes Docker en el propio centro
Uso de gestores de contenidos (Wordpress, Joomla, Magento, Prestashop)...

Documentación

Generada con Gitbook

Para generar las slides, pdf, epub o mobi

Es necesario tener instalado calibre

git clone [email protected]:juanda99/curso-webapps.git

5

Introduction

cd curso-webapps
gitbook install
npm install -g gitbook-cli
npm install
npm run slides
npm run pdf
npm run epub
npm run mobi

Libro online con generación de pdf, epub y mobi

6

Entorno de trabajo

Entorno de trabajo
Entorno de trabajo

Los objetivos de este capítulo son los siguientes:

Tener una lista de software necesario y su procedimiento de instalación, de modo que se pueda
replicar de forma rápida.
Tener anotados todos los ajustes, configuraciones y plugins que nos van a hacer falta en los
distintos programas (especialmente en Sublime Text) que utilizaremos a lo largo de todo el
curso.

7

Software

Software
Instalación y configuración del software
nvm

Instalaremos y utilizaremos node vía nvm (node virtual manager)

Esto nos permitirá:

Poder cambiar de versión de node de forma transparente
Evitar tener que hacer sudo cuando instalemos paquetes de forma global

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash

Instalar una versión de node:

nvm install 5.0

Ver las versiones que hay instaladas:

nvm ls

Usar una versión en particular:

nvm use 5.0

Usar una versión en particular siempre que abrimos un shell:

nvm alias default 5.0

node

La otra opción sería instalar directamente node:

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo apt-get install build-essential

Comprobamos que esté instalado:

npm -v
node -v

Instalación de git:

sudo apt-get update
sudo apt-get install git

git

8

Software

Configuración necesaria para cada commit que haga:

git config --global user.name "Your Name"
git config --global user.email "[email protected]"

Opcionalmente el editor (si no me gusta el que hay por defecto):

git config --global core.editor vi

Configuración de git

Git tiene 3 niveles de configuración, cada nivel sobreescribe el anterior:

Para todos los usuarios: /etc/gitconfig
Para un usuario: ~/.gitconfig (opción --global)
Para un repositorio: .git/config

Para ver los parámetros configurados:

git config --list

Viene bien tener una chuleta de comandos de Git

Configuración de GitHub

Nos registramos en Github
Accedemos a nuestra cuenta

Vamos a los settings y asociamos una ssh-key

Evitaremos introducir usuario/contraseña en cada git push

Como creamos nuestra ssh-key:

ssh-keygen

Copiaremos el contenido de ~/.ssh/id_rsa.pub a una nueva clave ssh en GitHub

Instalación de zsh

Algunos prefieren fish

Otros son fieles a bash

sudo apt-get install zsh
chsh -s $(which zsh)

Instalo oh-my-zsh

Añado el plugin para nvm y git

Instalación de Sublime Text 3

Lo veremos en el siguiente punto.

9

Software

La elección de un IDE o un editor de código no es trivial y la configuración del mismo para explotar
todas sus posibilidades tampoco.

Instalación de Google Chrome

Desde la web

Instalación de Adobe Brackets

Web de referencia
Es un editor exclusivamente para web (js, html, css)
Más información

Instalación de Gnome Shell

Como instalarlo y configurarlo
Instalaremos también un terminal: Guake

Instalación de MongoDB

Instalaremos primero mongodb:

sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv EA312927
echo "deb http://repo.mongodb.org/apt/ubuntu trusty/mongodb-org/3.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.2.list
sudo apt-get update
sudo apt-get install -y mongodb-org

El servicio se levanta como otros servicios de Linux:

sudo service mongod start

Y para entrar a su consola, mediante mongo, o mediante algún gui como por ejemplo
Robomongo, que también podemos instalar desde su web.

Instalación de Android Studio

Lo podemos instalar de forma manual:

Descargar software
Instalar dependencias como Java y librerías varias

Mediante ubuntu-make (antes Ubuntu developer tool center)

cli para descargar e instalar la última versión de las herramientas más populares de
desarrollo
Gestiona las dependencias

ubuntu-make

Instalación de umake:

sudo add-apt-repository ppa:ubuntu-desktop/ubuntu-make
sudo apt-get update
sudo apt-get install ubuntu-make

10

Software

Uso de umake (ver lista de software)

umake -h
# por ejemplo en IDES
umake ide -h

Instalación de Android Studio:

umake android # umake android android-studio

Una vez instalado ejecutamos studio.sh que nos instalará el SDK.

Variables de Shell

Fichero $HOME/.zshrc para el shell zsh:

export ANDROID_HOME='/home/usuario/Android/Sdk'
path+=('/home/usuario/Android/Sdk/tools' '/home/usuario/Android/Sdk/platform-tools')

Añado también el repositorio de los binarios de npm (lo utiliza Sublime Text y al usar zsh hay
que dárselo). Fichero $HOME/.zshenv:

path+=('/home/usuario/.nvm/versions/node/v5.0.0/bin/')

Test de funcionamiento

Cierra y vuelve a abrir el shell
Ejecuta un comando como android avd

11

Configuración de Sublime Text

Configuración de Sublime Text
Configuración de Sublime Text
Editores de código

Sublime Text, Atom, Brackets

IDE: Integrated Desktop Environment (

WebStorm
NetBeans, Eclipse, Android Studio
¿Visual Studio Code?

Un IDE tiene muchas cosas "out of the box":

Terminal
VCS (Version Control System)
Task Runner (Grunt, gulp...)
Debug, testing...

Un editor de código tiene:

Ventajas:

Más ligero
Lo configuras a tu manera (plugins)

Desventajas:

Trabajo de configuración
No está integrado

Instalación de Sublime T