Programación

Actualizar C en MacOSX

publicado a la‎(s)‎ 7 ago. 2017 9:01 por Juan Jose Ramirez Lama   [ actualizado el 11 oct. 2017 14:24 ]

Lo primero que debemos hacer es instalar Xcode and the Xcode Command Line Tools
xcode-select --install

Acepta los términos de licencia en la terminal
sudo xcodebuild -license
Aparecerá la licencia, con espacio baja hasta el final y teclea agree.

Luego instalar MacPort
Luego, en la terminal escribe:
sudo port -v selfupdate
Pon la contraseña y espera que actualice.

Ahora instalamos la última versión estable de GCC (hasta el momento de la escritura de este manual es la 6)
sudo port install gcc6
Esto tardará unas horas en terminar, así que paciencia

Ahora queda solo predeterminar que compile con esta última versión
sudo port select gcc mp-gcc6
hash gcc
Con esto quedará predeterminado el nuevo gcc, si deseas volver a la versión por defecto, cambia mp-gcc6 por none.

Apple Swift en GNU/Linux Debian Jessie

publicado a la‎(s)‎ 31 may. 2016 13:22 por Juan Jose Ramirez Lama   [ actualizado el 11 oct. 2017 14:27 ]

Primero aclarar que lo he hecho con la versión estable de Swift la cual se puede descargar en https://swift.org/download/ ya que la versión inestable o beta no se por que no funcionaba, aunque puede que en el momento de que leas esto ya funcione sin problemas.

Primero abrir una terminal como root
# cd /opt
# mkdir -p /opt/swift/build
# cd /opt/swift/build

Ahora descargamos y descomprimimos los paquetes para programar en Swift, el cual no hay que compilar ya que vienen listos para ejecutar (recuerda cambiar el nombre del paquete por el que descargues).
# wget https://swift.org/builds/swift-2.2-release/ubuntu1404/swift-2.2-RELEASE/swift-2.2-RELEASE-ubuntu14.04.tar.gz
# tar zxvf swift-2.2-RELEASE-ubuntu14.04.tar.gz
# mv swift-2.2-RELEASE-ubuntu14.04 /usr /opt/swift/

Ahora verificamos que en /opt/swift/ este el directorio usr
$ ls /opt/swift

Una vez que confirmamos que este dentro, añadiremos el siguiente parámetros, para que cuando escribamos swift en la terminal, se abra el editor (hacer esto como usuario).
$ export PATH=/opt/swift/usr/bin:"${PATH}"

Ahora actualizamos los repositorios e instalamos las dependencias necesarias.
# apt-get update
apt-get install curl gcc sqlite3 git-core libffi-dev python-setuptools  python-dev python-pip

Listo, ahora solo queda ejecutar swift para que se abra el editor y podamos comenzar a ejecutar código o compilar algún archivo .swift.
$ swift
Welcome to Swift version 2.2 (swift-2.2-RELEASE). Type :help for assistance.
  1> 1 + 1  
$R0: Int = 2

Como crear un Script

publicado a la‎(s)‎ 13 oct. 2015 7:47 por Juan Jose Ramirez Lama   [ actualizado el 11 oct. 2017 14:27 ]

Un bash script es un pequeño programa escrito en el lenguaje de nuestra consola bash. Es una herramienta muy potente y util que sirve principalmente para automatizar tareas comunes que hacemos de forma manual.

¿Cómo se hacen los bash script?

Lo primero es indicar el lugar donde se encuentra nuestra bash, por defecto se esta en /bin/bash. Esto lo hacemos del siguiente modo #! /bin/bash .#! -> con ésto le decimos a nuestra consola donde se encuentra un determinado programa, en este caso, nuestra propia shell. Tras ésto empezamos con las sentencias.


Podemos usar estructura de control (if, else, while, until ...) y variables al igual que en la mayoria de los lenguajes de programación. Las variables son fuertemente tipadas (una vez definido su tipo no podra cambiarse) y no hay que especificar su tipo (la shell es la encargada de esa labor).


Las instrucciones que podemos emplear son las mismas que empeariamos en nuestra consola, pongo un ejemplo de un script sencillito que nos actualiza el sistema:

#! /bin/bash
sudo aptitude update & sudo aptitude upgrade & sudo aptitude dist-upgrade


Abrimos nuestro editor de texto preferido (por ejemplo gedit) y copiamos ese script, lo guardamos por ejemplo con el nombre de Actualizar.sh

