WebEstudio :: Blog de Diseño Web » JAVASCRIPT

Guía: instertar un editor WYSIWYG con TinyMCE

Jorge Bravo — Wed, 28 Apr 2010 08:00:37 +0000

TinyMCE es un editor HTML On-Line que es capaz de convertir los textarea de un formulario en campos WYSIWYG traspasando todo el trabajo a HTML automáticamente.

Características

Es sencillo de integrar en las páginas web, ya que solo tiene dos líneas de código.
Se puede personalizar a través de temas y plugins.
También se pueden instalar paquetes de idiomas.
Es compatible con la mayoría de los navegadores como Firefox, Internet Explorer, Opera y Safari, aunque este último esta en fase experimental.
Con el compresor GZip para PHP/.NET/JSP/Coldfusion, hace que TinyMCE sea un 75% más pequeño y mucho más rápido de cargar.
Se puede utilizar AJAX para guardar y cargar el contenido.

Integración de TinyMCE

Para poder utilizar TinyMCE es las páginas web, el navegador tiene que ser compatible y tener Javascript habilitado.

Primero hay de descargar TinyMCE desde la siguiente página de descargas: http://tinymce.moxiecode.com/download.php. Después hay que descomprimirlo y guardarlo en el servidor de la página web para poder utilizarlo en los textarea de los formularios.

En la página que se vaya a utilizar, primero hay que incluir la librería tiny_mce.js incluyendo el archivo externo de código Javascript.

1	<script language="javascript" type="text/javascript" src="/tinymce/jscripts/tiny_mce/tiny_mce.js">script>

A continuación hay que inicializar TinyMCE para convertir los textarea en campos de texto WYSIWYG editables.

1
2
3
4
5
6
7

Ejemplo de integración de TinyMCE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ejemplo TinyMCE</title>
<script language="javascript" type="text/javascript" src="/tinymce/jscripts/tiny_mce/tiny_mce.js"> </script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced"
});
</script>
</head>

<body>
<form method="post" name="tinymce">
<textarea name="texto" cols="50" rows="15"></textarea>
</form>
</body>
</html>

En este ejemplo primero hemos incluido la librería tiny_mce.js dentro de las etiquetas . También dentro de estas etiquetas también hemos inicializado TinyMCE para que en el textarea del formulario se convierta en un campo de texto WYSIWYG.

Via: Desarrolloweb.com

10 plugins jQuery Muy útil para desarrolladores Web

Jorge Bravo — Wed, 14 Oct 2009 12:27:28 +0000

jQuery como plataforma de desarrollo es grande y vemos el resultado de esto cada día. Casi es difícil de creer pero cada vez que decido buscar un nuevo plugin jQuery para resolver una tarea concreta en mi trabajo me doy cuenta de que la comunidad proporciona constantemente nuevas soluciones de alta calidad de forma gratuita.

El número de contribuciones es muy alto y a mi como desarrollador esto me hace volver cada vez a por más. Supongo que a muchos desarrolladores les ocurrirá algo similar. A veces no somos conscientes del trabajo que todo esto implica y las horas de duro trabajo que conlleva. Muchas gracias a todos por gastar su precioso tiempo en la creación de cosas que todos podemos utilizar. A continuación una lista de 10 plugins de gran ayuda, que te puedes encontrar actualmente.

Form extensions
jQuery Form extensions es un pequeño plugin para ayudar en forma rapida en las tareas relacionadas con jQuery. Realmente simple, pero para muy útil para cualquier desarrollador, es muy bueno tener a mano para llevar a cabo tareas, especialmente si ya están encapsulados como este.

SimplePager – jQuery paging plugin
La premisa detrás de SimplePager es permitir la creación de la paginación o la configuración con el menor esfuerzo posible. Este plugin localiza los divs, párrafos, elementos de la lista o casi cualquier otro contenido. Simple pero muy poderoso!

El articulo original se encuentra en Ingles pero para el caso de este tipo de plugins, las guías son muy sencillas de seguir. En todo caso si hay alguno que os interese y necesitan alguna ayuda, postearla aquí en los comentarios para ver si les puedo ayudar de alguna manera.

Via: www.tripwiremagazine.com (Ingles)

IE6 funcionando como IE7

Jorge Bravo — Fri, 09 Oct 2009 15:45:56 +0000

