Você está na página 1de 10

Crea una aplicación sencilla con

HTML5
Con Javascript 1.5 y CSS3
HTML5 es la quinta revisión importante del lenguaje de las páginas web,
establece una serie de nuevos elementos y atributos que reflejan el uso
típico de los sitios web modernos. En este artículo aprenderás a crear una
calculadora sencilla gracias a las tecnologías HTML5, Javascript y CSS.

Gracias a la tecnología HTML5 puedes crear la estructura y el contenido de la


página web de manera mucho más completa. Si a esta le añades elementos
CSS3 y Javascript, el resultado es mucho más llamativo debido a que
conseguirás sitios dinámicos. Con el conjunto de estas tres tecnologías puedes
crear aplicaciones web completas, y un ejemplo de ello son los servicios de
correo electrónico online, como Gmail de Google, Hotmail de Microsoft, etc. En
este artículo aprenderás a realizar tu primera aplicación web en HTML5, una
calculadora.

PAS0 1 Crear la primera página en HTML5


Una buena manera para comenzar a realizar tu aplicación web es que
aprendas a crear una página HTML5 en blanco. Es decir, una que contenga las
etiquetas mínimas y necesarias y que, además, sea validada como tal.

Abre un editor de textos

Para empezar necesitas un editor de textos para escribir código HTML. Puedes
utilizar los que vienen por defecto en cada sistema operativo, siendo Notepad
para Microsoft Windows, TextEdit para Mac OS X y para Ubuntu Linux está
Gedit. También en internet existe una gran cantidad de ellos para todos los
sistemas operativos actuales.

Escribe tu primer documento en HTML5

Una vez escojas tu editor de textos preferido, ábrelo y escribe lo que


encontrarás en el archivo de texto Código 1 en el CD.
<!doctype html>  

1
<html>  

    <head>  

      <meta http­equiv="Content­Type" content="text/html; charset=UTF­
8" /> 

      <title>Plantilla en blanco</title>

    </head>

    <body>  

    </body>

</html>

Con el elemento <!doctype html> (1) defines el tipo de documento. Dicho


elemento le indica al navegador la versión y tipo de HTML empleado en el
documento, en este caso sería HTML5. Con esto, el navegador usará el
modelo de renderización adecuado al tipo de documento. Si no lo especificas
este interpretará el código HTML escrito le parezca mejor. Se obtendrán
resultados distintos de esta forma, incluso en dos sesiones de un mismo
navegador. Por lo tanto, lo mejor es que siempre definas con exactitud el tipo
de documento. Con el elemento html delimitas el documento HTML e indicas al
navegador el comienzo de la página HTML. Sus etiquetas son:<html> (2),
ponlo siempre después de la especificación del tipo de documento, y </html>
(3) siempre al terminar el documento.

Para este y todos los demás, es necesario delimitar obligatoriamente el


comienzo y el fin de un elemento mediante etiquetas. La sintaxis es
<nombre_elemento> para una etiqueta de fin. La única etiqueta que no hace
falta es <!doctype html>. Si entre dichas etiquetas no vas a introducir texto
puedes escribirlo también de la siguiente manera: <nombre elemento />.

El elemento head (4) tiene la función de delimitar la cabecera del documento.


La cabecera es la sección apropiada para que incluyas información sobre el
documento, la mayoría de la cual no será mostrada. Para incluir esta
información tienes diversos elementos, de momento sólo comentaremos los
dos más portantes: meta y title. Title indica el título del documento y meta se
utiliza especificar información sobre el prototipo documanto. Un detalle
importante: el atributo charset=”UTF-8" especifica que el documento sigue la
codificación UTF-8, que es un formato Unicode.

Por último el elemento body (5) delimita el cuerpo del documento.


2
Guarda el archivo y valídalo

Conocido los elementos y cómo se forma una página web HTML5, guarda
dicho documento con una extensión html, un ejemplo sería plantilla.html
Ejecuta el archivo y verás tu navegador con una pantalla en blanco. Por último,
para validar tu documento HTML5, entra desde tu navegador favorito a
validator. w3.org. Verás una serie de pestañas, pulsa en Valídate by File
Upload. A continuación pulsa en el botón Choose File y elige el archivo donde
hayas guardado el documento creado anteriormente.

Pulsa en el botón Check. Si todo ha salido en orden te aparecerá una frase


titulada This document was successfully checked as HTML5!

PAS0 2 Crea la estructura


Una vez que has validado tu primera página HTML5 es hora de empezar a
programar la estructura de tu calculadora.

Haz un boceto inicial

Antes de empezar a realizar una aplicación en HTML5 debes preguntarte cuál