Para ejecutarlo podemos hacer lo siguiente, desde la consola nos situamos en el directorio donde guardamos el script y tecleando sh Actualizar.sh lo ejecutamos. Es posible que no tengamos permisos de ejecucion para ese script y lo solucionamos tecleando en consola:

$ chmod +x Actualiza.sh


Si integrar nuestro script en el sistema de forma que podamos llamarle desde cualquier lugar y poniendo solo su nombre, lo movemos a la carpeta /bin
Hecho eso, bastara con poner Actualiza.sh desde cualquier lugar para que se ejecute.


Al igual que en la consola podemos usar tuberias, esto es pasarle la salida de un comando a otro. Para ello usamos este simbolo | un ejemplo:

ls -F | grep "/"

Este comando mostrara en pantalla sólo directorios. ls -F muestra todos los archivos añadiendo al final de cada directorio el caracter espaciador (/). grep toma la salida de ls -F y filtra todos los archivos que contengan el carácter /


Podemos mostrar la salida de un programa por otro medio que no sea el estándar (pantalla) por ejemplo a un archivo. Para ello usamos el caracter > . Por ejemplo:

ls --all > archivoss.txt

Esto creara un archivo llamado archivos.txt conteniendo el resultado de ls --all

Del mismo modo con el caracter Esta es la estructura de control mas basica. Evalúa una condición y ejecuta un código dependiendo de si la condición es verdadera o falsa. La sitaxis es la siguiente:
if [ condición booleana]; then
sentencias
fi


Adicionalmente podemos usar la sentencia else que ejecuta codigo en caso de que la condicion no se cumpla:

if [condicion booleana]; then
sentencias
else
sentencias
fi

Podemos anidar varios else, del siguiente modo:

if [condicion booleana]; then
sentencias
elif [condicion booleana]; then
sentencias
else
sentencias
fi

Un ejemplo que ilustra el uso de este tipo de estructuras de control:

#!/bin/bash
A="hola"
B="buenas"
if [ "$A" = "$B" ]; then
echo Ambos son iguales
elif [ "$A" = "Buenos dias"] then
echo -e "$A vale buenos dias"
else
echo Ambos son distintos
fi


Otro tipo de estructura de control es el while. Este bucle se ejecuta indefinidamente mientras la condicion sea cierta. Esta es la sintaxis:

while [condicion booleana]; do
sentencias
done

Ejemplos:

#!/bin/bash
CONTADOR=0
while [ $CONTADOR -lt 10 ]; do
echo El contador es $CONTADOR
let CONTADOR=CONTADOR+1
done

Para que veais lo sencillo que resulta hacer un script os voy a dejar uno que pide una fecha y muestra un calendario de la fecha:

#!/bin/bash
var1="Introduzca un anio"
var2=$(zenity --entry --text "$var1")
var3=$(zenity --entry --text "Introduzca un mes")
var4=$(zenity --entry --text "Introduzca un dia")
zenity --calendar --year "$var2" --day "$var4" --month "$var3"


HolaMundo.sh

#! /bin/bash
clear
echo “Hola mundo ,este es mi primer script!!!!”

ScriptUno.sh
#! /bin/bash
clear
nombre=”Manolo el del”
apellidos=”Bombo”
echo “Te llamas $nombre $apellidos”

Fecha.sh
#! /bin/bash
clear
fecha=`date | cut -d ” ” -f 1,2,3`
hora=`date | cut -d ” ” -f 4`
echo “Hoy es $fecha y son las $hora”

OtroScript.sh
#! /bin/bash
clear
# IFS es una variable de entorno que determina el delimitador de campos
# (que por defecto vale ” “),en este script queremos
# cambiarlo a “,” para escribir por teclado nombre,apellidos
IFS=”,”
read -p “Introduce el nombre,apellidos : ” nombre apellidos
echo “El nombre es $nombre y los apellidos son $apellidos”


Lisp en Mac OSX

publicado a la‎(s)‎ 19 abr. 2015 18:05 por Juan Jose Ramirez Lama   [ actualizado el 11 oct. 2017 14:25 ]

Lisp (o LISP) es una familia de lenguajes de programación de computadora de tipo multiparadigma con una larga historia y una sintaxis completamente entre paréntesis.

