Desarrollo Web. Diseño

Algunos apuntes para diseño de pantallas Web

NodeJs y Electron

Estos son los programas que llevan todas las máquinas:
  - brackets: editor de texto enriquecido (muy útil para desarrollo web)
  - build-essential: paquete con programas/utilidades para compilar paquetes en linux (útil para algunos módulos de nodejs)
  - chrome-browser: navegador web que usaremos para desarrollo web
  - sublime-text3: editor de texto enriquecido
  - nodejs, npm, electron: paquetes para la segunda parte del taller (indispensable para desarrollar)
  - git: control de repositorios (muy útil para la segunda parte del taller, donde trabajaremos con repositorios)
  - gitkraken: cliente gráfico de git

Estas son instrucciones para tener el mismo software:

En Windows:
  - Instalando el software en tu ordenador manualmente.
  - Instalando virtualbox y metiendo la imagen virtualbox del taller.

En Linux:
  - Instalando los paquetes con el script de instalación.
  - Instalando los paquetes manualmente
  - Instalando virtualbox y metiendo la imagen virtualbox del taller.

Con el script de instalación (solo para linux, basados en apt-get):
  - Abre una terminal:
    - Descarga el script (en una terminal):
    wget https://github.com/m0n0l0c0/TallerWEB/blob/master/scripts/install_packages.sh
    - Hazlo ejecutable:
    chmod 755 install_packages.sh
    - Ejecutar y seguir los pasos del script:
    ./install_packages.sh

Para instalar la máquina virtual:
- Descargar la imagen aquí. Nuevo enlace a maquina virtual

- Instalarla en virtualbox: doble click y seguir los pasos (la descomprime, la guarda con sus discos y la inicia)
Guillermo Irigoyen. Repositorio de github
Archivo Zip compartido


Diapos de NodeJs Dia 1 (Guillermo Echegoyen)
Diapos de NodeJs dia2 (Guillermo Echegoyen)

Aprendiendo Desarrollo Web

Enlaces de interés para desarrollo web.
Videos Universidad Politécnica de Madrid
Enlace a documentos de interés
Ejemplos de html, css y bootstrap
Esquemas para desarrollo

Instalacion y recursos para desarrollo Web en Mac

Mac:
Usaremos SublimeText3, descargarlo desde la página del desarrollador
Instalar git desde la pagina de desarrollo
Para instalarlo ir a Preferencias del Sistema-Seguridad y Privacidad y permitir aplicaciones descargadas desde "Cualquier sitio". Para ello es necesario introducir contraseña del administrador del equipo. Recordar dejarlo como estaba despues de esta instalación
Comprobar con : git --version

- Descargar nodejs para mac buscandolo con San Google o desde el enlace.
Comprobar que el path sea correcto: echo $PATH. Debe estar includo /usr/local/bin
Comprobar: node --version (4.2.4)
Comprobar: npm --version (2.14.12)
Ir al navegador y buscar browserSync
Copiar el comando de pantalla y ejecutar con sudo (npm install -g browser-sync)
Desde el terminal comprobar: browser-sync --version (2.10.1)
Crear el directorio de trabajo del sitio web y con SublimeText crear la pagina index.html dentro de este directorio. Escribir en este fichero "html" y dar a Ctrl+Espacio, con lo cual observaremos que rellena un guión de la página html. Poner un texto de prueba en el titulo y en el cuerpo.
Dentro del directorio de trabajo, comprobar con terminal:
browser-sync start --server --directory --files "*". Saldrá localhost:3000 en el navegador

Windows:
Poner a Chrome como navegador por defecto.
Instalar Sublime Text 3
Instalar Git:
     Seleccionar: Usar git desde linea de comandos
    Sel:Usar windows como consola por defecto
-Comprobar desde cmd: git --version (2.6.4.windows.1)
- Bu car download nodejs for windows.
- Instalarlo.
- Cerrar cmd y abrir otro
-Comprobar con nodejs --version (v4.2.4)
- Comprobar: npm --version (2.14.12)
- En el navegador: browser sync
-Copiar el mensaje: npm install -g browser-sync y ejecutar en terminal.
-Salir de terminal y abrir otro nuevo. Poner browser-sync --version (2.10.1)

Crear un repositorio en GitHub
Ir a Settings y pinchar en Launch Automatic Page Generator.
Leer y pinchar en Continue to Layouts
Pincvhar en Publish page

Crear subdirectorio de trabajo. Dentro de éste: git clone https://github.com/jmanuel34/Coursera-test.git
Pasar a coursera-test
-poner git status (Aparece en la rama master)
- Poner: git checkout gh-pages
- git status
- Mkdir site; cd site.
- Ejecutar sublime text
- Insertar un archivo index.html en coursera->coursera-test->site
-Ejecutar git status para comprobar
-Ejecutar "git add . "en la rama más alta. En Coursera-test


- Ejecutar " git commit -m "Mi primera pagina"".
- Exe: "git push" para subirlo
- Dentro del subdirectorio cambiado, exe: browser-sync start --server --directory --files "*"
- Para la sincronizacion. Ver los cambios realizados inmediatamente en Google Chrome:
Exe: browser-sync start --server --directory --files "*"

Recursos: stackoverflow.com
jsfiddle.net. 
codepen.io
css-tricks.com

Tim Berners-Lee, el padre de la Web

Sir Timothy "Tim" John Berners-Lee, KBE (Londres, Reino Unido, 8 de junio de 1955) es un científico de la computación británico, conocido por ser el padre de la Web. Estableció la primera comunicación entre un cliente y un servidor usando el protocolo HTTP en noviembre de 1989. En octubre de 1994 fundó el Consorcio de la World Wide Web (W3C) con sede en el MIT, para supervisar y estandarizar el desarrollo de las tecnologías sobre las que se fundamenta la Web y que permiten el funcionamiento de Internet.

• Sir Timothy "Tim" John Berners-Lee
• HyperText Markup Language, HyperText Transfer Protocol, Uniform Resource Locator.

 Ted Nelson. Enlace al artículo de la Wikipedia.
Vannevar Bush. Enlace al artículo de la Wikipedia.