HTML desde cero – Clase 2

En la clase 1 hicimos una página muy sencilla.
Hasta ahora sólo tenemos la estructura básica de la página web, y dentro de su contenido depositamos unos párrafos sin ningún estilo.
Ahora vamos a modificar esa misma página web, agregándole negrita, cursiva, enlaces. En la tercera clase le vamos a agregar imágenes, título y encabezados.

Destacamos partes del texto

Comienzo de texto destacado: <strong>
Fin de texto destacado: </strong>
Comienzo de texto en cursiva: <em>
Fin de texto en cursiva: </em>

Vamos a abrir el archivo HTML en el editor de texto (Notepad++, Geany, etc.)
Y vamos a elegir algunas palabras para destacar en cursiva y en negrita.
Lo que tenemos que hacer es marcar con el comienzo del texto destacado, y marcar con el cierre del texto destacado. Lo mismo para cursiva, pero con em:

Martín Fierro

La vuelta de Martín Fierro

El Gaucho Martín Fierro es un poema narrativo, escrito en verso por José Hernández en 1872, obra literaria considerada ejemplar del género. Debido a que tiene una continuación, La vuelta de Martín Fierro, escrita en 1879, este libro es también conocido como «La ida». Ambos libros han sido considerados como libro nacional de la Argentina, bajo el título genérico de «El Martín Fierro». En «La ida», Martín Fierro es un gaucho trabajador al que la injusticia social lo vuelve gaucho matrero (fuera de la ley).

Agregamos enlaces

Comienzo de enlace: <a href=”https://es.wikipedia.org/”>
Fin de enlace: </a>

La estructura de un enlace es un poco diferente a los tags que venimos viendo, porque -si bien hay apertura y cierre- hay otros dos elementos fundamentales:

El destino del enlace (la dirección, por ejemplo, https://es.wikipedia.org/ )
El texto visible en el enlace, lo que uno quiere que se lea en el link (por ejemplo “Enciclopedia libre”)

<a href=”https://es.wikipedia.org/”>Enciclopedia libre</a>

Se ve de esta manera:

Enciclopedia libre

Hay dos recomendaciones muy importantes para mejorar la accesibilidad del sitio web:

  • Los enlaces no tienen que tener texto igual entre sí, por ejemplo: haga clic “aquí“, “aquí” y “aquí” para leer más. Una persona que navega escuchando el sitio (como los invidentes o personas con altas dificultades de visión), sólo va a escuchar la palabra “aquí”, lo cual no lo ayuda para saber de qué se trata. La forma correcta es: Acceda a la enciclopedia Wikipedia, al sitio de Martin Fierro, o busque más información en Google.
  • Los visitantes de tu página tienen que poder decidir si quieren que un enlace se abra en la misma ventana o en una nueva. Está desaconsejado el uso de enlaces que se abren en una ventana nueva, ya que el usuario pierde el dominio de su navegación. Si aún así lo necesitaras, al código anterior se le agrega lo siguiente: target=“_blank”

<a href=”https://es.wikipedia.org/” target=”_blank”>Enciclopedia libre</a>

Se ve de esta manera:

Enciclopedia libre

Te propongo hacer el siguiente ejercicio:

  • Tomá un texto que te interese y creá una página web nueva, usando la estructura aprendida como base, y poniendo negrita, cursiva y enlaces en diversos lugares del texto.

Cómo ver el código de una página web

Cuando quieras ver y por qué no copiar código (es frecuente y está permitido, esto es código abierto!) podés hacer clic con el botón derecho sobre una página web y mirar cómo está hecha. Si no tiene programación (javascript, php, etc) o cosas hechas con Flash u otros plugins, vas a poder aprender copiando, pegando y modificando.

Más tutoriales de HTML

En el sitio de w3schools hay excelentes tutoriales de HTML y CSS.

HTML desde cero – Clase 2

En la clase 1 hicimos una página muy sencilla.
Hasta ahora sólo tenemos la estructura básica de la página web, y dentro de su contenido depositamos unos párrafos sin ningún estilo.
Ahora vamos a modificar esa misma página web, agregándole negrita, cursiva, enlaces. En la tercera clase le vamos a agregar imágenes, título y encabezados.

Destacamos partes del texto

  • Comienzo de texto destacado: <strong>
  • Fin de texto destacado: </strong>
  • Comienzo de texto en cursiva: <em>
  • Fin de texto en cursiva: </em>

Vamos a abrir el archivo HTML en el editor de texto (Notepad++, Geany, etc.)
Y vamos a elegir algunas palabras para destacar en cursiva y en negrita.
Lo que tenemos que hacer es marcar con el comienzo del texto destacado, y marcar con el cierre del texto destacado. Lo mismo para cursiva, pero con em:

<strong>Martín Fierro</strong>

<em>La vuelta de Martín Fierro</em>

El Gaucho Martín Fierro es un poema narrativo, escrito en verso por José Hernández en 1872, obra literaria considerada ejemplar del género. Debido a que tiene una continuación, La vuelta de Martín Fierro, escrita en 1879, este libro es también conocido como «La ida». Ambos libros han sido considerados como libro nacional de la Argentina, bajo el título genérico de «El Martín Fierro». En «La ida», Martín Fierro es un gaucho trabajador al que la injusticia social lo vuelve gaucho matrero (fuera de la ley).

Agregamos enlaces

  • Comienzo de enlace: <a href=”https://es.wikipedia.org/”>
  • Fin de enlace: </a>

La estructura de un enlace es un poco diferente a los tags que venimos viendo, porque -si bien hay apertura y cierre- hay otros dos elementos fundamentales:

  • El destino del enlace (la dirección, por ejemplo, https://es.wikipedia.org/ )
  • El texto visible en el enlace, lo que uno quiere que se lea en el link (por ejemplo “Enciclopedia libre”)

<a href=”https://es.wikipedia.org/”>Enciclopedia libre</a>

Se ve de esta manera:

Enciclopedia libre

Hay dos recomendaciones muy importantes para mejorar la accesibilidad del sitio web:

  • Los enlaces no tienen que tener texto igual entre sí, por ejemplo: haga clic “aquí“, “aquí” y “aquí” para leer más. Una persona que navega escuchando el sitio (como los invidentes o personas con altas dificultades de visión), sólo va a escuchar la palabra “aquí”, lo cual no lo ayuda para saber de qué se trata. La forma correcta es: Acceda a la enciclopedia Wikipedia, al sitio de Martin Fierro, o busque más información en Google.
  • Los visitantes de tu página tienen que poder decidir si quieren que un enlace se abra en la misma ventana o en una nueva. Está desaconsejado el uso de enlaces que se abren en una ventana nueva, ya que el usuario pierde el dominio de su navegación. Si aún así lo necesitaras, al código anterior se le agrega lo siguiente: target=“_blank”

<a href=”https://es.wikipedia.org/” target=“_blank”>Enciclopedia libre</a>

Se ve de esta manera:

Enciclopedia libre

Te propongo hacer el siguiente ejercicio:

  • Tomá un texto que te interese y creá una página web nueva, usando la estructura aprendida como base, y poniendo negrita, cursiva y enlaces en diversos lugares del texto.

Cómo ver el código de una página web

Cuando quieras ver y por qué no copiar código (es frecuente y está permitido, esto es código abierto!) podés hacer clic con el botón derecho sobre una página web y mirar cómo está hecha. Si no tiene programación  (javascript, php, etc) o cosas hechas con Flash u otros plugins, vas a poder aprender copiando, pegando y modificando.

Más tutoriales de HTML

En el sitio de w3schools hay excelentes tutoriales de HTML y CSS.

HTML desde cero – Clase 1

Si tenés ganas de aprender a hacer páginas web desde cero, lo primero que tenés que saber es que casi nadie empieza a programar abriendo un editor de textos vacío y escribiendo todo. Así que no vamos a empezar aprendiendo a escribir código, sino modificando un código ya existente.

¿Dónde se escribe el programa? En cualquier editor de texto plano, por ejemplo Geany (para Linux) o Notepad++ (para Windows).

¿Cómo se ve lo que hace el programa? Abriendo el archivo en un navegador (Mozilla Firefox, Chrome, etc.)

Empezamos.

  • Comienzo de párrafo: <p>
  • Fin de párrafo: </p>
  • Copiá el siguiente código y pegalo en tu editor de texto. En este código lo que hice fue tomar de Wikipedia unos párrafos sobre el Martín Fierro, pegarlos en el editor y utilizar los TAGS (etiquetas) correspondientes a comienzo y final de párrafo.
<p>El Gaucho Martín Fierro es un poema narrativo, escrito en verso por José Hernández en 1872, obra literaria considerada ejemplar del género. Debido a que tiene una continuación, La vuelta de Martín Fierro, escrita en 1879, este libro es también conocido como «La ida». Ambos libros han sido considerados como libro nacional de la Argentina, bajo el título genérico de «El Martín Fierro». En «La ida», Martín Fierro es un gaucho trabajador al que la injusticia social lo vuelve gaucho matrero (fuera de la ley).</p>
<p>Narra el carácter independiente, heroico y sacrificado del gaucho. El poema es, en parte, una protesta en contra de la política del presidente argentino Domingo Faustino Sarmiento de reclutar forzosamente a los gauchos para ir a la frontera contra los indígenas.</p>
  • Guardá el archivo con un nombre como “martinfierro.html”
  • Abrilo en un navegador (o en todos los navegadores que tengas, de a poco vas a aprender las diferencias entre navegadores)

¿Qué ves en el navegador? Probablemente ves el texto lleno de símbolos raros. ¿Por qué? Porque al comienzo de una página web le tenemos que indicar algunas cosas importantes para que el navegador pueda entender en qué idioma está el texto, entre otras cosas.

La estructura de una página web

La estructura básica de una página web podría resumirse de la siguiente manera:

Comienzo de página
   Comienzo de encabezado
       ---contenido del encabezado---
   Fin del encabezado
   Comienzo del cuerpo de la página
       ---contenido del cuerpo de la página---
   Fin del cuerpo de la página
Fin de la página
  • Una página web en HTML siempre tiene que empezar con la declaración de tipo de documento y la codificación de caracteres. Por eso todos empezamos una página siempre abriendo otra, porque esto no creo que nadie lo escriba “de memoria”:
  • Comienzo de página web:  <!DOCTYPE html>
  • Fin de pagina web: </HTML>
  • Comienzo del encabezado: <head>
  • Fin del encabezado: </head>
  • Comienzo del cuerpo de la página: <body>
  • Fin del cuerpo de la página: </body>

Ahora nuevamente, copiá este código y pegalo en tu editor de texto. Guardá el archivo como html y abrilo en un navegador:

<!DOCTYPE html>
<head>
<meta charset=“UTF-8”>
</head>
<body>
<p>El Gaucho Martín Fierro es un poema narrativo, escrito en verso por José Hernández en 1872, obra literaria considerada ejemplar del género. Debido a que tiene una continuación, La vuelta de Martín Fierro, escrita en 1879, este libro es también conocido como «La ida». Ambos libros han sido considerados como libro nacional de la Argentina, bajo el título genérico de «El Martín Fierro». En «La ida», Martín Fierro es un gaucho trabajador al que la injusticia social lo vuelve gaucho matrero (fuera de la ley).</p>
<p>Narra el carácter independiente, heroico y sacrificado del gaucho. El poema es, en parte, una protesta en contra de la política del presidente argentino Domingo Faustino Sarmiento de reclutar forzosamente a los gauchos para ir a la frontera contra los indígenas.</p>
</body>
</html>

Ahora sí, hiciste tu primera página web. Felicitaciones. 🙂

HTML desde cero – Clase 1

Si tenés ganas de aprender a hacer páginas web desde cero, lo primero que tenés que saber es que casi nadie empieza a programar abriendo un editor de textos vacío y escribiendo todo. Así que no vamos a empezar aprendiendo a escribir código, sino modificando un código ya existente.

¿Dónde se escribe el programa? En cualquier editor de texto plano, por ejemplo Geany (para Linux) o Notepad++ (para Windows).

¿Cómo se ve lo que hace el programa? Abriendo el archivo en un navegador (Mozilla Firefox, Chrome, etc.)

Empezamos.

  • Comienzo de párrafo: <p>
  • Fin de párrafo: </p>
  • Copiá el siguiente código y pegalo en tu editor de texto. En este código lo que hice fue tomar de Wikipedia unos párrafos sobre el Martín Fierro, pegarlos en el editor y utilizar los TAGS (etiquetas) correspondientes a comienzo y final de párrafo.
<p>El Gaucho Martín Fierro es un poema narrativo, escrito en verso por José Hernández en 1872, obra literaria considerada ejemplar del género. Debido a que tiene una continuación, La vuelta de Martín Fierro, escrita en 1879, este libro es también conocido como «La ida». Ambos libros han sido considerados como libro nacional de la Argentina, bajo el título genérico de «El Martín Fierro». En «La ida», Martín Fierro es un gaucho trabajador al que la injusticia social lo vuelve gaucho matrero (fuera de la ley).</p>
<p>Narra el carácter independiente, heroico y sacrificado del gaucho. El poema es, en parte, una protesta en contra de la política del presidente argentino Domingo Faustino Sarmiento de reclutar forzosamente a los gauchos para ir a la frontera contra los indígenas.</p>
  • Guardá el archivo con un nombre como “martinfierro.html”
  • Abrilo en un navegador (o en todos los navegadores que tengas, de a poco vas a aprender las diferencias entre navegadores)

¿Qué ves en el navegador? Probablemente ves el texto lleno de símbolos raros. ¿Por qué? Porque al comienzo de una página web le tenemos que indicar algunas cosas importantes para que el navegador pueda entender en qué idioma está el texto, entre otras cosas.

La estructura de una página web

La estructura básica de una página web podría resumirse de la siguiente manera:

Comienzo de página
   Comienzo de encabezado
       ---contenido del encabezado---
   Fin del encabezado
   Comienzo del cuerpo de la página
       ---contenido del cuerpo de la página---
   Fin del cuerpo de la página
Fin de la página
  • Una página web en HTML siempre tiene que empezar con la declaración de tipo de documento y la codificación de caracteres. Por eso todos empezamos una página siempre abriendo otra, porque esto no creo que nadie lo escriba “de memoria”:
  • Comienzo de página web:  <!DOCTYPE html>
  • Fin de pagina web: </HTML>
  • Comienzo del encabezado: <head>
  • Fin del encabezado: </head>
  • Comienzo del cuerpo de la página: <body>
  • Fin del cuerpo de la página: </body>

Ahora nuevamente, copiá este código y pegalo en tu editor de texto. Guardá el archivo como html y abrilo en un navegador:

<!DOCTYPE html>
<head>
<meta charset=“UTF-8”>
</head>
<body>
<p>El Gaucho Martín Fierro es un poema narrativo, escrito en verso por José Hernández en 1872, obra literaria considerada ejemplar del género. Debido a que tiene una continuación, La vuelta de Martín Fierro, escrita en 1879, este libro es también conocido como «La ida». Ambos libros han sido considerados como libro nacional de la Argentina, bajo el título genérico de «El Martín Fierro». En «La ida», Martín Fierro es un gaucho trabajador al que la injusticia social lo vuelve gaucho matrero (fuera de la ley).</p>
<p>Narra el carácter independiente, heroico y sacrificado del gaucho. El poema es, en parte, una protesta en contra de la política del presidente argentino Domingo Faustino Sarmiento de reclutar forzosamente a los gauchos para ir a la frontera contra los indígenas.</p>
</body>
</html>

Ahora sí, hiciste tu primera página web. Felicitaciones. :)

Feliz año 2016

Como siempre para las fiestas, Betaweblog tiene un regalito. Esta vez es un regalo repetido (“usado” pero no por ello de “segunda selección”), un calendario 2016 hecho con fórmulas de Calc, de LibreOffice:

Calendario 2016 en formato ODS

Para el que no tiene ganas de personalizarlo, acá está la versión PDF del calendario 2016, al cual convertí en una serie de JPGs con Imagemagick, siguiendo unas sencillas instrucciones

Calendario febrerocalendario enero

Feliz año nuevo 2016

Como siempre para las fiestas, Betaweblog tiene un regalito. Esta vez es un regalo repetido (“usado” pero no por ello de “segunda selección”), un calendario 2016 hecho con fórmulas de Calc, de LibreOffice:

Calendario 2016 en formato ODS

Para el que no tiene ganas de personalizarlo, acá está la versión PDF del calendario 2016, al cual convertí en una serie de JPGs con Imagemagick, siguiendo unas sencillas instrucciones

calendario2016-Enero calendario2016-Febrero calendario2016-Marzo calendario2016-Abril calendario2016-Mayo calendario2016-Junio calendario2016-Julio calendario2016-Agosto calendario2016-Septiembre calendario2016-Octubre calendario2016-Noviembre calendario2016-Diciembre

Crear sesiones usando cookies en un formulario en PHP

Si necesitamos controlar quiénes usan nuestro sistema, podemos tener un grupo de usuarios en una base de datos.

Para acceder al sistema, pedimos al usuario que se identifique, creando una sesión con los datos recibidos en el formulario de login, y guardamos cada dato del usuario en una cookie. La creación de cookies debe ser lo primero que se escribe, incluso antes que las cabeceras de HTML:

<?php
session_start();
$_SESSION['nombre'] = $_POST['Nombre'];
$_SESSION['apellido'] = $_POST['Apellido'];
?>

Cada vez que se accede al formulario, nos fijamos si existe la cookie. Si existe, mostramos el contenido de la página. Si no, invitamos a navegante a identificarse o a pedir la creación de un usuario nuevo:

<?php
session_start();
if (isset($_SESSION['Nombre])){
 echo "Hola, ";
 echo $_SESSION['nombre'];
 echo " ";
 echo $_SESSION['apellido'];
echo "<p>Contenido de la página, que se muestra sólo a los usuarios logueados</p>";
}else{
echo '<p>Todavía no ingresó al sistema.</p>
<p><a href="login.html">Acceder con un nombre de usuario y contraseña</a>
 o <a href="solicitar.html">Solicitar un usuario nuevo</a></p>';
}
?>

¿Cómo sabemos si el usuario está registrado y si ingresó correctamente su password? (Gracias a esta entrada en forosdelweb lo pude hacer sin dificultad)

<?php 
$usuario = $_POST['campousuario'];
$clave = $_POST['campoclave'];

include('abre_conexion.php'); // Se conecta a la base de datos

$query = "SELECT * FROM `usuarios` WHERE usuario = '$usuario'"; // Esta linea hace la consulta 
$result = mysql_query($query); // Almaceno el resultado de la consulta en la variable result

if( mysql_num_rows($result) == 0){
// mysql_num_rows <- esta funcion me imprime el numero de registro que encontro 
// si el numero es igual a 0 es porque el registro no existe, 
en otras palabras ese usuario no esta en la tabla.
echo "<p>El usuario no existe</p>";
echo "<a href='solicitar.html'>Solicitar un usuario</a>";}
else
{
//ese usuario ya esta registrado y entonces me fijo si el password es correcto
   while ($registro = mysql_fetch_array($result)){ 
      if ($registro['password']==$clave) { 
              echo "<h1>Bienvenido al sistema</h1>";
              echo "<h2>2016</h2>";
            } 
      else 
          { echo "<p>Contraseña incorrecta</p>";}
   }
}
include('cierra_conexion.php'); 
?>

Crear un formulario utilizando PHP

Aquí voy a explicar los mínimos conocimientos que se necesitan para crear un formulario simple utilizando lenguaje HTML y procesarlo con PHP.

Primero, es importante saber que el lenguaje PHP se puede ejecutar únicamente en un servidor.

Es decir, si nunca hiciste nada con PHP, y no tenés una página web subida en un hosting con acceso por FTP, vas a necesitar comenzar por un tutorial de “Primeros pasos en PHP“, o un poco más difícil los que se explican en “La manera correcta”

Es decir que empezamos pensando que ya hiciste algún programita mínimo con PHP.

También, que ya practicaste un poco creando un formulario que no utilice PHP.

Primer paso, el formulario

Para crear un formulario de contacto, por ejemplo, vamos a necesitar dos archivos. En uno va a estar el formulario en sí, en lenguaje HTML. Este podría ser el código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Enviar mensaje</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<form action="enviamail.php" method="post" id="formulario_contacto">
 <label for="nombre">Nombre</label>
 <input name="nombre" id="nombre" type="text" size="40" value=" " />
 
 <label for="correo">Correo electrónico</label>
 <input name="correo" id="correo" type="text" size="40" value=" " />
 
 <label for="mensaje">Escriba su mensaje</label>
 <textarea name="mensaje" id="mensaje" rows="5" cols="30" ></textarea>
 
 <div><input name="enviar" id="enviar" type="submit" value="Enviar mensaje" /></div>
 </form>
</body>
</html>

Los encabezados de HTML y tipo de codificación son obligatorios para crear un documento válido. La parte del formulario comienza en la sentencia form, y en la acción se utiliza el nombre del archivo que va a procesar el formulario (enviarmail.php), que está en lenguaje PHP.

Segundo paso, el programa que procesa los datos del formulario

Este archivo (enviarmail.php) recibe la información enviada al pulsar el botón “Enviar mensaje”. ¿Cómo utiliza esa información? Utilizando $_POST y el nombre del objeto en el formulario. Aquí guardamos los tres valores en tres variables:

$nombre = $_POST[‘nombre‘];
$mail = $_POST[‘correo‘];
$mensaje = $_POST[‘mensaje‘];

Este sería el contenido completo del archivo PHP, al cual le falta mucho trabajo todavía, porque no controla la validez de los datos, no da error si algo sale mal, etc.:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Enviar mensaje</title>
</head>
<body>
<?php
////Tomar el valor recibido y almacenarlo en variables/////
$nombre = $_POST['nombre'];
$mail = $_POST['correo'];
$mensaje = $_POST['mensaje'];
 
///////Configuración del mensaje: destinatario y asunto/////
$mail_destinatario = 'blablablablabla@gmail.com';
$asunto = "Mensaje enviado desde el formulario";
///////Fin configuración//
///En esta próxima línea es donde verdaderamente se envía el mail///
mail ($mail_destinatario, $asunto, $mensaje);
echo "Mensaje enviado"
?>
</body>
</html>

Tercer paso, aprender mucho más

Hacer un formulario que no permita código HTML (para evitar códigos maliciosos), que valide datos (para obligar a completar algunos campos o evaluar el contenido), o que guarde la información de diversas maneras (creando un archivo PDF, un archivo de texto o una base de datos) serán nuestros próximos pasos.

Artículos sobre cómo crear formularios accesibles:

Mi primer formulario: simple pero inútil

Crear un formulario completamente en HTML es bastante sencillo, aunque no es muy útil porque lo único que hace es enviar un mail con un formato plano, sólo si quien utiliza el formulario tiene configurado un cliente de correo, lo cual no es nada habitual en estos días.
Para empezar, se puede copiar el siguiente ejemplo y pegar en un editor de texto, guardando el archivo con extensión .html

<FORM Action="mailto:direccion@blabla.com?Subject=Formulario" METHOD="POST">
 <p>Su nombre:</p>
 <p><INPUT id="Nombre" name="Nombre" type="text"></p>
 <p>Mensaje:</p>
 <p><TEXTAREA name="mensaje" id="mensaje"></TEXTAREA></p>
 <INPUT type="submit" value="Enviar el formulario">
 </FORM>

Debemos copiar este código en un archivo de texto plano (no un procesador de textos sino un editor como Geany o el bloc de notas) y guardarlo con extensión .html. Después, hacemos doble clic en ese archivo y se abrirá el formulario en el navegador.

Formulario inútil visto en el navegador

La estructura del formulario es:

<FORM Action=……..aquí la acción que realizará el formulario……….. METHOD=”POST”>

……….aquí los elementos del formulario: botones, textos simples, áreas de texto….

</FORM>

En el primer renglón se define la acción que se realizará al pulsar “Enviar”. En este caso se intentará enviar un mail (Mail To = mailto) a la dirección indicada, con un asunto (Subject):

<FORM Action=”mailto:direccion@blabla.com?Subject=Formulario” METHOD=”POST”>

Después se define un cuadro de texto simple (type=”text”), de un solo renglón:

<p>Nombre:</p>
<p><INPUT id=”Nombre” name=”Nombre” type=”text”></p>

Y otro cuadro de texto pero de múltiples líneas (TEXTAREA):

<p>Mensaje:</p>
<p><TEXTAREA name=”mensaje” id=”mensaje”></TEXTAREA></p>

El último elemento es el botón “Enviar” (type=”submit”), que realizará la acción indicada en la apertura del formulario:

<INPUT type=”submit” value=”Enviar el formulario”>
</FORM>

Este formulario es bastante inútil porque el navegador puede intentar abrir una ventana en un cliente de correo electrónico que no esté configurado, pero es la primera aproximación para comprender cómo funcionan. Para hacer un formulario que realmente sirva, el próximo post muestra un primer paso para crear un formulario PHP.

Artículos sobre cómo crear formularios accesibles:

No puedo recuperar una carpeta de la papelera en Huayra

¿Cómo desborrar un archivo cuando la papelera te da error?

Me escribió mi queridísima amiga Lata pidiéndome que ayude a una colega (a quien también conozco de diversos intercambios en las redes) porque había perdido una carpeta y la papelera de Huayra no le permitía recuperarla.

Con un poco de ayuda de Pablo Medrano y otro poco de google y los foros de usuarios de Linux, logré guiarla para que recupere su carpeta. Comparto los pasos para otros usuarios que se encuentren en la misma situación:

Primer paso: acceder a la terminal

En el menú de Huayra, opción Accesorios, está la opción Terminal.

Para usar la terminal hay que entender un poquitito algunas cosas. Por ejemplo, si apretás enter muchas veces te repite lo que está a la izquierda, es porque eso que está a la izquierda es lo que se muestra cuando ya se terminó una tarea y la computadora está a la espera de una orden:

alumno@huayra:/$
alumno@huayra:/$
alumno@huayra:/$

Al lado del signo pesos vamos escribiendo las órdenes. Por ejemplo, si allí ponemos una ele y una ese con minúscula (“ls”), y luego presionamos la tecla Enter, vamos a ver un listado de archivos y carpetas:

archivos listados con ls

y luego volvemos a ver el mismo texto que antes, y si pulsamos enter varias veces, se va para arriba lo que nos listó antes:

cuando apretamos enter se repite el prompt

 

Esto significa que si hacemos las cosas bien, o al menos, si no hay mensaje de error pero aparece otra vez esto de la izquierda (el prompt), es porque ya se ejecutó la orden que pedimos y la terminal está esperando una nueva orden.

En cambio si ponemos algo mal, habrá un error (podés probar poniendo, en lugar de “ls”, “lssss”)

Segundo paso: entrar a la papelera desde la terminal

El comando para cambiar de carpetas (directorios) en la terminal es “cd” (Cambiar Directorio). Para entrar a la papelera podemos poner paso a paso esto, exactamente, es decir que cuando vamos a entrar a la carpeta local debemos empezar con un punto, y cuando vamos a entrar a la carpeta Trash empezamos con una T mayúscula:

cd /home (enter)
cd alumno (enter)
cd .local (enter)
cd share (enter)
cd Trash (enter)
cd files (enter)

Si hicimos las cosas bien, al presionar enter varias veces nuestro prompt va a terminar en files$

 

¡Ya estamos adentro de la papelera!

Ahora podemos ver todo lo que tenemos allí, poniendo el primer comando que usamos, que es para listar archivos:

ls (enter)

Si te pasa como a mí que tengo miles de cosas eliminadas, podés pedirle que te muestre solamente las que empiezan con determinadas letras, por ejemplo, si la carpeta que perdiste (o el archivo) se llama “escuela”, podés poner que te liste todo lo que empieza con “escu” usando el siguiente comando:

ls escu* (enter)

Tercer paso: copiar el archivo desde la papelera hasta otra carpeta

Esto varía si se trata de un archivo o de toda una carpeta.

Si es un archivo, hay que usar la orden “copiar”, que es “cp”. Después hay que decirle qué cosa copiar y por último dónde copiarlo. Es decir que vamos a usar un comando que tiene tres partes:

cp quécosa dondecopiarlo

Por lo tanto vamos a poner un espacio después de “cp”, y un espacio después de “qué cosa copiar”.

Siguiendo el ejemplo vamos a copiar los archivos que comiencen con “escu”, a la carpeta Documentos (con letra “D” mayúscula) del usuario alumno:

cp escu* /home/alumno/Documentos

Si todo salió bien debe volver a poner lo mismo de siempre, el prompt que termina con signo pesos. Si dio error, habrá que volver a intentar cuidando que haya un espacio después de “cp”, y un espacio después del asterisco, y cuidando exactamente las mayúsculas y las minúsculas de los nombres de archivos y carpetas.

Si lo que queríamos recuperar es una carpeta

El procedimiento es exactamente el mismo, pero después de “cp” se escribe “-r” (menos erre):

cp -r escu* /home/alumno/Documentos

Si nuestro archivo o carpeta tiene un espacio

Supongamos que lo que eliminamos es un archivo que se llama “escuela 2015”, entonces tenemos que poner entre comillas el nombre:

cp "escuela 2015" /home/alumno/Documentos

Y si es una carpeta le agregamos -r

cp -r "escuela 2015" /home/alumno/Documentos

¿Y cómo sé que se recuperó mi archivo o carpeta?

Simplemente, accedo como de costumbre a la carpeta Documentos y ahí la voy a ver:


carpeta recuperada