Lisp fue creado originalmente como una notación matemática práctica para los programas de computadora, basada en el cálculo lambda de Alonzo Church. Se convirtió rápidamente en el lenguaje de programación favorito en la investigación de la inteligencia artificial (AI). Como uno de los primeros lenguajes de programación, Lisp fue pionero en muchas ideas en ciencias de la computación, incluyendo las estructuras de datos de árbol, el manejo de almacenamiento automático, tipos dinámicos, y el compilador auto contenido.

Para instalarlo, lo primero que necesitamos es Homebrew, podemos instalarlo desde una terminal con el siguiente comando:
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Una vez instalado homebrew, la instalación es sencilla, en la misma terminal teclea:
$ brew install clisp

Una vez instalado podemos iniciar lisp desde la misma terminal tecleando:
$ clips

Compilador C/C++ en Mac OSX

publicado a la‎(s)‎ 19 abr. 2015 15:45 por Juan Jose Ramirez Lama   [ actualizado el 11 oct. 2017 14:25 ]

Es necesario instalar Xcode  y aceptar la licencia de uso.

Luego debemos abrir una terminal y teclear lo siguiente:
$ xcode-select --install
Este comando instalará el paquete command line tools el cual nos permitirá compilar en C/C++.

O también podemos instalar command line tools desde el mismo Xcode, para eso debemos ir a la siguiente ruta:
Menú Xcode > Preferencias > Descargas > Elegir "Command line tools" > hacer clic en el botón  "Instalar":

Desde la terminal podemos verificar la instalación:
$ gcc --version
$ g++ --version
$ whereis gcc
$ whereis make

Luego de que todo este correcto, podemos des-instalar Xcode si es que no lo usamos (yo lo hice).


Probando

Para compilar en C:

Código de ejemplo:
echo "#include<stdio.h> int main(void){ printf("hola mundo\n");  return 0;}">fuente.c

$ gcc fuente.c -o ejecutable
./ejecutable

Otra forma de compilar es usando make
$ make fuente
./fuente

Para compilar en C++:

Código de ejemplo:
echo "#include<iostream> using namespace std; int main(void){ cout<<"hola mundo\n"; return 0;}">fuente.cpp

$ g++ fuente.cpp -o ejecutable
./ejecutable

Otra forma de compilar es usando make
$ make fuente
./fuente

Solucionar Problema al compilar en C++:

$ echo '#define _LIBCPP_ASSERT(x, m) ((void)0)' | sudo tee -a /Library/Developer/CommandLineTools/usr/include/c++/v1/__debug > /dev/null



Compilador C/C++ para linux

publicado a la‎(s)‎ 19 abr. 2015 15:21 por Juan Jose Ramirez Lama   [ actualizado el 11 oct. 2017 14:27 ]

Desde una terminal debes teclear lo siguiente para poder compilar en C o C++:
sudo apt-get -y install make build-essential

Para compilar en C:
$ gcc fuente.c -o ejecutable
./ejecutable

Para compilar en C++:
$ g++ fuente.cpp -o ejecutable
./ejecutable

Instala la última actualización de Java 8 sin Adware en Mac

publicado a la‎(s)‎ 9 mar. 2015 10:07 por Juan Jose Ramirez Lama   [ actualizado el 11 oct. 2017 14:25 ]

La operativa es muy sencilla, tan sólo tendremos que bajarnos la imagen directamente desde la página web oficial a través de este enlace, una vez que la tengamos abierta nos aparecerá una ventana con el icono para proceder a la instalación.

Instalar java sin adware 1 Instala la última actualización de Java sin la dichosa barra de Ask.com

En vez de ejecutar dicho instalador, pulsaremos encima de el mismo con el botón derecho o haciendo CMD+Clic para mostrar el menú auxiliar y elegiremos “Mostrar contenido del paquete”. 

El siguiente paso ya dentro de la ventana donde nos aparecerá la carpeta “Content”, la abriremos y podremos ver distintas carpetas, la que nos interesa es Resources ya que una vez dentro de esta carpeta tendremos que localizar el archivo llamado “JavaAppletPlugin.pkg”. 

Instalar-java-sin-adware-2

Lo último que nos quedaría por hacer es ejecutar dicho archivo con el botón derecho > abrir o si Gatekeeper no nos permitiera su ejecución, simplemente cambiando las opciones de seguridad desde el panel de preferencias o permitiendo su ejecución, sería suficiente. 

A partir de este punto solo es instalar el plug-in como lo haríamos normalmente y ya tendremos actualizado Java sin haber pasado por el aro de la dichosa barra.


Fuente

