Crear una web con Joomla

Vamos a montar un portal web con Joomla en Ubuntu de manera sencilla y rápida:
Para poder montar un portal con Joomla (uno de los CMS más usados) tenemos que tener los siguientes paquetes instalados como prerequisito:
Apache, php y Mysql (mira mi post anterior para instalarlos correctamente).

En primer lugar nos descargaremos la última versión de Joomla con la traducción en español. Está diposible en la web de JoomlaSpanish.org:
Descargar la última versión de Joomla : Joomla 1.5.9.
Descargaros el archivo y descomprimirlo en una carpeta dentro del servidor apache.
Lo hacemos paso a paso:
Suponiendo que nuestro usuario en Ubuntu es "usuario" y su password es "pwdusuario"
Accedemos a /var/www
$cd /var/www
Creamos una carpeta llamada joomla donde crearemos el portal (con root)
$sudo mkdir joomla
Le cambiamos el propietario
$sudo chown usuario:usuario joomla
(he supuesto que el grupo de usuario también es usuario)
Descomprimimos el fichero que hemos descargado de la web de joomla dentro de /var/www/joomla

Lo siguiente es comprobar que la aplicación funciona correctamente. Para ello accedemos a nuestro servidor web, a la dirección : http://localhost/joomla
Si todo va bien veremos una pantalla con un asistente de instalación. Hasta ahora todo bien.

Antes de continuar deberíamos de realizar una serie de operaciones como son:
Crear una nueva base de datos.
Modificar los permisos del fichero configuration.php

Creación de la base de datos joomla
Accedemos a mysql con el password que creamos anteriormente cuando instalamos el paquete mysql-server
$mysql -u root -p
y acontinuación introducir la contraseña que le metimos a la hora de instalar.
Una vez logado correctamente, y por simplificar no vamos a crear nuevos usuarios ni permisos ni nada... usaremos el usuario root para nuestra bd.

use mysql;
create database joomla;

Crear un archivo configuration.php con permisos de escritura. Es necesario ya que si no posteriormente en la instalación nos pedirá meterlo a mano. (nos anticipamos)

$cd /var/www/joomla
$echo > configuration.php #creamos un fichero vacío usando una redirección
$chmod 755 configuration.php

Con esto ya esta todo preparado para la instalación
Veamos paso a paso la instalación

--continuará--

Portal del Departamento

Por fin el departamento de informática tiene una nueva web.
Aún no lo he metido contenido y está para nada operativa, pero poco a poco... pronto lo estará!. Está montada con Joomla:
un vistazo.... http://informatica.iescristobaldemonroy.org

Examen de Javascript

Os cuelgo el primer examen realizado en Javascript por los alumnos de 2º ESI.
Examen Javascript

probando Inkscape

Haciendo algunas imágenes para alguno del los juegos que estoy desarrollando me ha dado por probar Inkscape. Otro software gratuito y muy completo para dibujo vectorial. No es que sea un especialista.. pero probando probando... he hecho mi primera creación, que por cierto es muy mejorable pero bueno:

Mi Ojo:realizado con Inkscape bajo Linux

Komodo edit

Para los desarrolladores con python existe un IDE gratuito llamado Komodo Edit. La web oficial de donde podéis descargar la aplicación es: (descarga komodo edit).
Descomprime el fichero y ejecuta el script install.sh
De los IDE que he probado el que más me gusta, sencillo y fácil de usar.

Captura de mi escritorio - komodo - desarrollando un pequeño juego con python y pygame

"Free, multi-language editor that makes writing quality code easy. Award-winning editing for dynamic languages including Perl, PHP, Python, Ruby and Tcl; plus support for browser-side code including JavaScript, CSS, HTML and XML. Available on Linux, Mac OS X and Windows."

Decir que existe la versión profesional con muchas más funcionalidades pero desgraciadamente no es gratuita. Puedes descargártela completamente funcional por un período de 20 días.

Quanta plus

