Propósito, Motivación y Condiciones

¿ Por qué estoy aquí ?

Contenidos

• Arquitectura de una Aplicación Web
• Introducción Command Line en Linux
• Programación en PHP
• Administrando Proyectos Web
• Usando el Framework Yii
• Usando un Boilerplate

Habilidades Básicas Necesarias para Seguir la Capacitación

• Algorítmia
• HTML - developer.mozilla.org

Introducción Command Line en Linux

Utilizando el protocolo SSH y un poco de historia

"Sugerencia"

Revolution OS

Qué tiene de importante conocer el mundo open source ?

• Top 500
• Apache

Introducción Command Line en Linux

Comandos y características básicas en BASH

• Autocompletar comandos y archivos
• Ver la historia con history
• Repetir comandos !!, !char, !num
• Buscar con Ctrl + r
• Editor Nano

• comando opciones argumentos
• opciones - y --
• Ejemplo cal
• Ejemplo rev /etc/issue (--help)

Son demasiados!!! Cómo puedo ser como Marcelo Urrutia ?

• whatis
• --help
• man y info
• Explainshell.com
• Y obviamente Googlear

Operaciones Básicas

• Posicionarse, copiar, mover y eliminar
• Crear nuevos archivos
• Sistema de archivos y directorios interesantes
• pwd

Recursos

• Filesystem Hierarchy Standard

Actividad

Crear un directorio llamado "backups" dentro de /home/ubuntu, respaldar dentro de este nuevo directorio el archivo /etc/crontab, con el siguiente formato de nombre crontab-yyyymmdd

Introducción Command Line en Linux

Un paso más alla de lo básico

Usuarios, Grupos y Permisos

• UID
• /etc/passwd
• /etc/group
• Permisos ls -l, (r, x, w, -)
• chown y chgrp
• Qué es eso de 644, 755 ?!!

Actividad

Cambiar el propietario y grupo del archivo /home/ubuntu/crontab-yyyymmdd a ubuntu y root respectivamente. Y asigne los siguientes permisos rwx--xr--

Volviendonos un mago en BASH

• Expresiones regulares (*, ?, y un largo etc)
• Comunicandonos con echo
• Expansión con { }
• Expansión de comandos con $()
• Definiendo alias
• Definición de variables
• Entendiendo export
• Comandos set, env
• Creando comandos !o◡O!

Actividad

Crear un script que realice lo siguiente:

• De un mensaje de saludo con el siguiente texto "Bienvenido usuario (nombre del usuario), estoy realizando los respaldos del día dd/mm/yyyy"
• Genere una copia dentro del directorio definido en la variable BACKUP_DIRECTORY, de todos los archivos con terminación .conf ubicados en /etc

Entendiendo la parte críptica de BASH

• Entradas y salidas estándar
• Operadores >, 2>, &>
• Operador >>
• /dev/null
• Pipes?!!! (¬_¬)

Loops en BASH

for variable in valor1 valor2
do
	#Nuestro código
done

Ejemplo Básico

for NOMBRE in Pedro Juan Diego
do
	echo $NOMBRE
done

Loops Menos Triviales

for DIR in $(ls)
do
	echo $DIR
done

for NUM in $(seq 1 10)
do
	echo "Los números $NUM"
done

for N in {1..254}
do
	HOST=158.170.1.$N
	ping -c1 $HOST
done

Actividad

Generar un reporte llamado report.txt, el cual contenga el siguiente contenido:

• Reporte características máquina $(Nombre de la Máquina)
• SEGIC dd/mm/yyyy
• Información de CPU
• contenido /proc/cpuinfo
• Información de la memoria
• contenido /proc/meminfo

Monitoriando la salud de Linux

• Espacio de disco - df
• Tamaño de un directorio - du
• Memoria usado y desocupada - free
• Archivos abiertos - lsoft (-u)
• Procesos ejecutandose - top
• Usuarios logeados - w
• Monitoriar red - netstat

Profundizando los Conocimientos o Como transformarse en un demente

Instalando Software en Linux

Adaptando el servidor a nuestras necesidades

Arquitectura de una Aplicación en LINUX

Algo sobre bibliotecas...

• Convención: Nombre completo (‘lib’ + nombre de la libreria + ‘.so’ + ‘.’ + numero de versión)
• Ubicación: /lib, /usr/lib, /usr/local/lib
• Revisar librerias urilizadas por un ejecutable - ldd
• Cargar nuevas bibliotecas -ldconfig
• /etc/ld.so.conf
• LD_LIBRARY_PATH - Para Peoplesoft y otras porquerías :)