9 cosas que deberías saber del mundo de la informatica

publicado a la‎(s)‎ 27 feb. 2015 20:03 por Juan Jose Ramirez Lama   [ actualizado el 11 oct. 2017 14:26 ]

1. La informática no es fácil

Estudiar una ingeniería informática requiere entre tres y cinco años. Una formación profesional específica requiere más o menos dos años. Aprender informática por cuenta propia también toma una gran cantidad de tiempo. Que no le tome el pelo ningún vendedor astuto, la informática no es fácil.

Aun usando los sistemas más sencillos del mundo, un ordenador es una máquina extremadamente compleja y que consta de decenas de elementos diferentes. Para poder usar un ordenador, necesitará saber qué es un disco duro, deberá aprenderse algunas abstracciones comunes, relacionar dibujos y símbolos con acciones o programas y también necesitará adquirir algo de vocabulario

Existen otros dispositivos más simples y más específicos que son más sencillos de usar. Agendas de mano o PDA's, reproductores de música o incluso teléfonos móviles no son más que ordenadores reducidos y simplificados; al estar recortadas sus funciones también se ve disminuida la dificultad de uso

Sin embargo, aprender a usar un ordenador con cierta soltura es una gran inversión de la que no se arrepentirá, y además no requiere la habilidad manual que se precisa para conducir un coche

2. Internet no es más que un sistema de interconexión e intercambio de información

Internet no hace que la gente se suicide ni se vuelva pedófila. Esto es tan estúpido como pensar que los culpables de las muertes por arma blanca son los propios cuchillos, en lugar de la gente que los empuña.

Gracias a la rapidez de las comunicaciones mediante internet, uno puede acceder a casi toda la información existente en la tierra sin salir de su propia casa. Esa información está allí porque una persona la puso en ese lugar. «Internet» no es más que el cable que une a dos humanos

3. Los «hackers» no son terroristas informáticos

Esto no es más que un error lingüístico. Un «hacker» es el adjetivo que se usaba en los años 70 para aquellos entusiastas de los primeros sistemas informáticos que se dedicaban a analizarlos y mejorarlos. Alguien empezó a usar esta palabra con un significado diferente, que desgraciadamente es el más extendido hoy día

Para ello se creó una palabra: «cracker», referida a aquellas personas que usan internet con fines delictivos.

4. A los informáticos nos gusta ayudar, pero no el trabajar gratis

En nuestro país hay cierta cultura del «amigueo» y se acostumbra a pedir ayuda a familiares y conocidos en lugar de pagar a profesionales. Todos tenemos que tragar hasta cierto punto, aunque los informáticos estamos en desventaja. ¿Por qué? Porque una cocina alicatada o una instalación eléctrica no se cae a trozos al cabo de seis meses.

Si pide consejo a un amigo informático, haga caso de lo que le dice. Nada nos enfada más que decir a una persona «no uses el programa X» y que nos llamen al cabo de dos semanas porque «el programa X ha hecho que se estropee el sistema»

5. Si no está contento con el sistema Windows, sepa que tiene otras alternativas

Posiblemente su ordenador venga con el sistema Windows preinstalado. Usted debería saber que es un sistema débil, propenso a infectarse de virus que harán que vaya cada vez más lento. Si lleva tiempo usando Windows, seguro que habrá notado que el sistema se ralentiza día a día.

Windows ha creado la idea de que es normal reiniciar un ordenador varias veces al día. Sus usuarios acaban creyendo que debe reinstalar el sistema por completo cada 6-8 meses para que todo funcione más o menos correctamente. Pues bien, esto es un error. La informática no apesta como Windows nos hace creer

No se preocupe, tiene alternativas a ésto. Existen sistemas operativos gratuitos y libres que cumplen las mismas funciones que Windows de forma más eficiente. Puede descargarlos de internet sin coste alguno e instalarlos en su ordenador. Si no sabe cómo hacer ésto, puede pedir consejo a algún amigo. Seguro que estará encantado de ayudarle a olvidar Windows.

También existen soluciones basadas en el sistema Macintosh, pero son mucho más caras que un PC con Windows, aunque realmente funcionan mejor. De todos modos, si necesita usar Windows por fuerza, sepa que también hay procesadores de textos que no son Microsoft Word, hojas de cálculo que no son Microsoft Excel y programas de retoque fotográfico que no son Adobe Photoshop. Al igual que el sistema Linux, puede descargarlos a través de la red de forma gratuita.