Un buen editor para desarrollar páginas webs "gratuito" y sencillo de manejar es Quanta Plus. Entre otras cosas integra genera código automático (formularios, tablas, scripts,...) cliente Ftp para subir automáticamente las webs desarrolladas, integración con los navegadores instalados, reconoce automáticamente la sintaxis del lenguaje, entre otros HTML, Javascript, CSS, ...Además permite crearnos plantillas con código,podemos incluir numerosos plugins...etc...

Justo lo que andaba buscando..fácil de manejar, gratis y bajo Linux.
La web oficial es: http://quanta.kdewebdev.org/
Es sencillo de instalar en Ubuntu, ya que está integrado en sus repositorios:

sudo -i
apt-get update #actualizar los respositorios a la última versión
apt-get install quanta #instalamos quanta

si queremos ponerlo en castellano, hay que instalar el paquete kde-i18n-es
apt-get install kde-i18n-es #instalamos el paquete del idioma

World of Goo

Impresionante juego donde los haya... considerado como uno de los mejores del pasaño año.

Hoy acabé esta joya elaborada por dos amigos de San Francisco, Ron y Kyle. Merece la pena probarlo. Es una droga.

Si queréis echar un vistazo... ahí va un video:

Gracias a my brother por pasarmelo.

Página oficial: http://2dboy.com/games.php

Mapa de tu red

Hoy se me ocurrió realizar un mapa con la estructura de una red, y pensé ... seguro que hay herramientas que te la dibujan automáticamente. Efectívamente ...googleando un poco encontré una aplicación llamada lanmap.

Si usas Ubuntu como yo, su instalación es trivial ya que se encuentra en sus repositorios. Los pasos que hay que seguir para instalarlo es como de costumbre:

Abrir una shell:

#sudo -i

#apt-get install lanmap

Una vez instalado la sintáxis es muy simple:

lanmap -i (poner aquí la interfaz de red) -r (intervalo medido en segundos) -T (formato de laimagen generada) -o (directorio donde queremos que almacene la imagen del mapa)

En mi caso un ejemplo sería:

#lanmap -i eth0 -T png -r 60 -o /home/pepe > /dev/null&

(he redirigido la salida al dispositivo nulo y en background)

Servidor SSH para Windows

Todos sabemos la utilidad de ssh para trabajar remotamente en modo seguro. Siempre lo he utilizado bajo Linux.. pero.. si queremos usarlo alguna vez bajo Windows....Un servidor sencillo y gratuito para usar bajo el SO Windows es freesshd.

Lo tenéis disponible en la web oficial : freesshd

Más software gratuito relacionado para trabajar bajo Windows:
PuTTy: cliente de telnet, ssh, ...
WinSCP Portable: cliente scp, sftp, ftp para utilizar bajo ssh (portable)

Supuesto práctico - CSS

Con el siguiente ejercicio quisiera poner un caso ficticio que se podría dar en la realidad..erll coomo???.

Para resolverlo hay que tener conocimientos (básicos) en HTML y CSS.

Los objetivos que planteo con este ejercicio son:

1. En primer lugar se pretende una organización y comprensión del código fuente.
   
2. En segundo lugar se pretende la modificación del código fuente de las hojas de estilos en cascada.
   
3. En tercer lugar se pretende elaborar un portal web con la plantilla re-diseñada.
   

Supongamos que una empresa nos contrata para elaborar su web. El gerente nos propone realizar un portal web. Del conjunto de plantillas gratuitas que disponemos en la red, elige la que más le gusta: “Dark Ritual” por la distribución de las columnas y el formato de sus elementos. Esta plantilla fue diseñada por un tal Arcsin (le hago propaganda).

El código HTML del que disponemos está muy confuso ya que no está bien tabulado y apenas se aprecia la distribución de las capas y de los elementos en el código.

En este enlace tenéis los archivos necesarios: plantilla

