Cargar un applet de GeoGebra y sus opciones

Vamos a explicar cómo podemos insertar un archivo que hayamos diseñado con GeoGebra en una página web, de forma que el usuario pueda mover los objetos representados, hacer modificaciones en los mismos o abrir el diseño en su propio programa y guardarlo.

<applet name="ggbApplet" 
				code="geogebra.GeoGebraApplet" 
				archive="geogebra.jar"
				codebase="http://www.geogebra.org/webstart/3.2/"
				width="680" 
				height="460" 
				mayscript="true"> 
				<param name="filename" value="prueba.ggb"/>
				<param name="java_arguments" value="-Xmx512m" />
				<param name="cache_version" value="3.2.45.0" />
				<param name="borderColor" value="#ffffff" />
				<param name="framePossible" value="false" />
				<param name="enableChooserPopups" value="false" />
				<param name="enableRightClick" value="false" />
				<param name="enableLabelDrags" value="false" />
				<param name="allowRescaling" value="true" />
				<param name="enableShiftDragZoom" value="true" />
				<param name="errorDialogsActive" value="true" />
				<param name="showMenuBar" value="false" />
				<param name="showToolBar" value="false" />
				<param name="maxIconSize" value="25" />
				<param name="showToolBarHelp" value="true" />
				<param name="showAlgebraInput" value="false" />
				<param name="showResetIcon" value="false" />
				<param name="language" value="es" />
				Lo sentimos, la aplicación de GeoGebra tuvo un error al cargar.
				Asegúrese de que tiene instalado Java en su versión 1.4.2 (o superior)
				y está activo en su navegador (<a href="http://java.sun.com/getjava">
				Pulse aquí para instalarlo ahora</a>)
			</applet>

Este código puede copiarse directamente en la página que estemos diseñando (en el lugar que queremos que aparezca), teniendo en cuenta la siguiente información:

• El valor del parámetro filename hace referencia a la dirección en que se encuentra el archivo que queremos que se muestre.
• Que se muestre la Vista Algebraica y/o el Protocolo de la Construcción no se controla por parámetros, sino que depende de cómo se haya guardado el archivo con GeoGebra.

Con estas dos aclaraciones, el programa debería funcionar correctamente. No obstante, vamos a explicar algunos de los parámetros que aparecen en el código de arriba y que modifican ligeramente el resultado para ofrecer un aspecto más a nuestro gusto.

• height y width controlan, respectivamente, la altura y la anchura en píxeles del marco que encuadra todo el applet.
• framePossible decide si al hacer doble click sobre el applet, se abre una ventana nueva con el programa completo (versión web) en la que editar el dibujo.
• enableChooserPopups es para cuando se pulse en dos objetos simultáneamente (por ejemplo, en la intersección de dos rectas) aparezca una ventana emergente para elegir cuál de las dos se desea seleccionar.
• enableRightClick decide si el botón derecho del ratón está activado o no sobre el applet.
• enableLabelDrags establece si las etiquetas de cada objeto pueden desplazarse con el ratón o no. Por defecto, está activada.
• allowRescaling establece si se reescala el área de trabajo de forma automática cuando se carga el applet o se cambia su tamaño.
• enableShiftDragZoom decide si puede moverse el área de trabajo pulsando Shift ó Control a la vez que se arrastra con el ratón.
• errorDialogsActive decide si se muestran o no mensajes emergentes de error.
• showMenuBar decide si se muestra la barra de menús.
• showToolBar decide si se muestra la barra de herramientas.
• maxIconSize establece el tamaño máximo en píxeles de los iconos que aparecen en la barra de herramientas. Debe ser un número comprendido entre 16 y 32 y, por defecto, es igual a 32.
• showToolBarHelp decide si se muestra la ayuda en la barra de herramientas.
• showAlgebraInput decide si se muestra la línea de comandos.
• showResetIcon decide si se muestra un botón para reiniciar la construcción.
• language establece el lenguaje en que se muestra la aplicación.

Otras opciones de posición y estilo pueden modificarse directamente mediante hojas de estilo css. Toda la información que aquí se detalla puede encontrarse ampliada en la documentación de GeoGebra.

Incrustar calendario con Google Calendar

Imaginemos que tenemos un calendario en Google Calendar y queremos insertarlo en nuestra página web. Un calendario de este tipo puede reflejar, por ejemplo, los horarios de tutorías, las clases, etc. Lo mejor es seguir los siguientes pasos.