Para solucionar muchos de los errores y problemas que internet explorer 6 suele dar… Mediante esta estupenda librería desarrollada por Dean Edwards podremos usar png trasparentes en IE6, aplicar :hover a todo tipo de elementos de bloque (no solo a los “a”), y muchísimo más.

Lo mejor es que este nueva versión lo incluye todo en un solo js (ie7.js), y que además ni siquiere es necesario descargar, subir o bajar el js en cuestión, ya que puede enlazarse directamente a Google Code(hotlinking).

1	<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript">script>< ![endif]–>

También existe otra versión de la librería, que añade varias funciones extras: la primera versión es más rápida y menos pesada (yo la recomiendo) pero pueden usarse ambas. La versión extendida se llama ie8.js… Para usarla:

1	<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript">script>< ![endif]–>

Via: www.npicasso.com

Menú desplegable con CSS y JavaScript

Jorge Bravo — Thu, 20 Aug 2009 08:00:15 +0000

Hola a todos hoy respondere a un correo con una consulta de un amigo, que me preguntaba por programas para, generar menúes desplegables con CSSy JavaScript. Bien tratare dos puntos antes de comenzar,

El primero es que no soy nada partidario de los generadores de menús, uno por que muy sencillo crearlos nosotros mismos, segundo quedan obsoletos rapidamente ya que internet cambia demasiado a prisa y a menos que el programa se actualice lo veo dificil que aprenda una manera nueva de generar el menu ademas como extra el hecho de suelen generar mucho codigo realmente inecesario.

Punto dos, son las formas que veremos de generar menus desplegables mediante CSS y JavaScript, supongo y doy por hecho de que quienes sigan la guia tendran unos conocimientos minimos hacerca de los procedimientos que realizaremos, ya que si hay que explicar paso a paso cada una de las cosas que haremos el Post se alargaria demasiado, tampoco es la idea de hacer una clase magistral sobre CSS.

Nota: lo que aqui veamos noes ni mucho menos la mejor de las mejores maneras y tampoco creo que este exenta de errores, tan solo son metodos de trabajo y formas de hacer algo puntual si haceís una busqueda en Google sobre (menu desplegable en CSS) os aseguro que hay una buena cantidad de guias con las cuales podeís complementar esta pequeña reseña.

Luego de esta pequeña intro ons vamos de cabeza al tema que nos trae a la cancha. Primero comenzaremos con los programas para generar menues CSS.

CSS Tab Designer : Creo que es uno de los más conocidos en esta area y de los que mas se utiliza, lo he probado y cumple perfectamente su cometido sin dejarnos un bodrio muy grande de codigo para su funcionamiento.

Con CSS Tab Designer puedes:

- Diseñar rápidamente tu lista visualmente.
- Elegir una variedad de estilos y colores grande (más de 60 diseños y colores).
- Generar el código final de xhtml con un solo click.

Enlace de Descarga: CSS Tab Designer

PureCSSMenu.com : Es un generador en línea de menús desplegables del tipo CSS, se ofrece en forma gratuita. Este software es capaz de crear un menú desplegable sin JavaScript, en un 100% en CSS, ofrece menús CSS horizontales y también menús del tipo vertical. El usuario simplemente necesitará realizar tres sencillos pasos para poder construir sus menús CSS.

Enlace de descarga: PureCSSMenu

IzzyMenu : es una aplicación web desarrollada en Ajax que nos permite crear menus css de una manera por demas sencilla. Tiene una lista de diseños predefinidos entre los cuales hay unos muy buenos y que de seguro te serviran para tus diseños y desarrollos web.
Podemos escoger entre crear un menú horizontal y un menú vertical, asi como configurar el tamaño de fuente, el estilo de fuente, color, color de fondo entre muchas otras opciones.

Enlace de descarga: IzzyMenu

CSSmenubuilder.com : Otra herramienta que además genera código bastante más “limpio”. Su galería de menús predefinidos en mucho más corta pero a cambio podemos modificarlos totalmente sin necesidad de tocar el código.
La única desventaja que le encuentro es que no podemos generar la estructura de enlaces desde la propia herramienta. Aunque tampoco es ningún drama pues la propia herramienta nos permite crearla a mano.

Enlace de descarga: CSSmenubuilder.com

