Estos dias he estado revisando el blog y me he dado cuenta que tengo muchos enlaces nuevos. Eso significa que Internet, como siempre, sigue evolucionando y ofreciendo buenos contenidos. Es por este, y otros motivos, que he creado una sección nueva dedicada a la maquetación y al diseño.
Al trabajar en varias disciplinas, como maqueteador y como programador, los contenidos de dichas secciones se han ido enriqueciendo. Hace poco publiqué un listado de Showcase/Galerias de sitios web basados en CSS.
Espero que esto os ayude en futuras búsquedas de información.
Posted in Mi Weblog.
By phillipo
– Jueves, 22 Octubre 2009
Cada dia hay más posibilidades a nivel de diseñar basándose en CSS o Hojas de estilos. Grácias a ellas en parte se puede consiguir un nivel MVC en la maquetación XHTML/CSS. Por una parte está la estructura (xhtml, html, … ) y por otra el CSS que da forma a la maquetación. Pero bueno, yendo al grano, he estado sitios webs tipo showcase de webs CSS. El listado es extenso:
- cssmania.com
- csselite.com
- cssbased.com
- cssnature.org
- cssleak.com
- cssstars.com
- cssdsgn.com
- cssmadness.com
- cssglance.com
- css-showcase.com
- cssleak.com
- cssexchange.com
- wowcss.com
- cssillustrated.com
- welovecss.net
- cssluxury.com
- designfridge.co.uk
- designawardsgallery.com
- bestcssvault.com
- cssray.com
- 101bestwebsites.com
- inspiremix.com
Posted in Css.
Tagged with Css, showcase, stylesheet.
By phillipo
– Martes, 22 Septiembre 2009
La verdad es que estos dias he estado valorando la migración seria a JQuery. El motivo es muy sencillo. Entre los programadores y los desarrolladores existe una máxima, No reinventes la rueda, mejora la rueda.
Hasta el momento he estado usando Scriptaculous y Prototype para realizar los efectos de abrir y cerrar bloques de información mediante efectos de suavizado, uso de pestañas para mostrar diferentes idiomas y sistemas de lightbox para mostrar imágenes.
Sin embargo, la dificultad para encontrar extensiones realmente útiles y que no tenga que desarrollar desde la nada, pues son más bien pocas o estan desfasadas.
Con Jquery esto no pasa. Sí, bueno, hay librerias que se abandonan, pero no por ello no dejan de aparecer nuevas y mejores.
Así pues, y buscando por la red, he encontrado unas cuantas cosas que os pueden ser de utilidad:
Enlaces relacionados:
Posted in Javascript.
Tagged with ejemplos, framework, Javascript, jquery, tecnicas.
By phillipo
– Domingo, 13 Septiembre 2009
Smashing Magazine es una web que cada vez que publica algo, lo hace con una calidad e información increibles. Siempre puedes aprender algo nuevo.
En esta ocasión nos enseñan técnicas y algunas bases de como trabajar y usar CSS. Mucho de lo que allí aparece ni tan siquiera lo conocia y realmente es muy útil.
Mastering CSS, Part 1: Styling elements
Mastering CSS, Part 2: Advanced Techniques and Tools
Posted in Css.
Tagged with Css, smashing magazine, tecnicas.
By phillipo
– Viernes, 7 Agosto 2009
He empezado a realizar el traslado de mi web al dominio que a partir de ahora será definitivo. En un principio no deberia haber problema alguno.
- Descargar contenido en local.
- Realizar una copia de seguridad de la BD
- Crear el alojamiento en Plesk
- Cambiar DNS
- Subir contenido
- Crear BD
Problemas que pueden surgir:
- El dominio del blog en la base de datos no detecta la nueva ubiación
- Archivos subidos desde wordpress no tienen permiso para ser descargados
- Las DNS tarden más de lo normal
- Exista un conflicto al borrar el alias y crear un nuevo dominio en plesk
- Que Murphy se dedique a cumplir su máxima: Si algo puede salir mal, saldrá mal.
Posted in Mi Weblog.
By phillipo
– Sábado, 1 Agosto 2009
Posted in General.
Tagged with genera.
By phillipo
– Sábado, 18 Julio 2009
Hola a todos, tal y como he comentado desde hace aproximadamente un año, quedan pocos dias para que el dominio darkrassel.com se caduque. Dicho dominio ya no lo voy a renovar, y voy a seguir con el dominio ccaballero.com. Esto es más que nada porque quiero una imagen más seria de mi blog y ya aprovecho el dominio ccaballero.com para ello.
Recordad, www.ccaballero.com
Posted in Mi Weblog.
By phillipo
– Sábado, 18 Julio 2009
La verdad es que en el html ( englobo html puro, xhtml y otras variantes ) siempre hay etiquetas que dejamos de lado. Puede que por ignorancia o puede que por desconocimiento.
Una de ellas son las listas de definición ( Definition Lists ). Estan se caracterizan por usar una definición ( dt ) y su explicación ( dd ). Veamos su estructura:
A partir de aquí estan listas tienen mucho juego. Por ejemplo, para crear una carta de un restaurante:
Ver ejemplo
Ver código
Posted in Css.
Tagged with codigo, Css, estilos, html.
By phillipo
– Viernes, 12 Junio 2009
Hoy estaba navegando por la red mirando artículos sobre indexación y he localizado un post que se me pasó por alto en SEO Marketing Tools. En dicho posts nos aconsejan e informan como mejorar la indexación de nuestras webs y convertirnos en un especialista SEO en 30 días. La gran mayoria de consejos son de sentido común cuando uno lleva cierto tiempo en este negocio pero otros ni tan siquiera los sabia.
Yo os coloco los 10 que me han gustado, el resto podéis leerlos en su web:
- Tip1. Añade títulos a tus páginas relacionados con tus palabras clave, pero sólo las importantes, no pases de 25 carácteres.
- Tip2. La descripción Meta debe ser única para cada página objetivo de una palabra clave. No añadas palabras clave a la Meta description.
- Tip3. Utiliza CSS para tus páginas, evita las tablas.
- Tip4. Crea enlaces para la navegación por tu sitio en la cabecera y en el pie de página. Utiliza texto y no imágenes.
- Tip5. Las palabras clave en los enlaces para navegación tienen un papel decisivo a ojos de los motores de búsqueda.
- Tip6. Minimiza el uso de tablas, especialmente de tablas anidadas.
- Tip7. Llévate el CSS y el JavaScript a un fichero separado.
- Tip8. Añade un robots.txt a la raíz en tu servidor.
- Tip9. Crea un sitemap Google en tu sitio.
- Tip10. Monitoriza tus accesos y tu tráfico usando Google Analytics.
Enlaces relacionados:
Posted in SEO.
Tagged with google, indexación, sitemaps, trucos.
By phillipo
– Viernes, 17 Abril 2009
Hasta ahora hemos trabajado en la implementación de una clase que nos sirva para gestionar botones. Es muy simple, logicamente, pero con el tiempo la iremos ampliando.
Ahora toca crear un pequeño menu horizontal en este caso y activar el boton para que cuando se pase uno por encima muestre el cursor con el dedo ( hand cursor )
Objetivos
- Ampliar ButtonStd
- Crear menu basado en ButtonStd
- Realizar acciones segun el botón
Archivos requeridos
- ejemplo3.fla
- ButtonStd.as
El código
ButtonStd.as
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
| package {
// Contiene la libreria para objectos MovieClip
import flash.display.MovieClip;
// Contiene la libreria para manipulacion de eventos del raton
import flash.events.MouseEvent;
// Contiene la libreria para manipulacion de textos
import flash.text.TextField;
// Definimos el nombre de la clase
// Debe empezar por mayusculas y tener
// el mismo nombre que el archivo que la contiene
public class ButtonStd extends MovieClip {
// Variables
private var _id :uint;
private var _action :Function;
// Método constructor que inicializa la clase
public function ButtonStd (_label :String, _id :uint, _action :Function) {
this._label = _label ;
this._id = _id ;
this._action = _action ;
this.setEvents ();
}
// Metodo para configurar los eventos asociados al boton
private function setEvents ():void {
// Activamos modo Boton ( cambia el cursor al pasar por encima )
this.buttonMode = true;
this.useHandCursor = true;
this.mouseChildren = false;
// asociamos un metodo al evento de pulsar el raton
addEventListener(MouseEvent.CLICK, click_handler );
// asociamos un metodo al evento de pasar por encima con el raton
addEventListener(MouseEvent.MOUSE_OVER, over_handler );
// asociamos un metodo al evento salir del boton con el raton
addEventListener(MouseEvent.MOUSE_OUT, out_handler );
}
// Metodo 'setter' para modificar la etiqueta del boton
public function set _label (_label :String):void {
// Usamos la función getChildByName cuando queremos buscar un
// elemento creado directamente en este caso y con nombre
// label_txt. Por otra parte decimos que dicho elemento es
// de tipo TextField mediante as [tipo]
this.label_txt = getChildByName("label_txt") as TextField;
label_txt .text = _label ;
}
// Metodos relacionados con los eventos
private function click_handler (event :MouseEvent):void {
this._action (this._id );
}
private function over_handler (event :MouseEvent):void {
this.label_txt .textColor = 0xff0000 ;
}
private function out_handler (event :MouseEvent):void {
this.label_txt .textColor = 0x333333 ;
}
}
} |
El código
Hemos añadido a nuestro código una pequeña mejora. Cuando pasamos sobre un elemento que tiene la opción de ser pulsado, debemos mostrar un icono de cursor diferente.
En AS2 usabamos useHandCursor ( true / false ) y ya estaba. Con AS3 usariamos lo siguiente:
1
2
3
| this.buttonMode = true;
this.useHandCursor = true;
this.mouseChildren = false; |
Fijaros que dicho código lo uso solo dentro de setEvents que es el método que gestiona los eventos.
Ahora revisemos como podemos hacer que un determinado botón realice acciones adecuadas para él mismo.
1
2
3
4
| // Metodos relacionados con los eventos
private function click_handler (event :MouseEvent):void {
this._action (this._id );
} |
Hemos añadido dos nuevas variables, las dos serán inicializadas mediante parámetros externos cuando el boton sea inicializado. El primero es un identificador ( id ) del botón que estamos usando. En este caso dicho identificativo sera un número, muy útil para arrays y xml. Por otra parte, cuando pulsemos nuestro boton lanzaremos una acción. Dicha acción ( o función ) activará un determinado código segun el id del botón.
ejemplo3.fla
Ahora debemos abrir nuestro archivo fla. Si teneis el anterior ejemplo2 podeis reeditarlo, o sino seguid los pasos de este post.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| // Array con etiquetas de los botones
var labels:Array = new Array('Quienes somos','Objetivos','Productos','Contactar');
// Recorremos array creando botones
var nElements :Number = labels.length;
for (var i :Number = 0; i < ; nElements ; i ++) {
// Instancializamos la clase ButtonStd
var myLabel :String = labels[i ];
var myButton :ButtonStd = new ButtonStd (myLabel , i , doActionMainMenu );
// Ubicamos el nuevo ButtonStd ( fijaros que no es _x,_y o _width)
myButton .x = 100 + ((myButton .width + 10 ) * i );
myButton .y = 100;
// Añadimos el ButtonStd al escenario
// esto equivale a un attachMovie
addChild(myButton );
}
function doActionMainMenu (id :uint):void {
trace("Accion del elemento: " + labels[id ]);
} |
El código es bastante sencillo, cuando pulsamos un boton internamente llama a la función asociada y le pasa como parámetro el id del boton pulsado. Posteriormente, en el código del fla, realizamos una accion para dicho id. Por ejemplo, podriamos cargar un xml, un clip externo, abrir un menu, etc..
Posted in AS3.
Tagged with actionscript 3, adobe, boton, Flash.
By phillipo
– Domingo, 8 Marzo 2009