• Una vez hemos accedido al servicio de Google Calendar (con nuestro email y contraseña de gmail), creamos nuestro calendario si no lo tenemos y nos aseguramos de hacerlo público en el momento que nos pregunte. Si queremos añadir un calendario que otro usuario haya creado o bien un calendario en formato iCalendar, simplemente en la columna de la izquierda hacemos click en añadir y elegimos la opción más conveniente (siempre haciendo el calendario público).
• En segundo lugar, seleccionamos el calendario en la columna de la izquierda y pinchamos en la pestaña con una flecha hacia abajo que sale a su lado y, una vez se despliega el menú, elegimos Configuración del calendario y nos fijamos en la opción Incrustar este calendario.
• A continuación, pinchamos en Personaliza el color, el tamaño y otras opciones y pasaremos a otra ventana en la que pueden personalizarse muchas de las características que tendrá el calendario. Este configurador nos permite previsualizar el calendario según vayamos modificándolo. Hay que prestar especial atención al ancho y alto del calendario para que se ajuste al lugar donde lo queremos meter.
• Finalmente, una vez satisfechos con los cambios, pulsamos arriba sobre Actualizar html y copiamos el código que aparece en el cuadro de texto. Dicho código tendremos que pegarlo en el lugar de nuestra página donde queramos que se inserte el calendario.

Utilización de MathJax en una página web

MathJax es una herramienta que nos permite incluir de forma rápida y sencilla fórmulas matemáticas en una página web. Su principal ventaja es que dichas fórmulas pueden escribirse (casi) directamente en \(\LaTeX\) y que está soportado por los navegadores más usados: Opera, Mozilla Firefox, Google Chrome, Internet Explorer y Safari.

Por ejemplo, el siguiente código, directamente escrito en html muestra la fórmula que aparece debajo.

\[x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}\]

$$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$ Para instalarlo y usarlo, tenemos que seguir estos pasos:

• Descargar el contenido de la página oficial de MathJax, en la página de Sourceforge.
• Descomprimir y copiar el contenido del archivo en la carpeta del servidor en la que tengamos nuestra página web.
• En la cabecera del documento html en que queramos insertar códigos latex, incluir la siguientes líneas de código:

  <script type="text/javascript" src="path-to-MathJax/MathJax.js">
  	MathJax.Hub.Config({
  		extensions: ["tex2jax.js"],
  		jax: ["input/TeX", "output/HTML-CSS"],
  		tex2jax: {
  			inlineMath: [ ['$','$'], ["\\(","\\)"] ],
  			displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
  		},
  		"HTML-CSS": { availableFonts: ["TeX"] }
  	});
  </script>

  donde path-to-MathJax debe reflejar la carpeta donde se encuentran los archivos que hemos copiado. Esto carga una configuración por defecto y hace que pueda utilizarse $ y $$ para escribir fórmulas en línea y fórmulas en línea aparte, como viene siendo usual.

Otras características a tener en cuenta son las siguientes:

• Podemos definir macros de la misma forma que lo hacemos en latex

  \newcommand{\R}{\mathbb{R}}

• Hay que fijarse que los caracteres < y > están reservados en html, luego no pueden utilizarse dentro de una fórmula con MathJax. A tal efecto, pueden utilizarse los comandos \lt (less than) y \gt (greater than), que no son comandos de latex originales sino que sólo sirven en MathJax.

Finalmente, decir que toda la documentación y FAQs, puede encontrarse en el siguiente enlace.

Google Maps

Si queremos insertar un mapa de Google Maps con una dirección concreta o que indique una ruta, basta seguir el tutorial que ofrece Google al respecto.

Google Analytics

Google Analytics es una aplicación de Google que nos permite hacer una estadística bastante completa sobre cómo los usuarios acceden a nuestra página. Concretamente, nos muestra datos y gráficas del número de visitantes, su procedencia, cómo han encontrado la página y el tiempo que han permanecido en ella, entre otros datos.

Para instalarlo, basta entrar en la siguiente dirección y registrarse (con el email y contraseña de gmail de la cuenta a la que estará asociado). Una vez allí, en la pestaña de arriba My Analytics Accounts, escogemos create new account y seguimos los pasos que se nos indican. La página nos generará un código que debemos insertar en la cabecera de nuestra página web.

Enlaces a páginas con plantillas

Muchas veces es más útil utilizar un modelo de página web que alguien ha creado que diseñar una página desde cero. No obstante, hay que tener cuidado con el tipo de licencia que tenga la plantilla que nos descarguemos y las condiciones que nos pida que respetemos. Lo usual es encontrarse con que hay que mantener alguna referencia al autor original (suele haber algún código que no debe ser eliminado). La licencia que suele ser más usual (de entre las que no son de pago) es Creative Commons y hay muchas páginas que, bajo la misma, permite modificar y utilizar el contenido mientras que se respete la autoría del diseñador original.

