Alejandro Mejia WEB: 2016

miércoles, 19 de octubre de 2016

INSERT (Alta de registros en una tabla)

Luego de crear una base de datos y sus tablas (Vamos a trabajar con la base de datos ya creada: base1, que contiene la tabla alumnos), veremos como agregar registros.

Para añadir datos en la tabla empleamos el comando SQL llamado insert.

Necesitamos dos páginas para este proceso, una será el formulario de carga de datos y la siguiente será la que efectúe la inserción en la tabla.

Formulario de carga de datos:

<html>
<head>
<title>Problema</title>
</head>
<body>
<h1>Alta de Alumnos</h1>
<form action="pagina2.php" method="post">
Ingrese nombre:
<input type="text" name="nombre"><br>
Ingrese mail:
<input type="text" name="mail"><br>
Seleccione el curso:
<select name="codigocurso">
<option value="1">PHP</option>
<option value="2">ASP</option>
<option value="3">JSP</option>
</select>
<br>
<input type="submit" value="Registrar">
</form>
</body>
</html>

El formulario es bastante similar a los que venimos desarrollando en puntos anteriores, tal vez lo distinto es cómo emplearemos el control "select" del curso a desarrollar:

<select name="codigocurso">
<option value="1">PHP</option>
<option value="2">ASP</option>
<option value="3">JSP</option>
</select>

Cada opción tiene su respectivo valor (en este caso los números 1,2 y 3) y los textos a mostrar PHP, ASP y JSP. El dato que se envía a la otra página es el código de curso (esto debido a que definimos la propiedad value).

Ahora veremos como realizar la registración de los datos cargados en el formulario, en la tabla alumnos de la base de datos base1:

<html>
<html>
<head>
<title>Problema</title>
</head>
<body>
<?php
$conexion=mysqli_connect("localhost","root","","base1") or
    die("Problemas con la conexión");