6. Enseñe a sus hijos a usar correctamente Internet

Posiblemente sus hijos sepan más informática que usted, no se preocupe. Pero lo que es seguro es que usted tiene más sentido común que ellos.

Si les enseña a no fumar y no aceptar caramelos de desconocidos, ¿por qué no les enseña a usar Internet?. Internet ha conseguido crear una nueva filosofía de comunicación y, como veremos después, entraña algunos riesgos. Si por las calles hay trileros que intentan estafar su dinero, ¿no podrían intentar éstos hacer lo mismo a través de Internet? Desgraciadamente los hay, y debe aprender a defenderse y defender a sus hijos

Recuerde que, como en todos los aspectos de la vida, la educación es lo más importante

7. La seguridad es importante

Olvide todo lo que ha visto en las películas sobre ordenadores. Todo es mentira. Un chaval de quince años no puede acceder a su ordenador si usted toma unas mínimas medidas de seguridad.

Es imprescindible que actualice su sistema una vez a la semana mediante las herramientas que éste le ofrece. Si usa Windows, compre un antivirus y un cortafuegos y active la actualización automática de estos programas. Si usa otros sistemas, posiblemente no necesite el antivirus ni el cortafuegos

Por contra de la creencia general, las mayores amenazas cibernéticas vienen provocadas por errores del propio usuario. Si recibe un correo electrónico de su banco pidiéndole su contraseña, posiblemente le estarán engañando. ¿Verdad que no le diría el PIN de su tarjeta a un desconocido por teléfono? No lo haga tampoco a través de Internet. El 99% de los correos electrónicos que pretenden ayudarle en realidad intentan estafarle.

En caso de duda, telefonee al supuesto emisor del mensaje para que le confirmen en persona esa información

8. Posiblemente usted no necesita un ordenador tan caro como el que le ofrecen

Todos los vendedores intentan venderle lo más caro. Los folletos de propaganda quieren que usted compre en su establecimiento. Aunque en la informática, más que en otras áreas, la calidad se paga, es posible que no necesite una calidad máxima

Si va a usar su ordenador para navegar por internet, escribir documentos y enviar correos electrónicos, puede ajustar enormemente su presupuesto. He visto ordenadores por 400 euros que cumplen perfectamente estas funciones.



Si se va a dedicar a jugar, a la edición de vídeo o a otras tareas que necesiten una máquina potente, priorice los siguientes componentes: El monitor, la memoria RAM y la calidad de la placa base. El resto de componentes seguramente serán adecuados para cualquier uso que les dé.

9. Cuide sus ojos y sus muñecas

Si usa diariamente el ordenador, descanse diez segundos cada diez minutos y tres minutos cada hora.

Todos pensamos que «no me va a pasar a mí» hasta que nos pasa. Un día uno se levanta con dolor en los tendones de las muñecas y los ojos irritados. Entonces la solución es mucho más lenta.

Por ello, en el punto 9 se especifica que el componente más importante de un ordenador es el monitor. No dude en gastarse todo el dinero que haga falta en un buen monitor de buena marca. Los monitores LCD de los portátiles son los mejores y los más caros. Las pantallas "planas" TFT dan muy buenos resultados, y si se compra uno de los tradicionales CRT asegúrese de que el cristal es plano y no abombado. Use reposamuñecas si es posible, la mano donde aparecen primero los dolores acostumbra a ser la que mueve el ratón.

Usando programas como workrave, el propio ordenador puede aconsejarle hacer pequeñas pausas cada poco tiempo. Posiblemente hoy no me hará caso, pero guarde esta dirección para el día que le pase a usted.

Aumentar Memoria en PHP

publicado a la‎(s)‎ 27 feb. 2015 19:42 por Juan Jose Ramirez Lama   [ actualizado el 11 oct. 2017 14:27 ]

Si alguna vez te aparece un aviso de que la memoria de PHP es demasiado baja, puedes aumentarla siguiendo los siguientes pasos:


Abrimos una terminal y tecleamos:

sudo nano /etc/php/7.0/apache2/php.ini

buscamos la línea que diga:

memory_limit = 16M


Luego en esa casilla le cambiamos el valor de 16M (valor por defecto) por uno mas adecuado por ejemplo 64M en mi caso pero otros le dan hasta 128M.


Quedando así por ejemplo:

memory_limit = 128M

Guardamos y cerramos el archivo y Listo, ya no nos dará mas problemas de memoria.