Ahora veremos como crear nosotros mismos esto que nos generan estos programas de manera tan sencilla, obiamente tardaremos algo más, pero estoy seguro de que aprenderemos mucho más y lo mas importantes que el limite lo pone nuestra imaginación y no la cantidad de diseño que trae incorporado algun programa. jejejje estuve a punto de decir programa cutre.

Muchas veces, nuestras páginas tienen tantos contenidos que si quisiéramos que apareciesen todos estos en un determinado lugar de nuestra página, en un menú, este abarcaría casi la totalidad del espacio que tenemos para nuestra web. En estos casos es muy útil insertar uno o varios de estos menús desplegables, apareciendo por encima del propio contenido de la página para mostrar todas sus partes y desapareciendo posteriormente.

Preparamos el codigo CSS para las cajas del menu

1
2
3
4
5
6
7
8
9
10
11

body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#marco {
width:455px;
margin:10px 0;
padding:0px;
text-align:left;
}

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

/*Creditos: WebEstudio */
.preload2 {
background: url(button4a.gif);
}
.menu2 {
padding:0;
margin:0;
margin-bottom:0;
list-style:none;
height:25px;
background:#fff url(fd_menu.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
}
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {
display:block;
float:left;
height:25px;
margin-left:6px;
line-height:25px;
color:#333;
text-decoration:none;
font-size:11px;
font-weight:bold;
padding:0 0 0 6px;
cursor:pointer;
}
.menu2 li a.top_link span {
float:left;
display:block;
padding:0 10px 0 6px;
height:40px;
}
.menu2 li a.top_link span.down {
float:left;
display:block;
padding:0 10px 0 6px;
height:25px;
/*background:url(prodrop2/down.gif) no-repeat right top;*/
}
.menu2 li a.top_link:hover {color:#fff; background:url(button4a.gif);}
.menu2 li a.top_link:hover span { background:url(button4a.gif)}
.menu2 li a.top_link:hover span.down { background:url(button4a.gif)}

.menu2 li:hover >; a.top_link {color:#fff; background:url(button4a.gif);}
.menu2 li:hover >; a.top_link span {background:url(button4a.gif);}
.menu2 li:hover >; a.top_link span.down {background:url(button4a.gif);}

.menu2 table {
border-collapse:collapse;
width:0; height:0;
position:absolute;
top:0; left:0;
}

Como pueden ver esta parte no es muy compleja aun que si un poco extensa.
Ahora los estilos para los enlaces y el submenu.

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

/* Estilo por defecto para los links */
/* Estilo para link hover. Dependiendo del navegador que se use */

.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}

/* mantener el "siguiente nivel" invisibles colocándolo fuera de la pantalla. */
.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {
position:absolute;
left:-9999px;
top:-9999px;
width:0;
height:0;
margin:0;
padding:0;
list-style:none;
}

.menu2 :hover ul.sub {
left:6px;
top:25px;
background: #fff;
padding:0;
/*border:1px solid #1E8BB5; white-space:nowrap;*/
width:auto;
height:auto;
font-weight:normal;
}
.menu2 :hover ul.sub li {display:block; /*height:20px; */position:relative; float:left; width:160px; border-bottom:1px solid #005FB9; border-left:1px solid #005FB9; border-right:1px solid #005FB9; margin-bottom:0;}
.menu2 :hover ul.sub li a {display:block; height:auto; font-size:11px; padding:4px 3px; line-height:1; color:#005FB9; text-decoration:none;}
.menu2 :hover ul.sub li a.fly {background:#fff url(vineta_menu.gif) no-repeat 150px 6px;}
.menu2 :hover ul.sub li a:hover {background:#E5FAFC; color:#005FB9;}
.menu2 :hover ul.sub li a.fly:hover {background:#E5FAFC url(vineta_menu.gif) no-repeat 150px 6px;}
.menu2 :hover ul li:hover >; a.fly {background:#E5FAFC}

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul{
left:160px;
top:-1px;
background: #fff;
padding:0; /* white-space:nowrap; */
width:auto;
z-index:300;
height:auto;
}
.menu2 :hover ul.sub li ul {border-top:1px solid #005FB9; background: #fff; z-index:300;}

Ahora el HTML donde pondremos nuestro menu
Como puene ver en el codigo HTML se ha aplicado un hack para poder har funcional el menu en navegadores antiguos como IE6

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
70
71
72
73
74
75
76
77
78
79
80

<div id="marco"><span class="preload2"> </span>

<ul class="menu2"><img src="menu_izq.gif" alt="" align="left" /><img src="menu_der.gif" alt="" align="right" />
<li class="top"><a id="telmex" class="top_link" href="#"><span class="down">La Compañia</span>
</a>

<ul class="sub">
<li><a href="#">Acerca de Nosotros</a></li>
<li><a href="#">Filosofía</a></li>
<li><a href="#">Código de Etica</a></li>
<li><a href="#">Inducción a Empleados</a></li>
</ul>
</li>
<li class="top"><a id="Direcciones" class="top_link" href="#"><span class="down">Direcciones</span></a>

<ul class="sub">
<li><a class="fly" href="#">Dirección Legal</a>

<ul>
<li><a href="#">Gerencia 1</a></li>
<li><a href="#">Gerencia 2</a></li>
<li><a href="#">Gerencia 3</a></li>
</ul>
</li>
<li class="mid"><a class="fly" href="../boxes/">Dirección de Mercadeo</a>

<ul>
<li><a href="#">Gerencia de Comunicaciones Internas</a></li>
<li><a href="#">Información de Productos</a></li>
<li><a href="#">Soporte a Ventas</a></li>
</ul>
</li>
<li><a href="../mozilla/">Dirección Administrativa y Financiera</a></li>
<li><a href="../ie/">Dirección Operaciones</a></li>
<li><a href="../opacity/">Dirección Cuidado al Cliente</a></li>
</ul>
</li>
<li class="top"><a id="Comunicacion" class="top_link" href="#"><span class="down">Comunicaciones</span></a>

<ul class="sub">
<li><a href="#">Zoom Noticias</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Enterate</a></li>
<li><a href="#">Manual de Marca</a></li>
<li><a href="#">Presentaciones</a></li>
</ul>
</li>
</ul>
</div>

Bueno espero vuestros comentarios y sugerencias como siempre.

Descarga del ejercicio: Archivos del Menu CSS (641)

Imágenes con esquinas redondeadas utilizando javascript

Jorge Bravo — Sat, 01 Aug 2009 10:44:56 +0000

Glossy.js 1.3 es una pequeña librería Javascript que nos permite agregar instantáneamente esquinas redondeadas a las imágenes de nuestra web, evitando de esta forma tener que caer en la edición individual de cada una de ellas. El efecto que lograremos será el de la imagen del post.

Este script ya es antiguo y seguro muchos ya lo conoceran pero no esta de mas hacer repaso para los que aun no lo han probado.

Utilización:

Primero descargamos la librería Glossy.js y la alojamos en nuestro servidor.
Hacemos el llamado a la librería agregando en nuestro encabezado, antes de la etiqueta < / header> lo siguiente:

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

Modo de uso:
Cuando deseamos usarla agregamos a nuestras imágenes la clase “glossy”
EJ:

1	<img class="glossy" src="images/foto.jpg" alt="" />

Otros Parámetros:
Radios
Podremos varias el radio del efecto agregando “iradius” seguido por el radio deseado en porcentaje clase “iradius25” (min=20 max=50 default=25 del radio) La foto que acompaña el post posee un radio de 50.
Ej:

1	<img class="glossy iradius25" src="images/foto.jpg" alt="" />

Color de fondo:
Podremos variar el color de fondo agregando “ ibgcolor” seguido por el color deseado expresado en hexadecimal: (max=ffffff min=000000 default=0)
EJ:

1	<img class="glossy ibgcolor000000" src="images/foto.jpg" alt="" />

Color de gradiente:
Podremos variar el color del gradiente agregando” igradient” seguido por el color deseado
(Max=ffffff min=000000 default=0)

1	<img class="glossy igradient000000" src="images/foto.jpg" alt="" />

Sitio Web: glossy.zip
Descarga: www.netzgesta.de

Panel de control deslizante con jQuery

Jorge Bravo — Tue, 28 Jul 2009 11:00:57 +0000

Panel de control deslizante con jQuery es XHTML totalmente valido y esta nueva versión trae soporte para transparencias PNG de serie, para IE6 con lo cual nos ahorrara unos cuantos dolores de cabeza a la hora de insertar en nuestro proyecto.

A diferencia de versiones anteriores de este mismo script, al deslizar el cuadro este no desplaza el contenido de nuestro sitio sino que lo solapa que a mi me parece mas vistoso que el desplazamiento de todo el contenido del sitio. También se a agregado el botón de login | registro que es que activa o desactiva la función de Slide.

Enlace: www.web-kreation.com
Demo: Slide demo

Ejemplo sencillo con Ajax – Comprobar disponibilidad de un nick

Jorge Bravo — Sun, 19 Jul 2009 21:45:40 +0000

Este es un ejemplo sencillo de ajax para comprobar si ya existe el nick del usuario en la base de datos cuando se va a registrar. El ejemplo claramente puede ampliarse para dejarlo mas profesional, pero lo realmente importantes es que apreciemos el potencial de este tipo de scripts.

La única librería que necesitamos descargar es prototype.js y llamarla en el HEAD de nuestra web:

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

En el formulario, en el INPUT donde hay que introducir el nick de usuario pondremos un evento javascript onKeyUp llamando a nuestra función para comprobar si existe el nick. Usamos el evento onKeyUp para que se llame a la función cada vez que se introduzca una letra. También insertamos una sección SPAN, donde se escribirá si existe el usuario o no.

1	<input onkeyup="comprobar(this.value)" name="nickname" />

Aqui nuestra etiqueta SPAN para que muestre el resultado

1	<span id=”comprobar_mensaje” ></span>

Ahora definimos también la función “comprobar” dentro del HEAD:

1
2
3
4
5
6
7
8
9

La variable “url” es la dirección donde se encuentra el archivo php que comprobará si existe el nick en la base de datos.
En la variable “pars” escribimos las diferentes varibles que vamos a pasar al anterior php.
El primer parámetro de Ajax.Updater es la etiqueta html que se va a actualizar con el resultado de la función (diciendo si existe el usuario o no). El segundo parámetro es la variable “url” con la dirección del archivo php que ya hemos definido antes. En el tercer parámetro decimos el método por el que pasar las variables a la función (normalmente GET) y las variables que vamos pasar (que hemos definido en la variable “pars”).

El archivo ajax_comprobar_nick.php tendrá el siguiente contenido:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// Que no se nos olvide incluir nuestro fichero con la conexion a la base de datos.
include("conexion.php");
$nick=$_REQUEST['nickname'];
$sql="SELECT nick FROM usuarios WHERE nick='$nick'";
$res=mysql_query($sql);
$total=mysql_num_rows($res);
if($total>0)
{
// El usuario existe en la Base de Datos
echo "Este nick está ocupado";
}
else
{
// Ese nick esta libre
echo "Nick libre";
}
>

Ahora cada vez que se escriba una letra en el campo nick del formulario, se llamará al fichero php anterior para comprobar si existe el nick en la base de datos y se actualizará el campo SPAN “comprobar_mensaje” con el resultado.

Archivos del ejercicio (673)
Articulo Original : NotasWeb

jCart Carrito de compras con jQuery + PHP + CSS

Jorge Bravo — Fri, 26 Jun 2009 15:18:54 +0000

Buscando información sobre distintos plugs o scripts para un artículo me encuentro en Webintenta con un artículo sobre este escript que viene a simplificar mucho las cosas a la hora de integrar un carro de compras en nuestros trabajos o en nuestra web personal, no lo podemos comparar obviamente con herramientas como Prestashop, Magento o Zencart pero como dije antes para trabajos que desarrollemos y necesiten algo personalizado seguro que nos saca de mas de un apuro y nos ahorramos de escribir un par de lineas de código.

Ha sido desarrollado con jQuery, Php y XML pudiendo personalizar su aspecto fácilmente (con unos pocos conocimientos de CSS), otro de los puntos a favor es que tiene un sistema de validación de lado del servidor.
jCart es fácil de instalar y de configurar. Añade los artículos al carrito en Ajax pero también funciona sin javascript.

Características principales:

Simple integración en tu web
Valida en XHTML
Pesa solo 4 kb con javascript no intrusivo
Todas las funcionalidades sin javascript
Validaciones en el servidor
Fácil de cambiar el CSS y los textos
Todo el código comentado.

Descarga: jCart
Vía: Webintenta