mysqli_query($conexion,"insert into alumnos(nombre,mail,codigocurso) values 
                       ('$_REQUEST[nombre]','$_REQUEST[mail]',$_REQUEST[codigocurso])")
  or die("Problemas en el select".mysqli_error($conexion));

mysqli_close($conexion);

echo "El alumno fue dado de alta.";
?>
</body>
</html>

Veamos los pasos para efectuar el alta en la tabla alumnos:

$conexion=mysqli_connect("localhost","root","","base1") or
    die("Problemas con la conexión");

La función mysqli_connect se conecta a una base de datos de tipo MySql, el primer parámetro es la dirección donde se encuentra el gestor de base de datos (en este caso en el mismo servidor por lo que indicamos esto con "localhost), el segundo parámetro es el nombre de usuario de la base de datos ("root" en nuestro caso, que es el usuario por defecto que crea MySql para el administrador), seguidamente indicamos la clave del usuario root (por defecto al instalar el Wamp se crea con clave vacía) y por último indicamos el nombre de la base de datos a conectarnos (en nuestro ejemplo ya creamos la base de datos llamada: base1 que tiene la tabla alumnos)

En caso de haber algún error en la llamada a la función la misma retorna false por lo que se ejecuta la instrucción seguida del operador or, en nuestro caso llamamos a la función die que detiene la ejecución del programa y muestra el mensaje por pantalla.

El paso más importante es la codificación del comando SQL insert(debemos llamar a la función mysqli_query pasando como primer parámetro la referencia a la conexion y el segundo parámetro es un string con el comando insert):

mysqli_query($conexion,"insert into alumnos(nombre,mail,codigocurso) values 
                       ('$_REQUEST[nombre]','$_REQUEST[mail]',$_REQUEST[codigocurso])")
  or die("Problemas en el select".mysqli_error($conexion));

La sintaxis del comando insert es bastante sencilla, indicamos el nombre de la tabla y los campos de la tabla a cargar. Luego debemos indicar en el mismo orden los valores a cargar en cada campo (dichos valores los rescatamos del formulario anterior).

Los campos de tipo varchar SQL requiere que encerremos entre comillas simples, esto sucede para el nombre y el mail; en cambio, para el codigocurso esto no debe ser así.

Otra cosa a tener en cuenta es que los subíndices de los vectores asociativos no deben ir entre simples comillas ya que se encuentran dentro de un string, sino se producirá un error.

En caso que MySql detecte un error, retorna false esta función, por lo que se ejecuta la instrucción posterior al or, es decir la función die que mostrará el error generado por MySql llamando a la función mysqli_error().

Por último cerramos la conexión con la base de datos y mostramos un mensaje indicando que la carga se efectuó en forma correcta.

Tener en cuenta que el campo código se generó en forma automática.

Si queremos controlar que el insert se efectuó en forma correcta podemos ingresar al PHPMyAdmin y seleccionar la tabla "alumnos", y en la pestaña "examinar" podremos ver los datos ingresados desde la página que creamos:

Síguenos en:
Facebook
www.facebook.com/gruposedam

Nuestro blog Tecnologico

gruposedam.blogspot.com

martes, 18 de octubre de 2016

Base de datos (MySQL)

Uno de los empleos principales de PHP es el acceso a una base de datos en el servidor. Las operaciones básicas se hacen empleando como lenguaje el SQL.

PHP implementa distintas funciones según la base de datos a emplear. Existen funciones actualmente para acceder a las siguientes servidores de bases de datos:

- MySQL
- Microsoft SQL Server
- Oracle
- PostgreSQL
- SysBase
- FrontBase
- Informix
- InterBase
- Ingres
- mSQL
- dBase
- SQLlite

El más empleado en la actualidad en la web es el gestor de base de datos MySQL.

Cuando instaló el WampServer en un principio para trabajar con PHP, se instaló el MySQL (recordemos que las letras que forman el WampServer son : W(Windows)A(Apache)M(MySQL)P(PHP)Server).

Para crear una base de datos el WampServer instala también un programa codificado en PHP que nos permite interactuar con el MySQL.
Este programa se llama PHPMyAdmin (como veremos nos permite crear las bases de datos, tablas, índices, usuarios etc.)

Para iniciar el PHPMyAdmin debemos presionar el botón izquierdo del mouse sobre el ícono del WampServer que se encuentra en la bandeja del sistema:

Como podemos ver la interfaz del PHPMyAdmin es un programa que se ejecuta en la web:

Para crear una base de datos procedemos a seleccionar la pestaña "Base de datos" e ingresamos como nombre "base1" y presionamos el botón crear:
PHPMyAdmin creación de una base de datos

Luego de crear la base de datos podemos ver que aparece en el lado izquierdo:
PHPMyAdmin creación de una base de datos

Seleccionamos el nombre nombre de la base de datos "base1" y se actualiza la interfaz de pantalla para que ingresemos el nombre de una tabla y la cantidad de campos que tendrá (crearemos una tabla llamada alumnos con 4 campos):
PHPMyAdmin creación de una tabla

La estructura de la tabla es:

  codigo int auto_increment primary key
  nombre varchar(50)
  mail varchar(70)
  codigocurso int

En el PHPMyAdmin ingresamos:

Es importante también hacer notar que en el campo codigo debemos marcar en Indice el valor "primary" y tildar la columna A_I:

Por último presionamos el botón guardar y ya tenemos la tabla "alumnos" creada en la base de datos "base1":

La tabla almacenará datos de alumnos que desarrollarán cursos de programación en PHP, ASP y JSP.

El código del alumno es de tipo numérico (int) y al indicar que es auto_increment se generará automáticamente por el gestor de base de datos.
Los campos nombre y mail son de tipo varchar (podemos almacenar cualquier caracter) y por último el campo codigocurso representa el curso a tomar por el alumno (1=PHP, 2=ASP y 3=JSP)
El campo clave de esta tabla es el código de alumno (es decir no podemos tener dos alumnos con el mismo código, no así el nombre del alumno que puede eventualmente repetirse)

En los próximos conceptos comenzaremos a ver como desde PHP podemos comunicarnos con la base de datos "base1" y acceder a la tabla "alumnos" para ejecutar los comandos SQL más comunes como pueden ser: select, insert, delete, update etc.

Síguenos en:
Facebook
www.facebook.com/gruposedam

Nuestro blog Tecnologico

gruposedam.blogspot.com

lunes, 17 de octubre de 2016

Funciones en PHP

La sintaxis para la definición de una función en PHP es:

function [nombre de la función]([parámetros])
{
  [algoritmo]
}

Implementaremos una función que muestre un titulo centrado en patalla, y la llamaremos posteriormente dos veces:

<html>
<head>
<title>Problema</title>
</head>
<body>

<?php
function mostrartitulo($men)
{
  echo "<h1 style=\"text-align:center\">";
  echo $men;
  echo "</h1>";
}

mostrartitulo("Primer titulo");
echo "<br>";
mostrartitulo("Segundo segundo");

?>

</body>
</html>

Para mostrar el titulo centrado utilizamos el elemento h1 de HTML y definimos un estilo centrado para el mismo.

Si vemos la función, notamos que lo más trabajoso es definir todos los elementos HTML para crear el titulo. Es importante notar que en PHP para introducir las dobles comillas dentro de un string debemos anteceder el carácter ' \'; para introducir el carácter ' \' debemos escribir \\.

Las llamadas a la función las hacemos por medio de su nombre y pasamos el único parámetro que requiere:

mostrartitulo("Primer titulo");
echo "<br>";
mostrartitulo("Segundo segundo");

Las funciones nos permiten tener un programa más ordenado y facilitan la reutilización del código.

Más adelante veremos como hacer archivos con rutinas comunes a muchas páginas.

Una función puede retornar un dato, supongamos que necesitamos una función que nos retorne el promedio de dos valores, el código sería:

<html>
<head>
<title>Problema</title>
</head>
<body>

<?php
function retornarpromedio($valor1,$valor2)
{
  $pro=$valor1/$valor2;
  return $pro;
}

$v1=100;
$v2=50;
$p=retornarpromedio($v1,$v2);
echo $p;
?>

</body>
</html>

Cuando una función retorna un dato debemos emplear la palabra clave return seguida del valor que devuelve.

En la llamada a la función el valor retornado se almacena generalmente en una variable:

$p=retornarpromedio($v1,$v2);

Si queremos que retorne más de un dato debemos emplear parámetros por referencia.

Supongamos que necesitamos ahora que una función nos retorne el cuadrado y cubo de un número:

<html>
<head>
<title>Problema</title>
</head>
<body>
<?php
function cuadradocubo($valor,&$cuad,&$cub)
{
  $cuad=$valor*$valor;
  $cub=$valor*$valor*$valor;
}
cuadradocubo(2,$c1,$c2);
echo "El cuadrado de 2 es:".$c1."<br>";
echo "El cubo de 2 es:".$c2;
?>
</body>
</html>

Es decir, cuando le antecedemos el carácter ampersand al parámetro, es por referencia.

El objetivo es asignarle cierto valor al parámetro y posteriormente el dato quedará almacenado en la variable que le pasamos a la función.

function cuadradocubo($valor,&$cuad,&$cub)
{
  $cuad=$valor*$valor;
  $cub=$valor*$valor*$valor;
}

El parámetro $cuad se almacena en la variable $c1 y el parámetro $cub se almacena en $c2. Es la forma más adecuada de modificar variables dentro de una función.

Síguenos en:
Facebook
www.facebook.com/gruposedam

Nuestro blog Tecnologico

gruposedam.blogspot.com

domingo, 16 de octubre de 2016

Vectores (asociativos)

Este tipo de vectores no es común a otros lenguajes, pero en PHP son de uso indispensable en distintas situaciones (ya lo empleamos cuando recuperamos información de un formulario accediendo al vector $_REQUEST que crea PHP en forma automática, cuando accedamos a datos de una base de datos también lo emplearemos etc.)

Un vector asociativo permite acceder a un elemento del vector por medio de un subíndice de tipo string.

Inicialmente uno piensa que esto nos complica las cosas, como veremos más adelante la realidad nos demuestra lo contrario.

Como ejemplo, consideremos que deseamos guardar en un vector el DNI, nombre y dirección de una persona. Empleando un vector con subíndice entero la solución sería:

<?php
$registro[]="20456322";
$registro[]="Martinez Pablo";
$registro[]="Colon 134";
?>

De esta forma debemos recordar que cuando deseamos mostrar el nombre de la persona debemos acceder al subíndice 1. Esto es sencillo si tenemos un vector con tres elementos, pero que sucede si debemos almacenar 20 datos relacionados en un vector.

Un vector asociativo se define de la siguiente forma:

<?php
$registro['dni']="20456322";
$registro['nombre']="Martinez Pablo";
$registro['direccion']="Colon 134";
echo $registro['nombre'];
?>

Ahora vemos que para imprimir el nombre de la persona no debemos recordar una posición dentro de un vector sino un nombre de clave. Esto se hace indispensable cuando administramos un conjunto de datos grandes.

En un vector asociativo toda componente está asociada a una clave.

Otras formas de crear un vector asociativo:

<?php
$registro=array('dni'=>'20456322',
                'nombre'=>'Martinez Pablo',
                'direccion'=>'Colon 134');
echo $registro['dni'];
?>

Síguenos en:
Facebook
www.facebook.com/gruposedam

Nuestro blog Tecnologico

gruposedam.blogspot.com

sábado, 15 de octubre de 2016

Lectura de un archivo de texto.

Para la lectura de un archivo de texto contamos con la función fgets. Además debemos abrir el archivo para lectura.

La apertura para leer:

  $ar=fopen("datos.txt","r") or
    die("No se pudo abrir el archivo");

Para leer:

    $linea=fgets($ar);

Veamos como mostrar por pantalla el contenido del archivo "datos.txt" creado en el punto anterior:

<html>
<head>
<title>Problema</title>
</head>
<body>
<?php
  $ar=fopen("datos.txt","r") or
    die("No se pudo abrir el archivo");
  while (!feof($ar))
  {
    $linea=fgets($ar);
    $lineasalto=nl2br($linea);
    echo $lineasalto;
  }
  fclose($ar);
  ?>
</body>
</html>

Lo primero que debemos identificar es la forma de apertura del archivo:

  $ar=fopen("datos.txt","r") or
  die("No se pudo abrir el archivo");

El segundo parámetro de fopen es "r" es decir read (apertura para lectura), si el archivo no existe por ejemplo se ejecuta la función die que finaliza el programa mostrando el string correspondiente.

La función feof retorna true si se ha llegado al final del archivo en caso contrario retorna false. Para que se impriman todas las líneas del archivo se plantea una estructura repetitiva que se ejecuta mientras no se llegue al final de archivo (el operador lógico not en PHP es el caracter !):

  while (!feof($ar))

Dentro de la estructura repetitiva leemos una línea completa del archivo de texto con la función fgets:

  $linea=fgets($ar);

La variable $linea contiene una línea completa del archivo de texto, inclusive el salto de línea (\n)

Como el navegador no hace un salto de línea con este caracter, debemos convertir dicho caracter al elemento <br> propia de HTML. La función que realiza esta actividad se llama nl2br (new line to br)

El resultado se almacena en una nueva variable que es la que realmente imprimimos:

  $lineasalto=nl2br($linea);
  echo $lineasalto;

Síguenos en:
Facebook
www.facebook.com/gruposedam

Nuestro blog Tecnologico

gruposedam.blogspot.com

viernes, 14 de octubre de 2016

Creación de un archivo de texto.

Una actividad fundamental es poder registrar información en el servidor (no como hemos estado haciendo hasta el momento generando sólo una página con los datos cargados)

Para la registración de datos en el servidor disponemos de dos herramientas que se complementan en muchos casos (archivos de texto y bases de datos)

En este apartado veremos como crear un archivo de texto y añadir datos al mismo.

Lo presentaremos al tema resolviendo un problema: Implementación de un libro de visitas.

Para resolver este problema plantearemos dos páginas, un formulario para realizar la carga del nombre del visitante y sus comentarios (disponemos un objeto de tipo "text" y otro de tipo "textarea"):

<html>
<head>
<title>Problema</title>
</head>
<body> <form action="pagina2.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre">
<br>
Comentarios:
<br>
<textarea name="comentarios" rows="10" cols="40">
</textarea>
<br>
<input type="submit" value="Registrar">
</form>
</body>
</html>

Este formulario es similar a los planteados en problemas anteriores, sólo le hemos agregado al control textarea, las propiedades rows y cols que dimensionan el mismo en la pantalla:

<textarea name="comentarios" rows="10" cols="40">
</textarea>

Veamos ahora la página (pagina2.php) que graba los datos cargados en el formulario en un archivo:

<html>
<head>
<title>Problema</title>
</head>
<body>
<?php
  $ar=fopen("datos.txt","a") or
    die("Problemas en la creacion");
  fputs($ar,$_REQUEST['nombre']);
  fputs($ar,"\n");
  fputs($ar,$_REQUEST['comentarios']);
  fputs($ar,"\n");
  fputs($ar,"--------------------------------------------------------");
  fputs($ar,"\n");
  fclose($ar);
  echo "Los datos se cargaron correctamente.";
  ?>
</body>
</html>

En primer lugar creamos o abrimos el archivo de texto "datos.txt". El segundo parámetro de la función fopen indica la forma de apertura de archivo "a" (lo crea o si ya existe el archivo lo abre para añadir datos al final), "w" (crea el archivo de texto, si existe borra su contenido) y la última forma de apertura del archivo es "r" (abre el archivo para su lectura)

Como en este problema nos interesa que el archivo vaya creciendo con los datos que aportan los visitantes al sitio lo abrimos para añadir, parámetro "a".

La función fopen retorna una referencia al archivo y la almacenamos en una variable llamada $ar.

Si el archivo no se puede abrir, se ejecuta la instrucción que se encuentra luego del operador "or" en nuestro caso llamamos a la función die que finaliza la ejecución del programa PHP mostrando como mensaje el texto que le pasamos a dicha función (por ejemplo si el disco duro del servidor está lleno no se podrá crear el archivo de texto)

  $ar=fopen("datos.txt","a") or
    die("Problemas en la creacion");

Para la grabación de datos utilizamos la función fputs que tiene dos parámetros: la referencia al archivo donde grabamos y el string a grabar.

  fputs($ar,$_REQUEST['nombre']);
  fputs($ar,"\n");

Para el salto de línea en el archivo de texto, usamos los caracteres \n.De esta forma cuando leamos el archivo de texto lo haremos línea a línea.

Cuando dejamos de trabajar con el archivo llamamos a la función fclose.

Hay que tener muy presente que el archivo se almacena en el servidor y no en la máguina de la persona que está navegando. Es decir, no vaya al explorador de archivos para ver donde se almacenó "datos.txt", tenga en cuenta que está en la máquina donde se ejecutó el script de PHP. Luego veremos como leer el contenido del archivo y mostrarlo en otra página del sitio (En nuestro caso como utilizamos el equipo como cliente/servidor el archivo datos.txt se crea en la misma carpeta donde se alojan nuestras páginas php).

Síguenos en:
Facebook
www.facebook.com/gruposedam

Nuestro blog Tecnologico

gruposedam.blogspot.com

jueves, 13 de octubre de 2016

Vectores (tradicionales)

Un Array es una colección de valores. Los array pueden ser unidimensionales (vectores), bidimensionales (matrices) y multidimensionales (más de dos dimensiones)

Los arrays se utilizan ampliamente en el lenguaje PHP.

Se utiliza el delimitador [] para acceder a los diferentes elementos del vector.

Se lo puede crear al vuelo, sin tener que declararlo:

$dias[0]=31;
$dias[1]=28;

Luego de estas dos líneas, tenemos creado un vector de dos elementos, a los cuales accedemos por un subíndice.

echo $dias[0]; //31
echo $dias[1]; //28

El vector, como podemos ver, puede ir creciendo en forma dinámica, es decir que si ahora hacemos:

$dias[2]=31;

el vector ahora pasa a tener 3 componentes.

También podemos obviar el subíndice cuando asignamos los valores:

$dias[]=31;
$dias[]=28;
$dias[]=31;

Automáticamente comienza a numerarse desde cero.

Si necesitamos conocer el tamaño del vector en cualquier momento podemos llamar a la función count.

echo count($dias); //3

Si queremos imprimir todos los elementos en la página podemos hacer:

<?php 
$nombres[]="juan"; 
$nombres[]="pedro"; 
$nombres[]="ana"; 
for($f=0;$f<count($nombres);$f++) 
{ 
  echo $nombres[$f]; 
  echo "<br>"; 
} 
?>

La función sizeof(<nombre del vector>) es equivalente a count

Otra forma de inicializar un vector es definirlo e inicializarlo simultáneamente:

$edades=array("menores","jovenes","adultos");

Estamos definiendo el vector edades con tres componentes, numeradas automáticamente de cero a dos.

Síguenos en:

Facebook
www.facebook.com/gruposedam

Nuestro blog Tecnologico

gruposedam.blogspot.com

miércoles, 12 de octubre de 2016

FORMULARIO (control textarea)

El control HTML "textarea" se diferencia del "text" en que permite el ingreso de muchas líneas.

Problema

Implementar un formulario web para ingresar el nombre de una persona en un control text y mediante un control de tipo textarea se permita el ingreso del curriculum de dicha persona.

  <html> 
  <head> 
  <title>Problema</title> 
  </head> 
  <body> 
  <form action="pagina2.php" method="post"> 
  Ingrese nombre:<input type="text" name="nombre"><br> 
  Ingrese su curriculum:<br> 
  <textarea name="curriculum"></textarea> 
  <br> 
  <input type="submit" value="Confirmar"> 
  </form>
  </body> 
  </html>

La sintaxis de este control es bastante diferente a la del control text:

  <textarea name="curriculum"></textarea>

Si queremos que aparezca inicializado con texto debemos disponerlo en:

  <textarea name="curriculum">Hola Mundo</textarea>

La página PHP que procesa los dos datos ingresados en el formulario es:

<html> 
<head> 
<title>Problema</title> 
</head> 
<body> 
<?php 
  echo "El nombre ingresado:".$_REQUEST['nombre']; 
  echo "<br>"; 
  echo "El curriculum:".$_REQUEST['curriculum']; 
  ?>
</body> 
</html>

El dato ingresado en el textarea se rescata en forma idéntica que los controles text, es decir mediante el vector asociativo $_REQUEST:

  echo "El curriculum:".$_REQUEST['curriculum'];

Síguenos en:
Facebook
www.facebook.com/gruposedam

Nuestro blog Tecnologico

gruposedam.blogspot.com

martes, 11 de octubre de 2016

FORMULARIO (control select)

Veamos ahora como podemos rescatar desde PHP el elemento seleccionado de un control HTML de tipo select.

Implementar un formulario que solicite la carga de dos enteros, uno en cada "text".
Disponer un control de tipo select que nos permita seleccionar si queremos sumar o restar los dos valores ingresados:

  <html> 
  <head> 
  <title>Problema</title> 
  </head> 
  <body> 
  <form action="pagina2.php" method="post"> 
  Ingrese primer valor: 
  <input type="text" name="valor1"> 
  <br> 
  Ingrese segundo valor: 
  <input type="text" name="valor2"> 
  <br> 
  <select name="operacion"> 
  <option value="suma">sumar</option> 
  <option value="resta">restar</option> 
  </select> 
  <br> 
  <input type="submit" name="operar"> 
  </form>
  </body> 
  </html>

Lo nuevo que aparece en este formulario es el control de tipo select.

  <select name="operacion"> 
  <option value="suma">sumar</option> 
  <option value="resta">restar</option> 
  </select>

Cada opción tiene un valor (value). El seleccionado es el que se enviará a la página que procesa el formulario. El texto que aparece dentro del control es el que disponemos entre las marcas option.

Ahora la página que captura los datos ingresados en el formulario es:

<html> 
<head> 
<title>Problema</title> 
</head> 
<body> 
 <?php 
  if ($_REQUEST['operacion']=="suma") 
  { 
    $suma=$_REQUEST['valor1'] + $_REQUEST['valor2']; 
    echo "La suma es:".$suma; 
  } 
  else 
  { 
    if ($_REQUEST['operacion']=="resta") 
    { 
      $resta=$_REQUEST['valor1'] - $_REQUEST['valor2']; 
      echo "La resta es:".$resta; 
    } 
  } 
 ?> 
</body> 
</html>

El vector asociativo $_REQUEST almacena en la componente del control select el valor de la opción seleccionada.

Con una serie de if verificamos el valor seleccionado:

  if ($_REQUEST['operacion']=="suma") 
  { 
    $suma=$_REQUEST['valor1'] + $_REQUEST['valor2']; 
    echo "La suma es:".$suma; 
  } 
  else 
  { 
    if ($_REQUEST['operacion']=="resta") 
    { 
      $resta=$_REQUEST['valor1'] - $_REQUEST['valor2']; 
      echo "La resta es:".$resta; 
    } 
  } 
 ?>

Sólo se puede seleccionar un elemento de un control select (más adelante veremos como seleccionar varios elementos en forma simultáneo)

Síguenos en:
Facebook
www.facebook.com/gruposedam

Nuestro blog Tecnologico

gruposedam.blogspot.com

lunes, 10 de octubre de 2016

FORMULARIO (control checkbox)

El control checkbox tiene dos estados: seleccionado o no seleccionado.

Para analizar este control utilizaremos prácticamente el mismo ejemplo que con el objeto radio:

Implementar un formulario que solicite la carga de dos enteros, uno en cada text.
Disponer dos controles de tipo checkbox que nos permitan seleccionar si queremos sumar y/o restar los valores ingresados.

El formulario html tiene el siguiente código:

  <head>
  <title>Problema</title>
  </head>
  <body>
  <form action="pagina2.php" method="post">
  Ingrese primer valor:
  <input type="text" name="valor1">
  <br>
  Ingrese segundo valor:
  <input type="text" name="valor2">
  <br>
  <input type="checkbox" name="check1">sumar
  <br>
  <input type="checkbox" name="check2">restar
  <br>
  <input type="submit" name="operar">
  </form>
  </body>
  </html>

Lo nuevo en este problema son los dos controles de tipo checkbox:

  <input type="checkbox" name="check1">sumar
  <br>
  <input type="checkbox" name="check2">restar
  <br>

Es importante notar que cada checkbox tiene un nombre distinto.

Ahora veamos el código de la página que procesa el formulario:

<html>
<head>
<title>Problema</title>
</head>
<body> 
<?php
  if (isset($_REQUEST['check1']))
  {
    $suma=$_REQUEST['valor1'] + $_REQUEST['valor2'];
    echo "La suma es:".$suma."<br>";
  }
  if (isset($_REQUEST['check2']))
  {
    $resta=$_REQUEST['valor1'] - $_REQUEST['valor2'];
    echo "La resta es:".$resta;
  }
  ?>
</body>
</html>

Si el checkbox no está seleccionado en el formulario no se crea una entrada en el vector asociativo $_REQUEST, para saber si existe una determinada componente en un vector se emplea la función isset, si retorna true significa que existe y por lo tanto el checkbox está seleccionado.

Disponemos dos if a la misma altura ya que los dos controles de tipo checkbox podrían estar seleccionados.

Síguenos en:

Facebook
www.facebook.com/gruposedam

Nuestro blog Tecnologico

gruposedam.blogspot.com

domingo, 9 de octubre de 2016

FORMULARIO (control radio)

El control HTML radio generalmente se utiliza en conjunto con otros controles radio. Cuando agrupamos un conjunto de controles radio solo uno de ellos puede estar seleccionado y si seleccionamos otro se desmarca el actual.

Para analizar este control dispondremos un ejemplo:

Implementar un formulario que solicite la carga de dos enteros, uno en cada text.
Disponer dos controles de tipo radio que nos permitan seleccionar si queremos sumar o restar los dos valores ingresados:

  <html>
  <head>
  <title>Problema</title>
  </head>
  <body>
  <form action="pagina2.php" method="post">
  Ingrese primer valor:
  <input type="text" name="valor1">
  <br>
  Ingrese segundo valor:
  <input type="text" name="valor2">
  <br>
  <input type="radio" name="radio1" value="suma">sumar
  <br>
  <input type="radio" name="radio1" value="resta">restar
  <br>
  <input type="submit" name="operar">
  </form>
  </body>
  </html>

Es importante notar que se trata nuevamente de un archivo HTML puro, que no tiene código PHP.
La entrada de los dos números se efectúa en dos controles

<input type="text" name="valor1">
<input type="text" name="valor2">

Es importante notar que cada text tiene un name DIFERENTE.

Para seleccionar el tipo de operación a efectuar disponemos dos controles de tipo radio:

<input type="radio" name="radio1" value="suma">sumar<br>
<input type="radio" name="radio1" value="resta">restar

Ahora vemos que los dos controles de tipo radio tienen el MISMO nombre. Esto es necesario para que el navegador sepa que los dos controles están relacionados (recordar que cuando uno selecciona un radio se debe deseleccionar el otro)

Desde la otra página accederemos al value del control seleccionado.

Por último disponemos un control de tipo submit para el envío de los datos del formulario.

El código de la página que procesa el formulario, llamada:"pagina2.php" (la que indicamos en el elemento FORM del formulario) es:

  <html>
  <head>
  <title>Problema</title>
  </head>
  <body>
  <?php
  if ($_REQUEST['radio1']=="suma")
  {
    $suma=$_REQUEST['valor1'] + $_REQUEST['valor2'];
    echo "La suma es:".$suma;
  }
  else
  {
    if ($_REQUEST['radio1']=="resta")
    {
      $resta=$_REQUEST['valor1'] - $_REQUEST['valor2'];
      echo "La resta es:".$resta;
    }
  }
  ?>
  </body>
  </html>

El vector asociativo $_REQUEST tiene tres componentes:

  $_REQUEST['radio1']
  $_REQUEST['valor1']
  $_REQUEST['valor2']

En la componente $_REQUEST['radio1'] almacena la cadena "suma" o "resta" según cual se seleccionó en el formulario.

Con dos if verificamos cual operación está seleccionada y procedemos a efectuarla:

if ($_REQUEST['radio1']=="suma")
  {
    $suma=$_REQUEST['valor1'] + $_REQUEST['valor2'];
    echo "La suma es:".$suma;

Síguenos en:

Facebook
www.facebook.com/gruposedam

Nuestro blog Tecnologico

gruposedam.blogspot.com

sábado, 8 de octubre de 2016

Envío de datos de un FORMULARIO (controles text y submit)

Una actividad fundamental en PHP es la recolección de datos de un formulario HTML.

El proceso para el manejo de FORMULARIOS requiere generalmente dos páginas, una que implementa el formulario y otra que procesa los datos cargados en el formulario.

La estructura mínima de un formulario es la siguiente: para la entrada de un nombre de persona, un objeto text y un botón para el envío del dato al servidor:

<html> 
  <head> 
  <title>Formulario de entrada del dato</title> 
  </head> 
  <body>
  <form method="post" action="pagina2.php"> 
  Ingrese su nombre: 
  <input type="text" name="nombre"> 
  <br> 
  <input type="submit" value="confirmar"> 
  </form>
</body> 
</html>

Esta página está completamente codificada en HTML, es decir un formulario contiene elementos HTML puros.

El elemento <form> y </form> nos permite definir un formulario en la página.

Este elemento tiene dos propiedades que debemos inicializar obligatoriamente: action y method.

La propiedad action indica el nombre del archivo que recibirá los datos ingresados por el operador en el formulario y que serán enviados al servidor cuando se presione el botón (submit). La propiedad method indica como se organizan esos datos para enviarlos al servidor, pudiendo ser mediante los métodos post o get (normalmente los datos de un formulario se envían mediante el método post).

Para crear un cuadro de texto para el ingreso del nombre debemos definir un objeto de tipo "text" y darle un nombre:

  <input type="text" name="nombre">

La propiedad type nos permite definir el tipo de control y con la propiedad name indicamos el nombre del control.

Por último todo formulario tiene un botón de tipo submit:

  <input type="submit" value="confirmar">

También utilizamos el elemento input pero en la propiedad type indicamos que se trata de un botón de envío de datos. En la propiedad value indicamos el texto que queremos que aparezca en el botón.

Ahora necesitamos una página con un pequeño programa en PHP que procese los datos ingresados en el formulario:

<html> 
  <head> 
  <title>Captura de datos del form</title> 
  </head> 
  <body>
  <?php 
  echo "El nombre ingresado es:"; 
  echo $_REQUEST['nombre']; 
  ?>
</body> 
</html>

Para acceder al dato en PHP se cuenta con un vector llamado $_REQUEST indicando como subíndice el nombre del cuadro de texto que definimos en el formulario (dicho nombre es sensible a mayúsculas y minúsculas)
Es común indicar entre comillas simples el subíndice en lugar de comillas dobles (con comillas dobles también funciona)

En nuestro problema sólo mostramos por pantalla el valor ingresado en el formulario HTML:

echo $_REQUEST['nombre'];

Síguenos en:
Facebook
www.facebook.com/gruposedam

Nuestro blog Tecnologico

gruposedam.blogspot.com

viernes, 7 de octubre de 2016

Una guía de los Por Qué y Cómos en el conjunto de tecnologías de JavaScript

View all articles

BY ALEJANDRO HERNANDEZ - JAVASCRIPT DEVELOPER @ TOPTAL(TRANSLATED BY PABLO FABREGAT)

#Backbone.js #Chai.js #Express.js #Grunt.js #Marionette.js #Mocha.js #Node.js #RequireJS

94SHARES

This article was originally written in English

La Historia

Entonces, tú y tu cofundador tienen esta genial idea para un negocio, ¿verdad?

Has estado agregando características en tu cabeza.

Frecuentemente, le preguntas a tus potenciales clientes sus opiniones, y todos ellos la aman.

Ok, entonces la gente la quiere. Hay hasta un poco de dinero para hacer. Y la única razón por la cual ellos no pueden obtenerla es porque no las has implementado—todavía.

Entonces, finalmente, te sientas un día y dices “¡Hagámoslo!”. Pronto, estás tratando de averiguar cómo aplicar la lógica de negocio de tu aplicación, la funcionalidad asesina que va a llevar adelante al producto: tienes una idea de cómo hacerlo, y ahora sabes que puedes hacerlo.

“¡Listo!¡Funciona!” dices. ¡Tu prueba de concepto es un éxito! Todo lo que queda por hacer es empaquetarlo en una aplicación web.

“Ok, hagamos el sitio”, dices.

Y entonces, te das cuenta de la verdad: necesitas elegir un lenguaje de programación; necesitas elegir una plataforma (moderna); necesitas elegir algunos frameworks (modernos); necesitas configurar (y comprar) espacio, base de datos y proveedores de alojamiento; necesitas una interfaz de administración; necesitas un sistema de permisos; necesitas un administrador de contenidos.

Quieres ser escueto, quieres ser ágil. Quieres usar tecnologías que te ayudaran a tener éxito en el corto-y largo-plazo. Y no son siempre fáciles de elegir

Tienes que tomar decenas y decenas de decisiones de arquitectura . Y quieres tomar las correctas: quieres usar tecnologías que te permitan desarrollo rápido, iteración constante, máxima eficiencia, velocidad, robustez y más. Quieres ser escueto, quieres ser ágil. Quieres usar tecnologías que te ayudaran a tener éxito en el corto-y largo-plazo. Y no son siempre fáciles de elegir.

“Estoy abrumado”, dices, mientras te vas sintiendo abrumado. Tu energía no es la misma de antes. Tratas de encajar las piezas, pero es demasiado trabajo.

Tu prueba de concepto se marchita y muere lentamente.

La Propuesta

Luego de abandonar toneladas de ideas de esta forma, decidí diseñar una solución. La llamo el proyecto ‘Init’ (Inicio)(ó init.js).

El corazón de la idea es tener un simple proyecto que inicie todos los demás, dejar que el desarrollador o el fundador técnico tomen esas decisiones al mismo tiempo y recibir una plantilla apropiada para empezar basada en esas decisiones. Se lo que van a decir los detractores, “Una solución no puede aplicarse a todos los problemas” (Odiadores odiarán). Y puede que estén en lo cierto. Pero podemos hacer nuestro mejor esfuerzo para crear una solución aproximada, y creo que Init se acerca bastante.

Para lograr mejor este objetivo, tenemos que tener algunas ideas claves en mente. Cuando estaba desarrollando Init, consideré:

Componentes

La modularización es una característica clave de cualquier sistema ya que te permite reusar componentes de software a través de distintos proyectos—lo cual es el principal objetivo de Init. Pero la modularización también viene con una “reemplazabilidad” por producto, la cual será nuestra mejor aliada a la hora de atacar varios tipos de problemas con “casi” la misma solución.
Facilidad de Desarrollo

Para algunos problemas, en algún lado hay una mejor solución escrita en [Brainf*ck](https://en.wikipedia.org/wiki/Brainfuck). ó jodecerebros). Pero implementar esa solución (en Brainf*uck) sería casi imposible de escribir, y mucho menos de leer. Te costaría tiempo y una enorme cantidad de esfuerzo. En general, deberías usar lenguajes y plataformas que hagan al desarrollo fácil, y no difícil para tí (o alguien que puede trabajar con él más tarde).
Comunidad

Cualquier plataforma que elijas, asegúrate que tenga una gran comunidad, y una que te pueda ayudar con los problemas más comunes y con los que no lo son tanto. Recuerda: jQuery puede no ser la librería másrápida, la más limpia, o la más elegante—pero es un ganador sólo por su comunidad.

Teniendo estos objetivos en mente, voy a mostrarte como hice mis propias decisiones al crear Init.

En su núcleo, Init se aprovecha del paradigma ‘full-stack JavaScript’ (algunas personas se refieren a él, o a una parte de él, como el MEAN Stack). Al trabajar con este conjunto, Init es capaz de usar solamente un sólo lenguaje mientras crea un ambiente increíblemente flexible y con todas las funciones para desarrollar aplicaciones web. En resumen, Init te permite usar JavaScript no solamente para desarrollo del lado cliente y servidor, pero también para construir, testear, maquetar, y más.

Pero bajemos un poco la velocidad y preguntémonos: ¿es realmente una buena idea usar JavaScript?

Por qué elegí JavaScript

Soy desarrollador web desde 1998. Por esas épocas usabamos Perl para la mayoría de nuestro desarrollo del lado del servidor, y aún desde esos tiempos teníamos JavaScript del lado del cliente. Las tecnologías web del lado servidor han cambiado inmensamente desde entonces: fuimos a través de oleada tras oleada de distintas tecnologías y lenguajes cómo PHP, ASP, JSP, .NET, Ruby, Python, solo por nombrar algunas. Los desarrolladores comenzaron a darse cuenta que usando dos distintos lenguajes para ambientes cliente y servidor estaba complicando las cosas. Los intentos iniciales para unificar bajo un mismo lenguaje intentaban crear componentes cliente del lado del servidor y compilarlos en JavaScript. Esto no funcionaba como se esperaba y muchos de esos proyectos fallaron (por ejemplo, ASP MVC reemplazando los formularios web de ASP.NET, y podría decirse queGWT será reemplazado por Polymer). en un futuro cercano). Pero era una excelente idea, en esencia: un lenguaje único en el cliente y el servidor, permitiéndonos reusar componentes y recursos (esta es la clave:recursos).

La respuesta era simple: usar JavaScript en el servidor.

De hecho, JavaScript nació con JavaScript Server Side en Netscape Enterprise Server, pero el lenguaje simplemente no estaba listo en esa época. Luego de años de prueba y error, Node.js finalmente emergió, lo cual no solo puso a JavaScript en el servidor, pero además promovió la idea de programación no-bloqueante, cambiando la forma en la que escribimos “fread”(I/O) para siempre (lee más aquí.

En una oración: la programación no-bloqueante apunta a poner tareas que consumen tiempo a un lado, usualmente especificando que se debería hacer una vez que estas tareas se hayan completado, y permitiendo que el procesador maneje otros pedidos mientras tanto.

Pero esas ideas no eran nuevas—entonces, ¿por que se volvieron tan populares con Node.js? Simple, la programación no-bloqueante puede ser alcanzada de distintas formas. Tal vez la más fácil es usar callbacks y un evento en bucle. En la mayoría de los lenguajes, esa no es una tarea fácil: mientras que los ‘callbacks’ son una característica común en algunos lenguajes, un evento en bucle no lo es y usualmente te encuentras aferrándote a librerías externas (por ejemplo: Python, con Tornado). Pero en JavaScript, los callbacks son construidos dentro del lenguaje, como también el evento en bucle, y casi cualquier programador que haya incursionado en JavaScript está familiarizado con ellos (o al menos los han usado, aunque no entiendan del todo que significa un evento en bucle). De repente, cada una de las startup en el Planeta Tierra podía reusar desarrolladores (por ej., recursos) tanto en el lado cliente cómo en el lado del servidor, resolviendo el problema de “Se necesita Gurú Python”.

De repente, cada una de las startup en el Planeta Tierra podía reusar desarrolladores (por ej., recursos) tanto en el lado cliente cómo en el lado del servidor, resolviendo el problema de “Se necesita Gurú Python”.

Entonces, ahora tenemos una plataforma increíblemente rápida (gracias a la programación no-bloqueante) con un lenguaje de programación que es increíblemente fácil de usar (gracias a JavaScript). Pero, ¿Es suficiente? ¿Perdurará? Estoy seguro que JavaScript va a tener un importante lugar en el futuro. Déjame decirte por qué:

Programación Funcional

JavaScript fue el primer lenguaje de programación que llevó el paradigma funcional a las masas (por supuesto, Lisp llegó primero, pero la mayoría de los desarrolladores nunca han construido una aplicación en Lisp lista para ser usada en producción). Lisp y Self, influencias principales de Javascript, están llenos de ideas innovadoras. Esas ideas pueden liberar nuestras mentes para explorar nuevas técnicas, patrones y paradigmas. Y todos ellos llevan a JavaScript. Mira monads, codificación Church, o incluso (para un ejemplo más práctico) la colección de funciones](http://underscorejs.org/#collections), de Underscore.js las cuales pueden salvarte líneas y líneas de código.
Objetos Dinámicos y herencia Prototipada

La programación orientada a objetos sin clases (y sin las interminables herencias de clases) permite rápido desarrollo (crear objetos, agregar métodos y usarlos) pero, lo más importante, reduce el tiempo de refactorización durante tareas de mantenimiento dejando que el desarrollador modifique instancias de objetos en vez de clases. Esta velocidad y flexibilidad pavimenta el camino para el desarrollo rápido.
JavaScript es Internet

JavaScript fue diseñado para Internet, ha estado aquí desde el principio, y no va a irse. Todos los intentos por destruirlo han fallado, mira, por ejemplo, la caída de los Applets Java, el reemplazo de VBScript de Microsoft, TypeScript (que compilaba a JavaScript), y la caída de Flash en manos del mercado móvil y HTML5. Es imposible reemplazar Javascript sin romper millones de páginas web, así que nuestro objetivo a largo plazo debería ser el de mejorarlo. Y no hay nadie mejor para esa tarea que el Technical Committee 39 de ECMA.

Ok, alternativas a JavaScript nacen todos los días, cómo CoffeeScript, TypeScript, y los los millones de lenguajes que compilan a JavaScript. Esas alternativas pueden ser útiles para etapas de desarrollo (por medio de mapeos de código fuente), pero fallarán al tratar de suplantar JavaScript a largo plazo por dos razones: sus comunidades nunca serán más grandes, y sus mejores funcionalidades serán adoptadas por el script de ECMA (por ej., JavaScript). JavaScript no es como un lenguaje ensamblador: es un lenguaje de programación de alto nivel con código fuente que puedes entender—entonces deberías entenderlo.

Ahora, gracias al proyecto Esprima, puedes crear tus propias herramientas para jugar con el código fuente, modificándolo, cambiando su estilo, agregando comentarios, instrumentando, y todo de tipo de cosas que puedas imaginar al jugar con el Árbol de Sintaxis Abstracta de tu programa como si estuvieses jugando con un Árbol DOM.

JavaScript de extremo a extremo: Node.js y MongoDB

Entonces, esas son las razones para usar JavaScript. Ahora, voy a usar JavaScript como una razón para usar Node.js y MongoDB.

Node.js

Node.js es una plataforma para construir aplicaciones de red rápidas y escalables—eso es básicamente lo que dice el sitio de Node.js. Pero Node.js es más que eso: es el entorno de ejecución preferido por cualquier aplicación con acceso de E/S en JavaScript. Incluso si no planeas escribir tu aplicación del servidor principal con Node.js, puedes usar herramientas creadas construidas encima de Node.js para mejorar tu proceso de desarrollo. Por ejemplo: Mocha.js para unit testing, Grunt.js para tareas de construcción automatizadas, o incluso Brackets para completar edición de código.

Entonces, si vas a escribir aplicaciones de JavaScript para servidor o cliente, deberías familiarizarte con Node.js, porque vas a necesitar usarlo diariamente. Hay algunas interesantes alternativas), pero ninguna de ellas llega siquiera al 10% de la comunidad de Node.js.
MongoDB

MongoDB es una base de datos NoSQL basada en documentos que usan JavaScript como su lenguaje de consultas, permitiendo completar de extremo-a-extremo la plataforma JavaScript. Pero esa no es siquiera la razón principal para elegir esta base de datos.

MongoDB es una base de datos sin esquema que permite persistir tus objetos de una manera flexible y por lo tanto adaptarse más rápidamente a los cambios en los requisitos. Además, es altamente escalable y basado en map-reduce, lo cual lo hace adecuado para aplicaciones con muchos datos. MongoDB es tan flexible que puede ser usado como una base de datos de documentos sin esquema, un almacén de datos relacional (aunque le faltan transacciones),o incluso almacenamiento de clave-valor para respuestas de caché.

Modularización de Servidor con Express.js

Modularización en el lado del servidor nunca es fácil. Pero con Express.js (y Connect.js) vino la idea de‘middleware’(ó software intermedio). En mi opinión, middleware es la mejor forma de definir componentes en el servidor. Si quieres compararlo con un patrón conocido, se acerca bastante a los tubos y filtros.

La idea básica es que tu componente es parte de una tubería. La tubería procesa el pedido (entrada) y genera una respuesta (salida), pero tu componente no es responsable por la respuesta completa. En cambio, solo modifica lo que necesita y luego delega hacia la otra pieza de la tubería. Cuando la última pieza de la tubería termina su proceso, la respuesta se envía al cliente.

Nos referimos a estas ‘piezas de tubería’ como ‘middleware’. Claramente, podemos crear dos tipos demiddleware:

Intermedios: Esos que procesan el pedido y la respuesta, pero no son del todo responsables por la respuesta en sí, entonces delegan al siguiente middleware.
Finales: Esos que toman la responsabilidad por completo en la respuesta final. Ellos procesan y modifican el pedido y la respuesta, pero no necesitan delegar al siguiente middleware. En la práctica, se recomienda que delegues a un siguiente middleware, de todas maneras, para permitir flexibilidad en la arquitectura (por ej., agregar más middleware después), aunque ese middleware no exista (en ese caso la respuesta irá directamente al cliente)

Como ejemplo concreto, considera un componente ‘usuario administrador’ en el servidor. En términos de middleware, tendríamos tanto finales como intermediarios. Para nuestros finales, tendríamos características tales como crear un usuario y listar usuarios. Pero antes que podamos realizar esas acciones, necesitamos nuestros intermediarios para autenticación (ya que no queremos pedidos que creen usuarios sin autenticar). Una vez que creamos estos intermediarios para autenticación, podemos simplemente conectarlos en cualquier lado que queramos para convertir una característica sin autenticación existente en una con autenticación.

Aplicaciones de una sóla página

El proyecto Init enfoca en crear aplicaciones de una sóla página (SPAs-Single-Page Applications). Muchos desarrolladores web se han tentado más de una vez en probar construir SPAs. Desarrollé usando varias (principalmente propietarias), y puedo decir con confianza que son simplemente el futuro de las aplicaciones web. ¿Alguna vez comparaste una SPA con una aplicación web regular en una conexión móvil? La diferencia de respuesta es de decenas de segundos.

¿Alguna vez comparaste una SPA con una aplicación web regular en una conexión móvil? La diferencia de respuesta es de decenas de segundos.

Las SPA son el futuro de la web—¿entonces por que harías tu producto en un formulario antiguo? Un argumento común que escucho es que la gente está preocupada por el SEO. Pero si manejas las cosas correctamente, esto no debería ser un problema: Google mismo tiene un muy buen tutorial sobre como hacerlo, y hay muy buenos comentarios aquí también.

MV* del lado del cliente con Backbone.js, Marionette.js y Twitter Bootstrap

Mucho se ha dicho acerca de los MVC* frameworks para SPAs. Es una decisión complicada, pero voy a decir que el top 3 son Backbone.js, Ember.js, y Angular.js.

Los tres son bien considerados. ¿Pero cual de ellos es el mejor para tí?

Desafortunadamente, tengo que admitir que tengo una experiencia muy limitada con Angular.js, así que voy a dejarlo fuera de esta discusión. Ahora, Ember.js y Backbone.js representan dos maneras distintas de atacar el mismo problema.

Backbone.js es minimalista, simplista y te ofrece lo suficiente para crear una simple SPA. Por otro lado, Ember.js es un framework completamente profesional para crear SPAs. Tiene más adornos, pero también una curva de aprendizaje más grande.

Dependiendo del tamaño de tu aplicación, la decisión puede ser tan fácil como mirar el ratio de featuresUsed/featuresAvailable(características Usadas/Disponibles), lo cual te dará una gran pista.

En el caso de Init, quería cubrir la mayoría de los escenarios, así que elegí Backbone.js para creación fácil de SPAs, con Backbone.Marionette.View para modularización. De esta forma, cada componente es una simple aplicación, y la aplicación final puede ser tan compleja como queramos que sea.

Estilizar es también un desafío, pero podemos, de vuelta, contar con frameworks para rescatarnos. Para CSS, no hay nada mejor que Twitter Bootstrap, que ofrece un completo set de estilos que ya están listos para usar y sonfáciles de personalizar.

Booststrap fue creado usando el lenguaje LESS que es de código abierto, así que podemos modificarlo si así lo necesitasemos. Viene con una tonelada de controles de usabilidad que están bien documentados en el sitio de Bootstrap. Además, hay un modelo de personalización que te permite crear tus propios controles. Definitivamente es el hombre para este trabajo.

Mejores prácticas: Grunt.js, Mocha.js, Chai.js, RequireJS y CoverJS

Finalmente, deberíamos definir algunas de nuestras mejores prácticas, y buscar en como Init puede ayudarte a implementarlas y mantenerlas. Nuestra solución está centrada en varias herramientas, que están basadas en Node.js.

Mocha.js and Chai.js:

Estas herramientas te permiten mejorar tu proceso de desarrollo aplicando TDD o BDD, proveyendo la infraestructura para organizar tus tests unitarios y un lanzador para correrlos automáticamente.

Hay miles de frameworks para test unitarios para JavaScript. ¿Entonces, por que usar Mocha.js? La respuesta corta: es flexible y completo.

La respuesta larga: tiene dos características importantes (interfaces, reporters) y una ausencia importante (assertions). Déjenme explicarles.
- Interfaces: tal vez estés acostumbrado a los conceptos de TDD de suites y tests unitarios, o tal vez prefieras ideas BDD de especificaciones de comportamiento con “describe” y “it should”. Mocha.js te permite usar los dos acercamientos.
- Reporters: correr tu test generará reportes de resultados, y puedes darle formato a esos resultados usando varios reporters. Por ejemplo, si tienes que alimentar un servidor de Integración Continua, puedes encontrar un reporter para hacer exactamente eso.
- Falta de una librería de assertions: : lejos de ser un problema, Mocha.js fue diseñado para dejarte usar la librería de assertions que prefieras, ofreciendo más flexibilidad. Hay muchas opciones, pero ahí es donde Chai.js entra en acción.
Chai.js es una librería de assertions flexible que permite usar cualquiera de los tres más importantes estilos de assertions:
- Assert: Estilo de assertion clásico de la vieja escuela. Ej.:
```
  assert.equal(variable, ”valor”);  
```
- Expect: Tipo de assertion encadenable más comúnmente usado en BDD. Ej.:
```
  expect(variable).to.equal(“valor”);
```
- Should: También usado en BDD, pero prefiero Expect porque Should porque suena repetitivo con la especificación de comportamiento _’it _(“should do something..”-” eso debería hacer algo”). Ej.:
```
  variable.should.equal(“valor”);
```
Chai.js se combina perfectamente con Mocha.js. Usando solamente estas dos librerías, puedes escribir tus test en TDD, BDD, o cualquier estilo imaginable.
Grunt.js:

Grunt.js permite automatizar tareas de construcción, cualquier cosa desde simples archivos concatenados copiados y pegados, a plantillas precompiladas, estilo compilado de lenguaje (por ej., SASS y LESS), test unitario (con mocha.js), linting y compresión de código (ej., con UglifyJS o Closure Compiler). Puedes agregar tu propia tarea automatizada a Grunt, o buscar en el registro de Grunt, donde hay cientos y cientos de plugins disponibles (de vuelta, usando herramientas con grandes comunidades detrás paga bien). Grunt también puede monitorear tus archivos y disparar acciones cuando estos son modificados.
RequireJS:

RequireJS puede sonar como otra forma de cargar modulos con AMD, pero puedo asegurarte que es mucho más que eso. Para entender por qué, primero debemos mencionar la idea del namespacing de modulos (ej., demo.views.hola), lo que evita contaminar el namespace global envolviendo cada módulo en su propio namespace. El problema es, estos módulos no son reusables: si modificas el namespace de una ‘instancia’, estás modificando el namespace de todas las ‘instancias’. En contraste con eso, RequireJS permite definir módulos reusables desde el principio. (Además, te ayudará a adoptar Dependency Injection para evitar que tus modulos accedan variables globales).
CoverJS:

Cobertura de código es una medida métrica para evaluar tu testing. Como el nombre implica, te dice cuanto código está cubierto en tu conjunto de tests actual. CoverJS mide la cobertura de código de tus tests instrumentando declaraciones (en vez de líneas de código cómo JSCoverage) y generando una versión instrumentada de tu código. También genera reportes para alimentar tu servidor de integración continua.

Usando _Branches_ (_ramas_) para alternar características

Cuando empecé Init, necesitaba una manera para que los usuarios activen y desactiven varias características que podrían llegar a querer en su proyecto. Decidí tomar un enfoque radical con el sistema de ramas de git para implementar esta funcionalidad.

En esencia, cada rama representa una característica o funcionalidad que un usuario podría querer incluir. Si estás empezando un proyecto desde el principio, empieza por la rama mínima que necesitas, y luego agrega otras tecnologías fusionando la rama con las otras deseadas. Por ejemplo, digamos que quieres empezar tu proyecto con Backbone.js y Marionette.js. Bueno, puedes empezar en la rama Backbone.js y fusionarla con la rama Marionette, continuando desde ahí para cada pedazo de funcionalidad que quieras agregar.

Por ahora, la idea de fusionar para agregar funcionalidad puede solo ser usada para plantillas de tecnología (ej., Backbone, Node, Express). Pero en el futuro, serás capaz de alternar entre back-end (ej., desde MongoDB a Postgres) e implementaciones del lado cliente.

Empieza un proyecto con Init y haz un deploy en Heroku hoy

Nunca ha habido una manera más fácil de empezar un proyecto. Dirígete al repositorio de GitHub, fijate la rama con los últimos commits (ahora mismo es usermanager, aunque esto puede cambiar en el futuro) y entonces:

Crea un directorio para tu proyecto (o usa uno existente).
Crea tu repositorio con “git init” (o usa un repositorio existente)

Agrega un servidor remoto con Init

 git remote add init git: //github.com/picanteverde/init.git

Descarga la rama que quieras
```
git pull init usermanager
```
Obtén el archivo de procesos de Heroku
```
 git pull init heroku-webprocess
```
Con el Heroku Toolbelt instalado, crea una aplicación
```
 heroku create
```
Haz un push a la rama master a Heroku
```
 git push heroku master
```
Visita tu aplicación en funcionamiento en Heroku!

Ahora puedes empezar a desarrollar tu característica asesina con solo unas líneas de código. No solo eso, sino que estarás desarrollando con las últimas y más eficientes tecnologías en una suite de desarrollo lo más automatizada posible.

Espero que puedas usar Init para comenzar tu próxima gran idea. Recuerda Revisar el repositorio de Init para ver correcciones y características—su desarrollo es bastante activo, y espero con ansias escuchar sus comentarios.

Contenido traducido por Pablo Fabregat, miembro de TransBunko, un mercado de traducciones técnicas.

About the author

View full profile »

Hire the Author

Alejandro Hernandez, Argentina

MEMBER SINCE AUGUST 30, 2012

JavaScript jQuery Node.js React.js

Alejandro got his Bachelor's in software engineering eleven years ago, and since then has been working for software companies of all sizes from all around the globe as a freelancer. Currently, he enjoys working as the technical lead on JavaScript projects, where his deep understanding of architecture and theory is most impactful. [click to continue...]

Síguenos en:

Facebook
www.facebook.com/gruposedam

Nuestro blog Tecnologico
gruposedam.blogspot.com

Páginas

miércoles, 19 de octubre de 2016

martes, 18 de octubre de 2016

lunes, 17 de octubre de 2016

domingo, 16 de octubre de 2016

sábado, 15 de octubre de 2016

viernes, 14 de octubre de 2016

jueves, 13 de octubre de 2016

miércoles, 12 de octubre de 2016

Problema

martes, 11 de octubre de 2016

lunes, 10 de octubre de 2016

domingo, 9 de octubre de 2016

sábado, 8 de octubre de 2016

viernes, 7 de octubre de 2016

Una guía de los Por Qué y Cómos en el conjunto de tecnologías de JavaScript

La Historia

La Propuesta

Por qué elegí JavaScript

JavaScript de extremo a extremo: Node.js y MongoDB

Modularización de Servidor con Express.js

Aplicaciones de una sóla página

MV* del lado del cliente con Backbone.js, Marionette.js y Twitter Bootstrap

Mejores prácticas: Grunt.js, Mocha.js, Chai.js, RequireJS y CoverJS

Usando _Branches_ (_ramas_) para alternar características

Empieza un proyecto con Init y haz un deploy en Heroku hoy

About the author

Formulario de contacto