Tutorial rápido de HTML / XHTML

publicado a la‎(s)‎ 27 feb. 2015 19:31 por Juan Jose Ramirez Lama   [ actualizado el 11 oct. 2017 14:26 ]

Este es un pequeño tutorial de HTML (y XHTML) en el que intentaré explicar lo más importante del lenguaje de forma concisa.


HTML son las siglas de HyperText Markup Language (lenguaje de marcado de hipertexto).


La última versión de HTML es HTML 4.01, de Diciembre de 1999, aunque ya existe un borrador de HTML 5, y algunos de los navegadores más populares están empezando a implementar poco a poco parte de este nuevo estándar.


Como su nombre indica, HTML es un lenguaje de marcas, no un lenguaje de programación, es decir, no existe el concepto de variables, condicionales o bucles. Su objetivo no es otro que la creación de documentos, utilizando etiquetas para especificar la estructura y la semántica del contenido (pero NO el aspecto; para esto utilizaremos CSS).


Las etiquetas son palabras o caracteres rodeados por corchetes angulares (el signo menor que, ‘<’, y mayor que, ‘>’). Un ejemplo de etiqueta sería <em> que se utiliza para marcar un texto como enfatizado. Por defecto los navegadores mostrarían este texto enfatizado en cursiva, a menos que indiquemos otra cosa utilizando CSS. El texto que queremos marcar irá entre la etiqueta de inicio <em> y la etiqueta de cierre </em>.

Hola <em>mundo</em>



Por cada etiqueta de inicio, existe una etiqueta de cierre correspondiente, con una barra oblicua después del signo menor que.


Una etiqueta puede contener, además de texto simple, otras etiquetas. En ese caso hay que tener cuidado con cerrar primero la etiqueta que se abrió en último lugar. En este ejemplo se utiliza la etiqueta <p>, que marca el texto etiquetado como un párrafo, y por lo tanto añade un margen antes y después del texto, combinada con la etiqueta <em>

<p>Hola <em>mundo</em></p>


Además las etiquetas pueden tener atributos con los que especificar distintos aspectos relevantes para su funcionamiento. Para crear un enlace, por ejemplo, se utiliza la etiqueta <a>, de anchor, ancla, y su atributohref. El valor del atributo va después del signo igual (=).

Visita <a href="http://mundogeek.net/">Mundo geek</a>



Para que un documento HTML o XHTML sea válido las etiquetas deben seguir un orden y unas reglas determinadas, dependiendo del tipo del documento. Dentro del estándar HTML 4.01 tenemos 3 tipos de documentos: strict, transitional y frameset.


Frameset incluye todas las etiquetas y atributos del estándar, incluidas las que han sido marcadas como obsoletas, y la etiqueta frameset, para crear frames. Para indicar que un documento debe renderizarse teniendo en cuenta las reglas definidas por este tipo, la primera línea del documento deberá ser:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">


Transitional incluye todas las etiquetas del anterior, a excepción de la etiqueta frameset. Para utilizar este tipo la primera línea de nuestro archivo HTML deberá consistir en lo siguiente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


Strict es, como su nombre indica, el tipo más estricto: no acepta la etiqueta frameset, ni las etiquetas y atributos que han sido marcados como obsoletos. Si vamos a utilizar este tipo la primera línea del documento será:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


El tipo de documento puede tener enormes consecuencias en cómo se visualizará la página. Si no indicamos ningún tipo, o indicamos un tipo muy antiguo, el navegador entraría en lo que se conoce como quirks mode (literalmente, modo rarezas), un modo de renderizado pensado para mantener la compatibilidad con las prácticas y los navegadores antiguos. Los doctypes HTML 4.01 transitional y frameset lanzarían el modo de renderizado “casi-estándar” en la mayoría de los navegadores.


Después de la línea de doctype tendremos una etiqueta <html>, utilizada para marcar el principio y fin del documento. Esta contendrá a su vez una etiqueta <head> (la cabeza del documento) y una etiqueta <body> (el cuerpo del documento). Dentro de la etiqueta <head> podemos hacer cosas como indicar la codificación de caracteres mediante la etiqueta <meta> (“simulando” una cabecera HTTP), o el título de la página con la etiqueta<title>, título que se mostrará en la parte superior de la ventana del navegador. Dentro de la etiqueta <body>tendremos el contenido que se mostrará en el navegador.