• En primer lugar deberás organizar el código HTML de la plantilla (ya que es un poco caótico -lo he caotizado yo-) para poder comprender mejor la estructura de capas que se ha diseñado. Haz uso de la tabulación e inserta comentarios para explicar la distribución de las mismas.
  



• Una vez comprendido la distribución, echa un vistazo al código CSS para comprender mejor la posición y los estilos de cada capa. Elimina el código sobrante (no utilizado) de la hoja de estilos.
  
• El gerente nos comunica en primer lugar que la columna que se muestra a la derecha, no le gusta que ocupe la parte superior, sino que empiece al igual que las otras columnas (la del menú y central), justo debajo del título.
  



• Además el gerente nos informa que la imagen que forma el título del portal debe ser cambiada y que debe ocupar el ancho del portal.
  
• Crea varias páginas de ejemplos, de manera que estén enlazadas en el menú lateral y modifica la página de estilos de manera dicha opción aparezca resaltada de otro color cuando se está visualizando la página a la que enlaza.

Ejercicio creado por: Pepe Lluyot

Aplicaciones Portables (Portable Apps)

Seguramente habréis oido alguna vez sobre las aplicaciones portables,... pero en realidad...¿Qué es una aplicación portable?

Una aplicación portable es aquella que no necesita de una instalación previa para poderla utilizar y que podemos hacer uno de ella en algún dispositivo de almacenamiento externo,....... es decir imagínate que vas a casa de un amigo y por ejemplo... quieres usar su PC para escuchar música o ver un documento de texto o retocar una foto en su ordenador, o quieres pasarle un antivirus, o mostrarle la base de datos que has montado con Mysql o conectarte via ssh al servidor de tu prima...... Ahora resulta que este amigo no tiene instalado ni un reproductor de música, ningún programa de ofimática o un programa de retoque fotográfico, ni nada de nada,,,,,que ocurriría???.. sería un proceso medianamente lento... buscar el softwarem ....bajarselo de internet (si es que tiene.....que lo tendrá), instalarlo, etc... Una solución sería disponer de un conjunto de herramientas, por ejemplo en tu pen-drive, de manera que al insertarlo podamos contar con el software más exencial sin necesidad de búsqueda,  instalación... pues a ese cada una de esas aplicaciones las podemos denominar "aplicaciones portables".

Existe una amplia gama de aplicaciones portables y gratuitas.

En la web PortableApps tenéis una buena colección de las mismas.

Os cito las que más suelo usar:

- Notepad++ portable: Editor sencillo de texto para programación.

- Putty portable: Para conectarte a través de Telnet o SSH,...

- xampp: con un conjunto de herramientas, contiene el servidor web Apache2, mysql, un servidor ftp (filezilla) entre otras. Es muyyy útil para aquellos desarrolladores que quieran probar por ejemplo sus páginas PHP en cualquier máquina sin necesidad de instar nada. Es muy útil también para llevar tu servidor ftp en el bolsillo.

- Claimwin portabla: Antivirus

- Nvu Portable: editorHTML... WYSIWYG

Además de:

- SumatraPDF portable: Visor de PDFs

- OpenOffice portable: Procesador de texto, presentaciones, hoja de cálculo, ....

- Filezilla client portable: Cliente FTP

- Thunderbird portable: Gestor de correos

- Firefox portable. Navegador web

- CoolPlayer portable: Reproductor de música.

- The Gimp portable: retoque fotográfico

...etc....etc....no sigo ...míralo mejor en la web..

Merece la pena usarlo.

Haciendo uso de CSS

CSS o lo que es lo mismo Cascading Style Sheets (Hoja de estilos en cascada), es utilizado por los desarrolladores para separar la estructura de un documento HTML de su aspecto visual. En estos días estamos trabajando en clase el uso de estilos en los documentos html que hemos desarrollado. Cuelgo un ejemplo del uso de estilos con CSS que he elaborado.

(se incluyen identificadores, clases, mezcla de clases y pseudo-clases).

