Diseño de aplicaciones interactivas
Erick Fernando Martínez Viruette
(trabajo en progreso)
emartinez@enesmorelia.unam.mx
erick.martinez@tec.mx


Profesor
Preparación del
entorno de trabajo
Erick Fernando Martínez Viruette
Preparación del entorno
- Integrated development environment (IDE)
- Control de versiones
- Navegadores para desarrolladores
Integrated Development Environment (IDE)


Control
de
versiones
Cualidades:
- Mecanismo de almacenamiento de los elementos a gestionar.
- Posibilidad de realizar cambios sobre tales elementos.
- Registro histórico de las acciones realizadas con cada elemento (además, quien lo realizó).
Beneficios
- Favorece el trabajo ordenado
- Facilita el archivado de las versiones
- Mantiene en orden la información histórica
- Habilita la colaboración
- Administra el espacio de almacenamiento
- Ofrece un medio para la recuperación ante borrado o mala edición
Navegadores para desarrolladores







Localhost
Servidor local
XAMPP
X (cualquier OS)
A pache
M ySQL/MariaDB
P HP
P erl





HTML

Timothy "Tim" Berners-Lee
Se le considera el padre (junto a su equipo) del Internet o la World Wide Web.
La web debe ser una forma de comunicación universal, no restrictiva

Intercreatividad
El proceso de hacer cosas o resolver problemas juntos. […] tenemos que ser capaces no solo de encontrar cualquier tipo de documento en la web, sino también de crear cualquier tipo de documento, fácilmente […] Tendríamos que ser capaces no solo de interaccionar con otras personas, sino crear con otras personas.
Berners-Lee, 1999.
HTML
Sintaxis


vs
Para complementar (w3schools):
Web semántico

Para complementar:
CSS





CSS
Sintaxis

Declaration block
{




CSS Externo

Recordar la sintaxis:
Propiedad : Valor
Selector
CSS Interno


Recordar la sintaxis:

CSS Inline
Orden en cascada
(cascading order)
- Inline
- Externo e Interno
- Default del navegador

Para complementar (w3schools):
CSS
Flexbox

Para complementar (w3schools):
Otros editores tipo WYSIWYG:
CSS
Media queries

CSS
Animaciones

Para complementar (w3schools):
Otros recursos:
Javascript
Javascript ≠ Java


Document Object Model


Para complementar (w3schools):
Web Audio API
audioContext y nodos
Audio source
(nodo)
Audio
filter
(nodo)
Destination
(nodo)
audioContext
Tone.js
Es un entorno de trabajo (framework) para crear música interactiva en el navegador.

Javascript
JQuery
Javascript
Librerías
(solo algunos ejemplos)




Para más ejemplos y documentación, click sobre la imagen:
p5.js
(Javascript)
PHP
Hypertext Pre Processor
SQL
Structured Query Language
Content Management System
Sistema manejador de contenido

https://www.markethink.net/blog/sistemas-gestion-de-contenidos-cms/

https://www.cefove.com/sobre-los-cms/
Para complementar (wikipedia):
Programacion Web
By Erick Martinez
Programacion Web
- 113