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)

  1. Inline
  2. Externo e Interno
  3. 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