Si pinchas en este enlace verás un ejemplo de código html generado sin tener aplicado ningún formato ni estilo.

En el siguiente enlace se muestra el mismo documento html con una hoja de estilos personalizada.

(incluso sin usar javascript, podemos simular botones)

Probado con mozilla.

Este ejemplo puede servir de ejercicio para los alumnos:

En el documento html he incluido determinados identificadores y clases tanto a capas como a etiquetas, de manera que se propone sin tocar el código del html original, crear una hoja de estilos que pueda personalizar dicha estructura.

PD: eso del rosa me ha sido inspirado por mi futura nena.
http://www.lluyot.com/drupal/content/ejercicio-html-css-modificaci%C3%B3n-en-la-hoja-de-estilos

HTML con tablas.

Aprovechando que en estos días estoy trantando en clases el uso de las tablas en HTML, voy a colgar en la red un ejemplo en el que he incluido comentarios a las líneas del código para una mejor comprensión del uso de las tablas.

Hay que decir que no me he esmerado en el diseño de la misma, sino más bien en el contenido.

Está elaborada en HTML 4.01, sin incluir ningún frame ni hojas de estilos ni formularios ni nada por el estilo... nada de capas....

La página en sí la he colgado aquí

Es conveniente tener instalado un editor de HTML para que resalten las etiquetas del código fuente, podéis usar el que actualmente usamos en clase (Notepad++).

He validado el código con W3C.

Editor básico de HTML

Si nos hemos planteado aprender a elaborar páginas web desde cero, y no sabemos como comenzar, tendríamos que plantearnos una pregunta: ¿Queremos realmente aprender la sintáxis del lenguaje HTML o bien utilizar un programa especializado en el que podamos realizar una web de forma sencilla sin necesidad de saber programar?.

Si optamos por conocer la sintaxis del lenguaje y partir de cero, lo suyo es utilizar un editor de texto como puede ser el block de notas. Está claro que es demasiado sencillo y nos gustaría encontrar otro que incorpore algunas utilidades básicas que no llegen a las características de un WYSIWYG.
Para los que no conozcan las aplicaciones WYSIWYG (en inglés: What you see is what you get = lo que ves es lo que obtienes). Son aplicaciones que trabajan en forma gráfica, en general fáciles de manejar y en las que podemos desarrollar páginas web sin necesidad alguna de tener conocimientos de programación (html, javascript, .....) y con la ventaja que lo que estamos desarrollando es el aspecto final de la web. Algunas de estas aplicaciones son: Dreamweaver, FrontPage, Word,... Esto facilita el desarrollo, pero por otro lado impide que aprendamos y manejemos bien el código.
Por todo ello, para comenzar a desarrollar páginas webs desde cero es conveniente utilizar un editor de texto simple. Con ello aprenderemos la sintaxis del código y aunque sea más complejo, llegaremos a dominar el lenguaje.

Un buen editor de texto que he encontrado por la red, gratuito, con poco peso, en castellano y que además permite la ejecución sin necesidad de instalarlo es el Notepad++ portable.

Está disponible en la siguiente URL: Notepad++ portable
Una vez instalado en el pen USB o en cualquier otro lugar, hay que seguir unos pasos para poder ponerlo en español:

• Iniciar la aplicación y cerrarla (para que termine de general determinados directorios).
  
• Acceder al directorio: App/Notepad++/locales
• Copiar el fichero spanish.xml
• Pegar el fichero en el directorio: data/Settings
• Renombrar el fichero spanish.xml por nativeLang.xml
• Iniciar de nuevo la aplicación para tener la traducción al castellano.

Para comenzar, basta seleccionar en la opción de menú de la barra de herramientas (Lenguajes) y señalar HTML, para que reconozca y formatee las palabras reservadas de HTML.
Para ver directamente el resultado, podemos desde la aplicación ejecutar el cliente (navegador).
Para poder completar las palabras reservadas del lenguajes, la combinación de teclas es Ctr+Tab.

Un manual completo de HTML está disponible aquí