es la finalidad de la aplicación y con qué elementos vas a llegar a esos
objetivos. Puedes hacer una aplicación sencilla o una aplicación compleja, en
este caso se optará por la creación de una calculadora simple. En este caso
serían dieciocho elementos: diez botones para los números, siete botones para
las operaciones y una pantalla para la muestra de los resultados.

Escribe el código

Existen muchas maneras de codificar el boceto planificado. En este caso se


utilizará principalmente la etiqueta div, que permite la inserción de zonas donde
el usuario pueda interactuar. Para hacer la estructura de una calculadora
escribe el código del archivo Código 2.
<!doctype html>

<html>

<head>

  <title>Calculadora</title>

3
  <meta http­equiv="Content­Type" content="text/html; charset=UTF­
8" />

  <link rel="stylesheet" type="text/css" href="src/css/estilo.css" />

  <script type="text/javascript" src="src/js/calculadora.js"></script>

</head>

<body>

  <div id="fondo"></div>

  <input type="text" id="pantalla" />

  <div id="numero0" class="boton">0</div>

  <div id="numero1" class="boton">1</div>

  <div id="numero2" class="boton">2</div>

  <div id="numero3" class="boton">3</div>

  <div id="numero4" class="boton">4</div>

  <div id="numero5" class="boton">5</div>

  <div id="numero6" class="boton">6</div>

  <div id="numero7" class="boton">7</div>

  <div id="numero8" class="boton">8</div>

  <div id="numero9" class="boton">9</div>

  <div id="ope_mas" class="boton">+</div>

  <div id="ope_men" class="boton">­</div>

  <div id="ope_por" class="boton">x</div>

  <div id="ope_div" class="boton">/</div>

  <div id="ope_dec" class="boton">.</div>

  <div id="ope_res" class="boton">=</div>

  <div id="ope_bor" class="boton">C</div>

</body>

4
</html>

Con <link rel="stylesheet" type="text/ css" href="src/css/estilo.css" />


importas la hoja de estilo CSS3 con extensión .css, y con <script
type="text/javascript" src="src/js/ calculadora.js"x/script> importas el
archivo Javascript que hace a la web dinámica.

Para que los archivos se importen correctamente crea una carpeta llamada src
y, dentro de ella, dos subcarpetas tituladas css y js. En la primera creas un
archivo de texto con nombre estilo. css y, en la segunda, creas otro
denominado calculadora.js. El atributo id
determina la identificación de cada uno de los
componentes y el atributo class especifica la
clase del elemento. Esto se utilizará tanto
para aplicar una apariencia a la página como
para hacerla dinámica.

Guarda y ejecuta

Una vez que hayas copiado el código,


guárdalo como index.hml, valídalo y
ejecútalo. Si ha ido bien, verás una caja de
texto seguida de varios números y caracteres
de operación, No te preocupes por cómo se ve, eso es porque ahora tienes que
darle una apariencia.

PAS0 3 Toques finales


Llega el momento de introducir el código final que hará que tu aplicación se
convierta en una calculadora completa y, además, con un aspecto muy
llamativo.

Piensa en cómo te gustaría decorar tu aplicación

Existen muchas formas de hacer visible al usuario la estructura de tu


documento HTML5. Cada elemento puedes modificarlo como a ti más te guste,
y la combinación de todas estas personalizaciones hace que cada página web
sea diferente. Si es necesario, dibuja con lápiz y papel un esbozo de lo que te
gustaría que fuera tu página web.