De esta forma el documento HTML válido más sencillo que podemos encontrar tendría el siguiente aspecto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ejemplo</title>
</head>

<body><p>Hola Mundo</p></body>
</html>


Documento HTML válido


Para probar este documento HTML basta abrir un editor de texto cualquiera, pegar el código, guardar el archivo con extensión .htm o .html, y abrir el fichero resultante en un navegador web. Para que otras personas pudieran ver este archivo, tendríamos que enviárselo de alguna manera, o subirlo a un servidor. Mundo geek, por ejemplo, está alojado en los servidores de RedCoruna (aunque Mundo geek está escrito en un lenguaje de programación llamado PHP, que permite generar HTML de forma dinámica).

Etiquetas HTML de uso común


Podemos añadir comentarios, entre <!-- y -->

<body>
<!-- Saludamos -->
<p>Hola Mundo</p>
</body>


Para asociar una o más hojas de estilo CSS (para definir el aspecto de la página) y un favicon (el icono que se muestra en la barra de direcciones y la pestaña) al documento actual, aunque también tiene otros usos, se utiliza la etiqueta <link>, etiqueta que sólo puede insertarse dentro de <head>. Con el atributo rel se indica el tipo de relación que tiene el documento enlazado con el actual, y con href la dirección en la que se encuentra el documento (que puede ser relativa o absoluta).

<head>
<link rel="stylesheet" href="estilo.css">
<link rel="shortcut icon" href="favicon.ico">
</head>


También se puede utilizar el atributo media para usar un recurso u otro dependiendo del medio que utilice el usuario. En el siguiente código, por ejemplo, utilizamos una hoja de estilo u otra dependiendo de si el usuario está viendo la página en una pantalla de ordenador (screen) o de si está viendo la vista previa antes de la impresión (print)

<head>
<link rel="stylesheet" media="screen" href="estilo.css">
<link rel="stylesheet" media="print" href="imprimir.css">
</head>


También podemos ofrecer al usuario varias hojas de estilo alternativas, teniendo una etiqueta <link> conrel="stylesheet" y otras con rel="alternate stylesheet". En las etiquetas de cada una de las hojas de estilo alternativas añadiremos un atributo title con el nombre tal y como queramos que aparezca en el navegador del usuario.

<head>
<link rel="stylesheet" media="screen" href="estilo.css">
<link rel="alternate stylesheet" media="screen" href="estilo-oscuro.css" title="Oscuro">
</head>


Para incluir un script (en JavaScript u otro lenguaje) se utiliza, cómo no, la etiqueta <script>.

<body><script type="text/javascript">alert('Hola mundo');</script></body>



Lo normal es escribir el código del script en un archivo externo e importarlo mediante el atributo src

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


Si queremos mostrar un cierto contenido sólo a los usuarios que tengan la ejecución de scripts desactivada, por ejemplo para informarles de la maravillosa funcionalidad que se están perdiendo, se puede utilizar la etiqueta<noscript>

<body>
<script type="text/javascript">alert(new Date());</script>
<noscript>Activa JavaScript para ver la fecha</noscript>
</body>


Para definir metadatos acerca del documento se utiliza la etiqueta <meta>, etiqueta que ya utilizamos anteriormente para especificar la codificación de caracteres que utilizaba nuestro archivo. Algunos usos que se le pueden dar a esta etiqueta son especificar una descripción del contenido de la página:

<meta name="description" content="Tutorial de HTML y XHTML">


o palabras clave que describan la página:

<meta name="keywords" content="tutorial, html, xhtml">


Para dividir la página en secciones se utiliza la etiqueta <div>. Esta etiqueta es la base de la maquetación utilizando CSS, aunque el siguiente ejemplo, al no utilizar ningún estilo, no resultará demasiado impresionante:

<div id="menu">
<a href="http://mundogeek.net/">Inicio</a>
<a href="http://mundogeek.net/contacto/">Contacto</a>
</div>

<div id="contenido">Hola mundo</div>



Las cabeceras o títulos se indican con las etiquetas <h1><h2><h3><h4><h5> y <h6>. Estas etiquetas son especialmente útiles para el SEO (Search Engine Optimization, u optimización para buscadores)

<h1>Título</h1>
<h2>Subtítulo</h2>
<h3>Sub-subtítulo</h3>



Para insertar saltos de línea se utiliza <br> (como vemos existen etiquetas en HTML que no necesitan ser cerradas; no así en XHTML, del que hablaremos más tarde)

