|

Algo de Javascript avanzado

ByLuis

Algo malo de dedicarse a la informática es que te puedes quedar anticuado con facilidad, algo bueno de ser blogger (al menos para mí) es que al querer dar buenas noticias y buenos scripts, te hace estar al día.
Algún compañero me ha preguntado alguna vez por partes de Javascript que no entendía, incluso me decía si realmente es Javascript. Supongo que a todos nos ha sonado raro el código Javascript cuando incluye JSON.
Lo malo es que cuando buscas por ese tipo de código que desconoces, buscas por términos como “javascript function”, “javascript avanzado”, y otras cosas que no suelen dar los resultados que esperamos. En el caso de “javascript function” nos suele dar cómo crear funciones, pero solo lo más básico, sin embargo, si hubieramos buscado por “javascript funciones anónimas” si hubieramos obtenido resultados deseados. Si buscamos por “javascript avanzado” solemos obtener directorios de efectos hechos en javascript y no las novedades que trae Javascript en sus nuevas versiones.
Por eso, si quieres aprender conceptos más avanzados de Javascript, te va a venir bastante bien este tutorial:
Quick guide to somewhat advanced JavaScript

Similar Posts

| |

Menú radial mediante XHTML

ByLuis

Buen tutorial que nos explica cómo realizar un menú radial, es decir, un menú en el que las opciones se sitúan alrededor de un punto.

menu_radial.png

El tutorial nos indica cómo crear la estructura XHTML, los estilos, y el código Javascript para que funcione el menú.

Siendo algo puristas, no me gusta el uso del XHTML y el de los estilos, incluso podría sobrar Javascript. El código XHTML no es semántico. Aúnque claro, quizás lo haya hecho porque la solución que os paso ahora no sirve para IE6.

menu_radial2.png

El HTML sería el siguiente:

<ul>
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a href="3.html">3</a></li>
<li><a href="4.html">4</a></li>
</ul>

Y los estilos:

ul {
width: 150px;
height: 150px;
display: block;
padding: 0px;
margin: 0px;
}
li {
width: 48px;
height: 48px;
display: block;
border: 1px solid #008585;
background: #24B8B8;
margin: 0px;
padding: 0px;
float: left;
text-align: center;
}
li + li + li {
margin-left: 50px;
}
li:first-child {
margin: 0px 50px;
}
a {
font-size: 250%;
font-family: Arial;
text-decoration: none;
color: #DEDED2;
}

Javascript Tutorial – Radial Menus Part 1

Funciones en Javascript

ByLuis

Normalmente el uso que hacemos de las funciones en javascript es bastante sencillo, pero en algún otro momento puede que necesitemos un uso más avanzado.

El tutorial que os paso explica detalladamente todos los usos que podemos realizar de funciones. Lo que yo desconocía era el uso de callee, que tiene un puntero a la función que se está ejecutando en ese instante, fundamental para la recursividad:

alert((function(n){ if(n <= 1){return 1;}else{return n*arguments.callee(n-1);}})(10));

Functional Javascript

Añadir estilos y scripts a la administración de plugins en WordPress

ByLuis

Cuando estamos desarrollando un plugin para WordPress y queremos que la administración del plugin tenga estilos y scripts propios, ya sea para darle cierta interactividad o diseño, o bien podremos incluir los estilos o librerías a pelo en la página del plugin, o bien podremos hacer que WordPress añada lo estilos y los scripts en el head del HTML. Para realizar esto, deberemos utilizar las acciones admin_print_styles y admin_print_scripts:

add_action('admin_print_styles', 'incluir_css');
add_action('admin_print_scripts', 'incluir_script');

function incluir_css() {
  echo '';
}

function incluir_script() {
  echo '';
}

Así de sencillo.

Guía rápida para desarrollar en Android: Hello World

ByLuis

Para aquellos que aún no lo sepan, Android es un conjunto de software para dispositivos móviles: sistema operativo, middleware y aplicaciones key mobile.