¿Qué es Moodle?

Moodle es sistema de creación de cursos, de libre distribución. En resumidas cuentas es una colección de páginas web cuyo fin es el de montar un site destinado a la gestión de cursos on-line. Es una herramienta muy potente para los docentes, en la que podemos llevar un control de uno o varios grupos o niveles educativos.
Permite ofrecer a los alumnos una guía de las asignaturas, así como materiales, ejercicios, actividades, prácticas, exámenes. Es muy fácil de configurar y tan sólo hay que disponer de un servidor Web que admita php y MySql.
Al igual que otros CMS, tiene un script de instalación que crea la base de datos y el site por defecto.

Mi experiencia personal con Moodle es muy reciente. Estamos montando una web para el departamento del instituto (con Joomla) en la que hemos incluido una plataforma Moodle, y aún estamos en fase de construcción. Nuestros alumnos han sido dados de alta, y por ello pueden acceder a todo tipo de materiales (que estamos elaborando), guías de curso, manuales, enlaces, ...

Una gran utilidad es la de disponer de foros de debates y la de poder planificar, unificar y controlar la resolución de actividades o prácticas que se les proponen. Se pueden configurar y planificar exámenes on-line incluso calificando momentáneamente (automáticamente) al finalizar los mismos.

La interfaz es fácil de configurar. Existen numerosas plantillas en la red que con un click podemos cambiar su aspecto visual.

Si queréis ver la página principal de Moodle que estamos elaborando, aquí la tenéis: http://www.iescristobaldemonroy.org/moodle


Para más información podéis visitar la página principal de moodle: http://www.moodle.org/

Port Scanner

Buscando un escaneador de puertos, me encontré con este que es on-line. Parece que funciona bien y me ha sido de utilidad.
La dirección es: http://www.t1shopper.com/tools/port-scanner/

Clonar PCs

Todo el mundo suele usar para clonar pcs el Norton Ghost u otro similar, con el inconveniente de no ser libre entre otras cosas. El año pasado descubrí navegando el software "Clonezilla", es una buena alternativa al Norton Ghost. Tiene muchos factores a su favor, principalmente su sencillo uso ... de forma que con varios clicks podemos clonar PCs sin ningún problema.

El funcionamiento es bien sencillo... por ejemplo supongamos tenemos un aula con 15 ordenadores con las mismas características (el mismo hardware), nuestro objetivo es de disponer de una imágen.. de manera que evite el formateo e instalación individual de cada Pc. Para ello montamos un Pc con todo el software necesario, particiones, drivers, configuración de los SO (ubuntu, M$,..). Una vez lo tengamos disponible usamos "Clonezilla" (podemos usarlo con un CD de arranque, montarlo en un pen USB, o bien desde red) para crear la imágen. La imágen quedará almacenada en un dispositivo de almacenamiento (DD externo por USB, partición local, partición en red....).

Para restaurar la imágen en distintos PCs, basta con usar de nuevo "Clonezilla" seleccionando la ubicación de la misma, y en pocos minutos tienes un PC clonado.

Si todo esto lo hacemos por red, se automatiza todo (yo aún no lo he intentado).

Clonezilla está disponible en http://www.clonezilla.org/ (hay manuales...pero in english)

Igual si tengo un poco de tiempo hago un tutorial....

Salu2.

Transmisión de paquetes

Un buen recurso para conocer el funcionamiento de la transmisión de paquetes y cómo se maneja la información a través de Internet, el uso del conjunto de protocolos TCP/IP, funcionamiento del router, switch, proxy, firewall entre otras cosas y de manera sencilla e ilustrada es el siguiente video-documental (13 minutos de duración). Me parece una buena utilidad para los alumnos/as de los ciclos de informática, para que puedan comprender de manera sencilla el funcionamiento de la transmisión de datos a través de la red.

El video está disponible en español en el siguiente enlace:

http://www.warriorsofthe.net/movie.html

El mundo según Google