<p>Primera línea<br>
Segunda línea<br><br>
Cuarta línea</p>



Para marcar un bloque de texto como una cita se utiliza <blockquote>. Esto hará, por defecto, que el bloque de texto tenga un cierto margen izquierdo.

<p>Y entonces él dijo:</p>
<blockquote><p>Le haré una oferta que no podrá rechazar</p></blockquote>



Para marcar un texto como una cita inline se utiliza la etiqueta <q>. Por defecto esto hará, simplemente, que el texto aparezca entrecomillado.

<p>Y entonces él dijo... <q>¡Vamos a aprender HTML!</q></p>



Para marcar un texto como código fuente se utiliza <code>. Por defecto esto mostrará el texto con una fuente monoespacio.

<p><code>foreach($mensajes as $mensaje)
echo $mensaje;
</code></p>



<code> se suele utilizar en conjunción con <pre>, que hace que se tengan en cuenta los espacios en blanco, tabuladores y retornos de carro del texto que encierra

<pre><code>foreach($mensajes as $mensaje)
echo $mensaje;
</code></pre>



Para dar el significado de una abreviatura:

<abbr title="HyperText Markup Language">HTML</abbr>



Para indicar que una palabra o frase es especialmente importante (más que el texto marcado con <em>) se utiliza la etiqueta <strong>. Esto se traducirá, por defecto, en que el texto etiquetado se verá en negrita.

<strong>HTML</strong> es un lenguaje de marcado



Para mostrar una imagen se utiliza <img>. Es conveniente dar una descripción alternativa a la imagen para los invidentes y los navegadores que no muestren imágenes utilizando el atributo alt

<img src="imagenes/berners-lee.jpg" alt="Tim Berners-Lee, uno de los creadores de HTML">


Para crear listas se utiliza la etiqueta <ul> (de unordered list, o lista no ordenada). Cada elemento irá dentro de una etiqueta <li>

<ul>
<li>Lunes</li>
<li>Martes</li>
<li>Miércoles</li>
</ul>



También se pueden crear listas ordenadas con <ol>, lo que hará que cada entrada de la lista venga precedida por un número (o una letra, un número romano… si así se especifica en la hoja de estilo) en lugar de una viñeta, como ocurriría con <ul>:

<ol>
<li>Lunes</li>
<li>Martes</li>
<li>Miércoles</li>
</ol>



Para crear tablas se utiliza la etiqueta <table>. Dentro de esta tendremos una etiqueta <tr> (de table row) por cada fila, y a su vez, dentro de <tr>, una o más etiquetas <td>, para celdas de datos, o <th>, para celdas de la cabecera.

<table>
<tr>
<th>Lenguaje</th>
<th>Año</th>
</tr>
<tr>
<td>HTML</td>
<td>1991</td>
</tr>
<tr>
<td>CSS</td>
<td>1996</td>
</tr>
<tr>
<td>XHTML</td>
<td>2000</td>
</tr>
</table>


Entidades de caracteres HTML


Para evitar problemas con la codificación de caracteres podemos utilizar las llamadas entidades de carácter en sustitución de los caracteres que no pertenezcan a ASCII, como vocales acentuadas o la ñ.




































































Entidad

Carácter

&amp;

&

&lt;

<

&gt;

>

&Aacute;

Á

&Eacute;

É

&Iacute;

Í

&Oacute;

Ó

&Uacute;

Ú

&aacute;

á

&eacute;

é

&iacute;

í

&oacute;

ó

&uacute;

ú

&ntilde;

ñ

&euro;


XHTML


XHTML son las siglas de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto). Se trata de una versión algo más estricta de HTML basada en XML. La última versión de este estándar es la 1.1, de Mayo de 2001.


Para que un documento XHTML sea válido:


  • Todas las etiquetas deben estar cerradas. Para elementos vacíos, como <br> se puede cerrar la etiqueta añadiendo una barra invertida antes del signo de mayor que (<br/>)

  • Todas las etiquetas y atributos deben ir en minúsculas

  • Los valores de los atributos deben ir entre comillas


El doctype para XHTML 1.1 será:

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


Además la etiqueta <html> debe tener un atributo xmlns indicando el espacio de nombres. Un ejemplo de documento XHTML válido sería, entonces:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<title>Ejemplo</title>
</head>

<body><p>Hola Mundo</p></body>
</html>


Mundo Geek


vía Tutorial rápido de HTML / XHTML.

1-10 of 22