Tiene toda la pinta de que va a tener mucho éxito, quizás porque está realizado por Google, quizás porque los miembros de la alianza son muy importantes, quizás porque es open source, quizás porque es sencillo o quizás porque estamos hasta el gorro de Windows. Sea lo que sea, merece la pena empezar a desarrollar aplicaciones para Android, y si los motivos anteriores o el desarrollo como profesional no te estimula, quizás los 10 millones de dólares que ofrecen a la mejor aplicación si te puedan interesar.

Pues venga, a ponerse a picar que los pisos están muy caros.

Empezar a desarrollar para Android es muy sencillo, tan solo tienes que tener el SDK de Android, tener instalado Eclipse, por ejemplo la versión Classic y añadir un plugin para Eclipse que ofrecen, para lo cual hay que:

  • En Eclipse ir a Help > Software Updates > Find and Install.
  • Seleccionar Search for new features to install y pinchar en Next.
  • Seleccionar New Remote Site.
  • Añadir esta URL: https://dl-ssl.google.com/android/eclipse/.
  • Selecionar Android Plugin > Eclipse Integration > Android Development Tools.

Una vez instalado el plugin, debemos indicar la ruta del SDK, para lo cual iremos a Window > Preferences y en la opción de Android modificaremos la ruta del SDK.

Ya lo tenemos todo listo, ahora solo nos falta crear un nuevo proyecto Android (File > New > Project) y modificar el código base que nos ofrece.

En el ejemplo que vamos a hacer tan solo escribiremos una frase en el terminal, para lo cual editaremos el fichero principal del proyecto, en mi caso como he llamado al proyecto prueba el fichero es prueba.java:

package com.sentidoweb;
import android.app.Activity;
import android.widget.TextView;
import android.os.Bundle;
public class prueba extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
    TextView tv = new TextView(this);
tv.setText("Sentido Web");
setContentView(tv);
  }
}

He marcado en negrita el código que se ha de modificar, y como veréis no tiene mucha dificultad. El resultado es este:

android.png

Como véis el ejemplo se ejecuta en un emulador de Android, si jugáis un poco con este emulador podréis daros cuenta de las posibilidades que ofrece.

|

Ya tenemos nuevo ThickBox

ByLuis

De muchos es conocido Lightbox, y la popularidad que produjo a su autor en su momento cuando se hizo público. Básicamente es uno de los efectos que más se están viendo en páginas webs a la hora de mostrar imágenes. No hablamos de nada nuevo ni lo descubrimos ahora.
pimp_my_thickbox_20.jpg
Y como alternativa a Lightbox tenemos ThickBox 2.0 mucho más ligera y potente con sólo 27Kb de código. ¿Qué son 27Kb que sirven para cosas como esta?.

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Convertir WordPress en un CMS

ByLuis

Aunque como usuario me gusta WordPress (aunque cada vez un poquito menos), como desarrollador no me gusta demasiado (por no decir casi nada), pero no quita que su puesto se lo tiene bien ganado y que a veces es imposible no tener que usarlo.
Si además de las funcionalidades de WP, necesitas algo más que te puede aportar un CMS genérico, te puede venir bien este tutorial que explica en pocos pasos cómo convertir WordPress en un CMS.
Para ello el autor mueve el blog a la carpeta /blog y en la home de la página crea una página principal en la que se mostrará un portfolio y los resúmenes de sus diferentes trabajos (teniendo cada trabajo una página individual).
Los cambios incluyen la creación de archivos nuevos para el theme, que recoge los resúmenes de cada apartado del portfolio, los cuales son páginas estáticas que cuelgan de la página principal del portfolio.
Seguro que existe algun plugin que te lo permite hacer, pero la explicación es muy buena y la idea la podemos aprovechar para otras necesidades.
WordPress as CMS tutorial
Vía / dzone