• Open Web Design. Página con multitud de plantillas en las que simplemente hay que adaptar el contenido.
• layouts.ironmyers.com. Una página que crea la estructura básica de un documento para rellenarla después con contenidos, fondos, colores, imágenes, etc.

Embeber un video de youtube

Muchas veces puede ser útil ilustrar algo de lo que estemos haciendo con uno de los maravillosos vídeos que otros usuarios han alojado en youtube. Esto se puede hacer de forma libre de la siguiente forma ya que el propio video se encarga de hacer referencia a youtube y sus especificaciones. Lo podemos hacer incluyendo el siguiente código:

<iframe class="youtube" type="text/html"
  src="http://www.youtube.com/embed/CODIGO" frameborder="0">
  No se ha podido mostrar el video
</iframe>

Algunas aclaraciones y comentarios al código anterior son las siguientes:

• CODIGO debe ser sustituido por el identificador del video, que normalmente podemos encontrar en la URL del mismo.
• La etiqueta iframe no está soportada en los estándares strict de html ó xhtml, luego no esperemos que valide en esos casos.
• Hemos especificado la clase youtube, aunque podríamos haber puesto cualquier otro nombre. Ahora podemos editar con hojas de estilo algunos atributos de la apariencia del iframe.

  .youtube{
  	width: 400px;
  	height: 320px;
  	display: block;
  	margin: 10px auto;
  }

Un ejemplo es el siguiente vídeo de Les Luthiers.

Tipos de licencias

Es común encontrarse con multitud de contenidos por internet que nos gustan: plantillas, scripts, diseños, trozos de páginas,... pero la pregunta es: ¿se puede copiar todo lo que se ve? La creencia más extendida es que todo lo que está por internet (o, por lo menos, lo que vemos en una página) es libre (seguro que todo el mundo conoce la página de Homer Simpson). Esto no es tan así y hay que tener cuidado lo mismo que con una película o un libro. Aunque no siempre está claro cuál es, tenemos que fijarnos en qué tipo de licencia tiene el contenido que estamos copiando. Las principales licencias que nos encontramos por ahí son las siguientes:

• Copyright. Esta es la más restrictiva de todas por lo general e indica que el autor se reserva muchos derechos sobre el contenido aunque pueden variar dependiendo de los términos concretos de cada caso. Casi siempre engloban el derecho a copia, es decir, no se puede copiar sin el consentimiento del autor (ya sea previo pago por la copia o no). Su símbolo es la C que aparece debajo.

  Todos hemos aceptado acuerdos de licencia con copyright cuando hemos instalado algún programa.

• Creative Commons. Este tipo de licencia nació con la idea de ser menos restrictiva que el copyright. Deja al autor la posibilidad de elegir de una forma sencilla qué quiere permitir que el usuario haga con su material. Concretamente, tenemos los siguientes parámetros que podemos requerir o no:
  • Reconocimiento (Attribution): En cualquier explotación de la obra autorizada por la licencia hará falta reconocer la autoría.
  • No Comercial (Non commercial): La explotación de la obra queda limitada a usos no comerciales.
  • Sin obras derivadas (No Derivate Works): La autorización para explotar la obra no incluye la transformación para crear una obra derivada.
  • Compartir Igual (Share alike): La explotación autorizada incluye la creación de obras derivadas siempre que mantengan la misma licencia al ser divulgadas.

  El icono que representa a esta licencia es una doble C y hay un sub-icono para cada una de las cuatro posibilidades de arriba (que cada uno intente identificarlas)

  

  En esta página, se ha copiado el texto de la página oficial de Creative Commons, que está bajo una licencia del mismo nombre pero requiere la cita de la fuente. En ese enlace también podemos ver cómo poner una licencia de este tipo a un trabajo que nosotros hayamos realizado.

• Licencia pública general de GNU. Esta es de las menos restrictivas o privativas. Fue diseñada por la Free Software Foundation para promover la distribución de software libre. Aunque también tiene distintas variantes, en general permite la libre distribución, modificación, copia,... Dependiendo del tipo de licencia, la única restricción puede ser que todo producto derivado de uno bajo GPL ha de estar también bajo GPL, lo que asegure la libre evolución del sistema. El más claro ejemplo de software con esta licencia son la mayoría de distribuciones del sistema operativo Linux y sus entornos gráficos.

  Una variante de esta licencia es la licencia pública general reducida, que permite a programas que no son GPL utilizar programas que sí están bajo ella.

  

En cualquier caso, hay que estar un poco pendiente de lo que estamos haciendo, y no hay que tener miedo de citar a quien nos ha ayudado a hacer nuestra página.