Os paso un enlace con un video-documental interesante retrasnsmitido por la 2:

El mundo segun Google:Doc...

Solución al Enigma Criptográfico - I

La solución no es muy complicada. Analicemos paso a paso el primer mensaje:
0
1
00
111
00100
00100101
0110010010000
101001001001001010001
1101000100010010110100010001000100

Tenemos un total de 88 dígitos binarios dispuestos de una forma especial, que más tarde revelaré y que forma la parte más complicada de averiguar.
Ya que se trata de un mensaje cifrado, debemos de establecer una relación entre estos dígitos y algún alfabeto. Si tomamos un alfabeto de 26 letras (A-Z) y teniendo en cuenta su correspondiente código ASCII podríamos haber tratado de descifrar el mensaje.. esto sería relativamente fácil. (88/8=11 letras del alfabeto)
Si agrupamos de 8 en 8 bits y miramos su correspondiente código ASCII obtenemos:

0100 1110 --> N

0100 0010 --> B

0101 0110 --> V

0100 1000 --> H

0101 0010 --> R

0100 1001 --> I

0100 0111 --> G

0100 0100 --> D

0100 1011 --> K

0100 0100 --> D

0100 0100 --> D

Lo siguiente es encontrar una relación, una traslación de estas letras porque evidentemente el mensaje aún no está descifrado. Al acabar en DD podemos deducir que no es una simple traslación.....

Si hacemos corresponder las letras obtenidas con su posición en un alfabeto de 26 letras tenemos que

0100 1110 --> N-->14

0100 0010 --> B-->2

0101 0110 --> V-->22

0100 1000 --> H-->8

0101 0010 --> R-->18

0100 1001 --> I-->9

0100 0111 --> G-->7

0100 0100 --> D-->4

0100 1011 --> K-->11

0100 0100 --> D-->4

0100 0100 --> D-->4

Para buscarle algún sentido, tenemos que estudiar e indagar en la pista principal.... "Estudiando las regularidades de la naturaleza", viendo la disposición de los números, podríamos deducir que forman una de las sucesiones más famosas de la historia matemática de todos los tiempos.. La sucesión de Fibonnacci (presente en miles de elementos naturales... semillas de girasol, piñas, cultivos bacterianos, etc..)

La sucesión de Fibonacci se construye sumando los dos términos anteriores de la sucesión.

veamosla: 1, 1, 2, 3, 5, 8, 13, 21,.... exactamente igual que la disposición de los dígitos binarios.

Ahora bien, aplicamos una traslación teniendo en cuenta la posición que ocupa cada letra, para ello el mensaje fue cifrado aumentando el número de unidades que corresponde con la sucesión de Fibinnacci del lugar que ocupa, la primera letra fue aumentada en 1, la segunda en 1, la tercera en 2, la cuarta en 3, la quinta en 5, y así etc... Como el mensaje fue cifrado y lo que queremos es descifrarlo, hacemos el proceso contrario, en vez de sumar, restamos. Veamos:

0100 1110 --> N-->14 -1 -->13

0100 0010 --> B-->2 -1 -->1

0101 0110 --> V-->22-2-->20

0100 1000 --> H-->8-3-->5

0101 0010 --> R-->18-5-->13

0100 1001 --> I-->9-8-->1

0100 0111 --> G-->7-13-->20

0100 0100 --> D-->4-21--> 9

0100 1011 --> K-->11-34--> 3

0100 0100 --> D-->4-55--> 1

0100 0100 --> D-->4-89-->19

(hay que tener en cuenta que si llegamos a 0 empezaríamos por 26)

Mirando de nuevo el Código ASCII correspondiente obtenemos el mensaje cifrado:

MATEMATICAS.

Eso es todo, espero que os haya gustado...

Ya que sabes el mecanismo trata de descifrar el siguiente código:

0

1

00

101

00100

11110100

1000010100100

101011101010101010011

1001001111010100010100011001001100

Un saludo.