Escribe el código
El código de un archivo CSS puede llegar a resultar muy extenso. En este
caso, se ha elegido una configuración sencilla. Para aplicar un estilo a tu
5
página copia utiliza el código del archivo Código 3 con tu editor de textos. Una
vez que hayas copiado el código, guárdalo como estilo.css valídalo en
jigsaw.w3.org/ css-validator y ejecuta index.html. Si todo ha ido bien, verás
una calculadora. Como podrás observar, el resultado es bien diferente, ahora
es agradable a la vista. Sin embargo, no está operativa, para ello es necesario
añadirle funcionalidades con Javascript.
* {

  position: absolute;

  ­webkit­user­select:none;

  ­moz­user­select:none;

  user­select: none;

body {

  margin: 0;

  padding: 0;

  background­color: #ffffff;

#fondo {

  width: 310px; height:412px;

  left: 0px; top: 0px;

  background­color: #D5DED9;

  border­radius: 30px;

  border: solid 5px #050E09;

.boton {

  text­align: center;

  cursor: pointer;

  font: 54px arial, sans­serif;

6
  height: 60px;

  width: 60px;

  border: solid 3px black;

  border­radius: 5px;

  background­color: #99B2B7;

#pantalla {

  left: 23px; top:27px;

  font: 40px arial, sans­serif;

  text­align: right;

  height: 60px;

  width: 191px;

  border: solid 3px black;

  border­radius: 5px;

  background­color: #99B2B7;

#numero0 {left: 23px; top: 324px;}

#numero1 {left: 23px; top: 254px;}

#numero2 {left: 91px; top: 254px;}

#numero3 {left: 159px; top: 254px;}

#numero4 {left: 23px; top: 184px;}

#numero5 {left: 91px; top: 184px;}

#numero6 {left: 159px; top: 184px;}

#numero7 {left: 23px; top: 114px;}

#numero8 {left: 91px; top: 114px;}

#numero9 {left: 159px; top: 114px;}

#ope_mas {left: 228px; top: 324px;}

#ope_men {left: 228px; top: 254px;}

7
#ope_por {left: 228px; top: 184px;}

#ope_div {left: 228px; top: 114px;}

#ope_dec {left: 91px; top: 324px;}

#ope_res {left: 159px; top: 324px;}

#ope_bor {left: 228px; top: 27px; height: 66px;}

Hazlo funcionar con javascript

Una vez creada la interfaz de la aplicación es necesario que añadas lo más


importante, la funcionalidad. Javascript es lenguaje muy potente, sin embargo
cada navegador lo interpreta a su manera y existen pocas declaraciones que
funcionen en todos los navegadores. Por eso, es recomendable que pruebes
esta aplicación en todos los navegadores modernos.

Escribe el código

Para aplicar funcionalidad a tu página copia el código del archivo Código 4.


Una vez que hayas copiado el código, guárdalo como calculadora.js y, ahora,
ejecuta index.html. Si todo ha ido bien verás de nuevo la calculadora.
Comprueba que todos los botones responden y que la calculadora funciona. Si
es así es que ya has creado tu primera aplicación HTML5. Si quieres aprender
más sobre esta tecnología empieza 'trasteando' la aplicación. Modifica partes
del código y cámbialas por| otras, alterna diferentes valores, intenta añadir
funcionalidades, etc. De esta forma, conocerás más profundan el mundo de los
estándares web y tendrá algunos conocimientos del estándar que acabará por
imponerse en Internet.
document.addEventListener("DOMContentLoaded", iniciar, false);

function iniciar()

  document.getElementById("numero0").addEventListener('mousedown', 
function(){ponerDigito('0');}, false);

  document.getElementById("numero1").addEventListener('mousedown', 
function(){ponerDigito('1');}, false);

  document.getElementById("numero2").addEventListener('mousedown', 
function(){ponerDigito('2');}, false);

  document.getElementById("numero3").addEventListener('mousedown', 
function(){ponerDigito('3');}, false);

8
  document.getElementById("numero4").addEventListener('mousedown', 
function(){ponerDigito('4');}, false);

  document.getElementById("numero5").addEventListener('mousedown', 
function(){ponerDigito('5');}, false);

  document.getElementById("numero6").addEventListener('mousedown', 
function(){ponerDigito('6');}, false);

  document.getElementById("numero7").addEventListener('mousedown', 
function(){ponerDigito('7');}, false);

  document.getElementById("numero8").addEventListener('mousedown', 
function(){ponerDigito('8');}, false);

  document.getElementById("numero9").addEventListener('mousedown', 
function(){ponerDigito('9');}, false);

  document.getElementById("ope_mas").addEventListener('mousedown', 
function(){ponerDigito('+');}, false);

  document.getElementById("ope_men").addEventListener('mousedown', 
function(){ponerDigito('­');}, false);

  document.getElementById("ope_por").addEventListener('mousedown', 
function(){ponerDigito('*');}, false);

  document.getElementById("ope_div").addEventListener('mousedown', 
function(){ponerDigito('/');}, false);

  document.getElementById("ope_dec").addEventListener('mousedown', 
function(){ponerDigito('.');}, false);

  document.getElementById("ope_res").addEventListener('mousedown', 
resolver, false);

  document.getElementById("ope_bor").addEventListener('mousedown', 
borrar, false);

function ponerDigito(digito)

  document.getElementById("pantalla").value += digito;

function borrar()

  document.getElementById("pantalla").value = "";
9
}

function resolver()

  document.getElementById("pantalla").value = 
eval(document.getElementById("pantalla").value);

La calculadora en Internet

Una vez hayas modificado el ejercicio es hora de que otros usuarios puedan
utilizar tu calculadora en la red.

Para ello crearemos una carpeta con tu nombre en el servidor del instituto y
con un programa ftp lo subiremos al servidor para que se pueda utilizar.

Tu aplicación se encontrará en: www.simondecolonia.net/cv/tu_nombre y se


podrá utilizar en cualquier parte del mundo.

10

Você também pode gostar