Empaquetamiento y dependeincias

Nadie en su sano juicio quiere manejar las dependencias manualmente!!!

• Paquetes .deb
• Existe dpkg y apt

Instalando software empaquetado

Vamos de lo inútil a lo útil

• Ejecutemos apt-get install sl
• Nuestro amigo apt-cache (search, show, depends)
• Otro amigo apt-get (update, install, remove, remove --purge, source, moo)
• Revisando las fuentes de paquete /etc/apt/sources.list
• Usando dpkg (-l, -i, hay que combinarlo con grep)
• Skype

Actividad

Instale el siguiente software sobre su sistema:

• htop
• tree
• Instalar el script monitor (http://www.tecmint.com/linux-server-health-monitoring-script/)
• Script para bajar videos de youtube

Instalando Stack WEB

Partiremos con el SEGIC Style

Componentes a nivel de servidor

APACHE 2

• apt-get install apache2
• Entendiendo los archivos de configuración
• /var/www/html ¿ Por qué ?

Actividad

Generar un sitio estático que contenga el mensaje "Hola Mundo", y como título "Capacitación SEGIC"

Operaciones sobre Servicios

service nombre-servicio start | stop | restart | status | etc

# service apache2 stop

¿ cómo funciona una petición web ?

Formas de acceder a un sitio

• Alias: URL/nombre-alias
• Virtual Host: nombre-virtual-host.dominio

Definiendo un alias en APACHE

• Se utiliza el módulo mod_alias
• Se utiliza la directiva Alias nombre-falso path-real
• Revisando los comandos a2ensite y a2dissite
• Aprovechando de mencionar la diferencia entre .htaccess y archivos de configuración .conf

Alias "/saludo" "/var/www/saludo"

Definiendo un Virtual Host en APACHE

• Recuerden que pueden obtener el número IP asociado a un dominio utilizando el comando nslookup
• Se utiliza la directiva VirtualHost
• Tambien se utilizan los comandos a2ensite y a2dissite

<virtualhost *:80="">
	DocumentRoot "/var/www/saludo"
	ServerName alumno1.segic.cl
						  
	# Otras directivas
</virtualhost>

Instalando el módulo de php para apache

• Usando apt-cache search apache2 php5
• Instalando el paquete libapache2-mod-php5

Cómo se integra Apache y PHP

Actividad

• Generar una página en PHP (formulario.php), que muestre el mensaje "Hola Mundo!", ésta debe ser accesible desde el virtualhost
• Generar una página en PHP (info.php), que muestre la configuración del entorno usando phpinfo()

Conociendo un poco sobre la configuración de PHP

• Para buscar extensiones apt-cache search php5 gd
• Archivo principal de configuración php.ini
• Existen dos versiones apache2 y cli

Instalando MySQL

• apt-get install mysql-server-5.6
• Ahora a instalar la extensión de php para conectarse a mysql

Componentes a nivel de servidor

Instalando Stack WEB

Un paso más alla del SEGIC Style

Pero antes un poco de GIT

GIT es un sistema de control de versiones descentralizado. Se ha convertido en el estándar de facto en la industria

• Conociendo github, tienen que abrir una cuenta!!!
• ¿ Qué tiene que ver con los servidores ? (Podrían preguntarse en plataforma)
• Instalando git, apt-get install git (Última vez que colocamos la instrucción)

Por ahora seremos felices sólo con clonar

• Antes debemos configurar de forma básica git
• git config --global user.email "you@example.com"
• git config --global user.name "Your Name"
• El famoso git clone

Instalando phpMyAdmin (The right way)

Clonamos el sistema

# git clone --depth=1 --branch=STABLE git://github.com/phpmyadmin/phpmyadmin.git

Configuramos un Alias

Alias "/phpMyAdmin" "/var/www/phpmyadmin"

Antes de Seguir Revisaremos algo de MySql en command line

Para conectarnos al servidor usaremos

$ mysql -u root -p(clave)

Algunos comandos

• show databases - lista las bases de datos disponibles
• use - comienza a usar una base de datos en particular
• show tables - lista las tablas de una base de datos
• source - ejecuta un script con sentencias SQL

Continuando con la instalación de phpMyAdmin (The right way)

Crear la base de datos phpmyadmin

$ cd /path/to/phpmyadmin/sql
$ mysql -u root -p(clave)
> source create_tables.sql
> quit
$ cd /path/to/phpmyadmin
$ cp config.sample.inc.php config.inc.php

Terminando de Configurar

• Crear usuario especifico para la base de datos phpmyadmin (Ej: local/local)
• Configurar parámetros en el archivo config.inc.php

Actualización automática de phpMyAdmin

#!/bin/bash
cd /path/to/phpmyadmin/
git pull -q origin STABLE

Ahora solo hay que programar este script en cron - PLOP!

¿ Qué es cron ?

Es el nombre del servicio que permite ejecutar automáticamente scripts a una hora o fecha específica

• Los trabajos son agendados en el archivo /etc/crontab
• cron.daily al rescate
• Si alguna vez necesitan algo más específico usar crontab-generator

Evaluación N° 1

Instalación de Infraestructura

Realice las siguientes tareas sobre el servidor:

Y ahora una introducción a HTML y CSS

Un paso más alla del SEGIC Style

Examinando posibles reacciones de la audiencia

Veamos un ejemplo concreto de SEGIC

• Revisemos el sitio de Héctor Sánchez
• Evaluación de la audiencia

Irónicamente este sitio no contiene microdata, pero si algunos atributos de RDF

¿ Microdata ? - veamos que hay en Google Developers

¿ RDF ? - SEGIC está listo para la web semántica ?

... Reacción esperada!

¿ Qué es HTML ?

Es un lenguaje que permite estructurar información basado en el uso de etiquetas

<!DOCTYPE html>
<html lang="es">
	<head>
    	<meta charset="utf-8">
    	<title>Hola Mundo</title>
  	</head>
  	<body>
    	<h1>Hola Mundo</h1>
    	<p>Este es un sitio web.</p>
  	</body>
</html>				
					

Revisemos algunos elementos comunes en HTML

a <!-- define un enlace -->

<a>...</a>
<br>

Revisemos algunos elementos comunes en HTML

<a href="http://www.segic.cl/">SEGIC</a>

Estructura de un documento HTML

<!DOCTYPE html>
<html lang="es">
	<head>
  	</head>
  	<body>
  	</body>
</html>

Actividad

Comenzando con nuestro sitio web

<!DOCTYPE html>
<html lang="es">
	<head>
  	</head>
  	<body>
  	</body>
</html>

Alto!!!

Estamos trabajando sin control de versiones, totalmente inconcebible, vamos a generar un repositorio en GITHUB

$ cd /var/www/sitio-conferencia
$ git init			
$ git status
$ git add index.html
$ git commit -m "Inicio del proyecto del sitio para la conferencia"

Con esto conseguimos crear un repositorio local

Alto!!!

Ahora sincronizaremos nuestro repositorio local con GITHUB

Pero antes debemos configurar las llaves SSH en GITHUB

$ cd /var/www/sitio-conferencia
$ git remote add origin git@github.com:username/sitio-conferencia.git			
$ git push -u origin master

Con esto conseguimos crear un repositorio local

Ingresando la metadata

<head>
	<meta charset="utf-8">
	<title>Conferencia de Desarrollo WEB</title>
</head>

Ingresando Contenido

<body>
	<h1>Conferencia de Desarrollo WEB</h1>
  	<p>Como cada año los desarrolladores más brillantes de desarrollo web se reunen en SEGIC USACH. Unete a nosotros en Septiembre!</p>
</body>

¿ Qué es CSS ?

También conocido como hojas de estilo, es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML

Revisemos algunos elementos de CSS

p { ... }

Revisemos algunos elementos de CSS

p {
	color: ...;
	font-size: ...;
}

Revisemos algunos elementos de CSS

p {
	color: orange;
	font-size: 16px;
}

Trabajando con selectores

Los más comunes son tipos de elementos, clases y ids

Selector de tipo (type)

/* CSS */  					
div { ... }

<!-- HTML -->  					
<div>...</div>          
<div>...</div>

Trabajando con selectores

Selector de class

Nos permite seleccionar elementos basados en el valor del atributo class

/* CSS */  					
.yeah { ... }

<!-- HTML -->  					
<div class="yeah">...</div>
<p class="yeah">...</p>

Trabajando con selectores

Selector de id

Nos permite seleccionar elementos basados en el valor del atributo id

/* CSS */  					
#noticia { ... }

<!-- HTML -->  					
<div id="noticia">...</div>

Referenciando las hojas de estilo

Para aplicar las reglas CSS en nuestro documento HTML debemos referenciarlas, la práctica recomendada es incluirlas desde un archivo externo.

Para crear un archivo CSS debemos crear un archivo de texto plano con extensión .css

<head>
	<link rel="stylesheet" href="main.css">
</head>

Actividad

Aplicaremos un primer estilo a nuestro index.html de nuestro sitio de conferencia:

• Genere un directorio llamado "css", dentro del directorio "sitio-conferencia"
• Genere un archivo en blanco dentro del directorio "css" llamado "main.css"
• Incorpore el siguiente contenido en el archivo "main.css":

  h1 {
  	text-decoration: underline;
  }

Actividad (Segunda parte)

• Realice la siguiente modificación en el archivo index.html:

  <head>
  		<meta charset="utf-8">
  		<link rel="stylesheet" href="css/main.css">
  		<title>Conferencia de Desarrollo WEB</title>
  </head>

• Sincronice sus cambios con el repositorio en GITHUB

Recapitulando

• La diferencia entre HTML y CSS
• Definición de elementos, etiquetas, y atributos
• Estructura base de un documento HTML
• Definición de selectores, propiedades, y valores
• Trabajando con selectores CSS
• Introducción a la administración de nuestro código con GIT (Saliendo de las cavernas)

¿ Qué cierre es correcto ? > o />

fe de errata sobre el cierre de los elementos vacíos

Finalmente la forma correcta es...

<!-- Sin slash -->
<meta charset="utf-8">

introducción a HTML y CSS

Un paso más alla del SEGIC Style (Parte II)

Profundizando Nuestros Conocimientos de HTML

• Para construir buenos sitios y sistemas web, necesitamos conocer cuales son los mejores elementos HTML para desplegar diferentes tipos de contenido.
• Es importante también entender como los elementos son visualmente desplegados, y que significado semántico tienen.

¿ Semántico ? plop!

Hablemos un poco de la semántica

Dentro del HTML es la práctica de dar al contenido estructura y significado a través del uso apropiado de los elementos

Hablemos de Elementos sin semántica (DIV, SPAN)

• Actúan como contenedores solamente para el propósito de dar estilo
• <div> es un elemento de bloque usado para identificar grandes grupos de contenido
• <span> es un elemento de línea comunmente usado para pequeños grupos de texto dentro de elementos de bloque

Hablemos de Elementos sin semántica (DIV, SPAN)

Ejemplo!

<!-- Division -->
<div class="social">
	<p>Me pueden encontrar en...</p>
	<p>Adicionalmente tengo perfil en...</p>
</div>

<!-- Span -->
<p>Pronto estaremos <span class="tooltip">escribiendo HTML</span> usando las buenas partes de la especificación.</p>

Elementos de línea y bloque

Elementos de línea y bloque

Alguien podría pensar "No entiendo nada", así que acá va una imagen para clarificar el asunto

Usando Elementos Basados en Texto

Nos focalizaremos en los más populares

<h1>Cabecera Nivel 1</h1>
<h2>Cabecera Nivel 2</h2>
<h3>Cabecera Nivel 3</h3>
<h4>Cabecera Nivel 4</h4>
<h5>Cabecera Nivel 5</h5>
<h6>Cabecera Nivel 6</h6>

Usando Elementos Basados en Texto

<p>The Khronos Group, the organization behind OpenGL, OpenCL, Vulkan, and others, today announced a standard data format specification that's aptly called the "Khronos Data Format Specification 1.0."</p>

Usando Elementos Basados en Texto

<!-- Importancia -->
<p><strong>Cuidado:</strong> Caída de Rocas.</p>

<!-- Estilo Diferente de Texto -->
<p>Los PC también llamados <b>computadoras</b> u <b>ordenadores</b>.</p>

introducción a HTML y CSS

Un paso más alla del SEGIC Style (Parte III)

Estructura del Sitio

Revisemos un layout típico en XHTML

Estructura del Sitio

Y en HTML 5

Reseña de elementos de estructura

<header>...</header>

<nav>...</nav>

Reseña de elementos de estructura

<article>...</article>

<section>...</section>

Reseña de elementos de estructura

<aside>...</aside>

<footer>...</footer>

Actividad!!

Comenzaremos a dar estructura a nuestro sitio de conferencia:

<header>
	<h1>Conferencia de Desarrollo WEB</h1>
 	<h3>Del 24 al 26 de septiembre - Santiago de Chile</h3>
</header>

<section>
	<h2>Dedicada a la construcción de sistemas y sitios web</h2>
	<p>Como cada año los desarrolladores más brillantes de Santiago de Chile, discutirán sobre lás últimas tendencias tecnológicas. Acompáñanos este septiembre!</p>
</section>

Actividad!!

<section>
	<section>
		<h5>Relatores</h5>
		<h3>Relatores de Clase Mundial</h3>
		<p>Nos acompañarán desde todos los lugares del mundo, más de 50 relatores especialistas, los cuales compartirán sus historias con nosotros.</p>
	</section>

	<section>
	</section>

	<section>
	</section>	  	
</section>

<footer>
	<p>SEGIC - USACH</p>
</footer>

Actividad!!

Creando Enlaces

Los enlaces se crean con el elemento de línea a. El atributo href determina a que recurso se apunta

<a href="http://www.segic.cl">SEGIC</a>

Rutas Relativas y Absolutas

<a href="static/about.html">Relativa</a>

<a href="http://www.google.cl/static/about.html">Absoluta</a>

Enlazando Direcciones de correo

Ocasionalmente, podemos querer crear un enlace a una cuenta de correo, para esto modificaremos el valor del atributo href, asignando el valor mailto:, seguido de la dirección de correo

mailto:juan.perez@segic.usach.com

Adicionalmente se puede agregar un asunto, y un contenido por defecto al enlace. Para esto agregamos los parámetrossubject y body. Si necesitamos agregar espacions en blanco, hay que usar "%20". Los parámetros se separan usando  

<a href="mailto:juan.perez@usach.com?subject=Requerimiento&body=Hola%20como%estas">Contáctame</a>

Enlazando la misma página

Para establecer un enlace a una sección interna de la misma página, primero debemos establecer un id para el elemento a apuntar, y desde el atributo href, los referenciaremos usando #

<body id="top">
  ...
  <a href="#top">Volver al comienzo</a>
  ...
</body>

Ejemplo

Ahora veremos un simple ejemplo

Actividad!!

Hasta el momento nuestro sitio de conferencia es solo una página, ahora cambiaremos eso:

<h1>
	<a href="index.html">Conferencia de Desarrollo WEB</a>
</h1>

Actividad!!

<header>

	...

  	<nav>
    	<a href="index.html">Inicio</a>
    	<a href="relatores.html">Relatores</a>
    	<a href="programacion.html">Programación</a>
    	<a href="ubicacion.html">Ubicación</a>
    	<a href="registro.html">Registro</a>
  	</nav>

</header>

Actividad!!

<footer>

	...

  	<nav>
    	<a href="index.html">Inicio</a>
    	<a href="relatores.html">Relatores</a>
    	<a href="programacion.html">Programación</a>
    	<a href="ubicacion.html">Ubicación</a>
    	<a href="registro.html">Registro</a>
  	</nav>

</footer>

Actividad!!

<section>
	<h2>Dedicada a la construcción de sistemas y sitios web</h2>
	<p>...</p>
	<a href="registro.html">Registrate Ahora</a>
</section>

Actividad!!

<section>
	<a href="relatores.html">
		<h5>Relatores</h5>
		<h3>Relatores de Clase Mundial</h3>
	</a>	
	<p>Nos acompañarán desde todos los lugares del mundo, más de 50 relatores especialistas, los cuales compartirán sus historias con nosotros.</p>
</section>

<section>
	<a href="programacion.html">
		<h5>Programación</h5>
		<h3>Tres días de ensueño</h3>
	</a>	
	<p>Tres días de charlas inspiradoras, talleres y diversión.</p>		    
</section>

<section>
	<a href="ubicacion.html">
		<h5>Ubicación</h5>
		<h3>Edificio SEGIC USACH</h3>
	</a>	
	<p>Dentro del corazón de la Universidad de Santiago.</p>	      	
</section>

Recapitulando

• Qué es la semántica en HTML
• Diferencia entre elementos de línea y bloque
• Elementos de texto básicos
• Elementos de estructura de HTML 5
• Revisamos los tipos de enlaces