Archive for month: March, 2009

10Mar 2009 27 Comments

Validar formularios ajax jquery

Categories: AJAX - Tags: , ,

Siempre que hacemos un formulario, necesitamos un script de validación, el problema es siempre tener un script que sea facil de usar, lo suficientemente flexible para que funcione en cualquier formulario y que sea personalizable, encontré justamente eso.

HTML de formulario para validar

Solo debemos fijarnos bien en el id del formulario y para los campos que deseamos validar agregar una clase required, email, etc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form name="comentariosFrm" id="comentariosFrm" method="post" action="">   
    <ol>
        <li>
            <label>Nombre: (requerido al menos dos caracteres)</label>
            <input id="cname" name="name" class="required" minlength="2" />
        </li>
        <li>
            <label>E-mail: (requerido)</label>
            <input id="cemail" name="email" class="required email" minlength="2" />
        </li>
        <li>
            <label>Tu página web: (opcional)</label>
            <input id="curl" name="url" class="url" value="" />
        </li>
        <li>
            <label>Comentarios: (requerido)</label>
            <textarea id="ccomentario" name="comentario" class="required"></textarea>
        </li>
        <p align="center"><input type="submit" name="submit" value="Enviar" /></p>
    </ol>
    </form>

Agregar el validador

Primero debemos incluir la libreria jquery, el validador y con una sola linea de texto le decimos que formulario validar

1
2
3
4
5
6
7
<script src="js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#comentariosFrm").validate();
});
</script>

Puedes ver más ejemplos y descargar el script en la página de Bassistance



06Mar 2009 0 Comments

Agrega graficos estadisticos pie ajax

Categories: AJAX, Diseño, Otros - Tags: ,

Hace poco encontré un plugin para jquery que nos permite hacer gráficos de barras usando CANVAS, puedes descargar el plugin de aqui recuerda que canvas aun no es soportado por IE, por lo que para hacerlo compatible deberás usar una script js que te permita usar Explorer Canvas para hacerlo compatible.

El funcionamiento del script es muy sencillo, solo debes tener todos tus datos en una tabla y el plugin se encarga del resto con una sola linea, además es posible elegir multiples estilos de graficos pie, bar, area, line, stacked bar.

Codigo html de los graficos estadisticos

Como ya dije solo debes ingresar tus datos mediante una tabla simple

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
<table id="dataTable" summary="Member Data from 2000 to 2006">
    <caption>Member Data from 2000 to 2006</caption>
    <thead>
        <tr>
            <td></td>
            <th id="2000">2000</th>
            <th id="2001">2001</th>
            <th id="2002">2002</th>
            <th id="2003">2003</th>
            <th id="2004">2004</th>        
        </tr>
    </thead>
    <tfoot>
       
    </tfoot>
    <tbody>
        <tr>
            <th headers="members">Mary</th>
            <td headers="2000">150</td>
            <td headers="2001">160</td>
            <td headers="2002">40</td>
            <td headers="2003">120</td>
            <td headers="2004">30</td>
        </tr>
        <tr>
            <th headers="members">Tom</th>
            <td headers="2000">3</td>
            <td headers="2001">40</td>
            <td headers="2002">30</td>
            <td headers="2003">45</td>
            <td headers="2004">35</td>
        </tr>
        <tr>
            <th headers="members">Brad</th>
            <td headers="2000">10</td>
            <td headers="2001">00</td>
            <td headers="2002">10</td>
            <td headers="2003">85</td>
            <td headers="2004">25</td>
        </tr>
        <tr>
            <th headers="members">Kate</th>
            <td headers="2000">40</td>
            <td headers="2001">80</td>
            <td headers="2002">90</td>
            <td headers="2003">25</td>
            <td headers="2004">15</td>
        </tr>      
    </tbody>
</table>

Luego debes definir el espacio donde estará ubicado el canvas

1
<canvas id="chart1" class="fgCharting_src-dataTable_type-pie" width="400" height="400"></canvas>

Fijate bien en la clase ya que esta te permitirá elegir el tipo de grafico a representar, en los estilos también asegurate de usar un tamaño de letra pequeño para el body ya que de lo contrario podría deformarse el grafico.

AJAX – Jquery

Finalmente dibujamos el grafico estadistico con una sola linea de codigo

1
$.fgCharting();






04Mar 2009 0 Comments

Como subo una pagina web a internet ftp

Categories: Otros - Tags: ,

Para los que recién empiezan con el tema del diseño web, resulta un problema elegir un hosting, un dominio y luego como subir la página web resulta todo un misterio y no es tan complicado, veamos:

El Dominio

Muchos de los que recien empiezan seguro optaron por algún dominio gratuito como .tk u otro similar pero a la larga es mucho mejor tener un dominio propio ya que esos dminios gratuitos llenan de propaganda nuestra página web y no son bien vistos por nuestros potenciales clientes, además los dominios actualmente son económicos sólo $10 por año y podemos comprarlos en godaddy.com u otro.

El Hosting

En internet hay varios hosting gratuito como por ejemplo geocities, galeon, etc pero dan un hosting limitado y con propaganda, así que mejor elegimos uno pagado de los muchos que hay y de todo precio; los principales puntos que debemos tener en cuenta son:

  • Espacio disponible: Si nuestra página web no es una galeria fotografica o no tenemos videos rara vez superará los 10Mb, si tiene muchas fotos tal vez llegue a los 70Mb
  • Tráfico: Esto depende de la cantidad de visitantes que tengamos, sólo como referencia diré que una página que tenga 200 visitantes diarios en un mes puede generar 3Gb de tráfico, claro ese valor varia según la cantidad de fotos y descargas disponibles
  • Soporte PHP: No todos los hosting soportan PHP y si queremos usar una aplicación dinámica debemos fijarnos ese factor y además ver que soporte la última versión PHP 5
  • Bases de Datos: La mayoría de hosting solo soportan 1 o 2 bases de datos en su paquete más económico lo que normalmente debe ser suficiente
  • CPanel: Este es el sistema para gestión de hosting más popular y fácil de manejar es mejor buscar un hosting con este para contar con soporte y tutoriales en Internet

Existen muchos más factores dependiendo de nuestra página web pero los que he mencionado son los principales.

¿Cómo subo la página?

Una vez que tenemos nuestro hosting y dominio, debemos acceder al FTP (Files Transfer Protocol) si usamos cpanel el usuario y contraseña del FTP será el mismo que el cpanel (en el 99% de los casos); si usamos un hosting en godaddy debemos crear un usuario FTP para subir nuestros archivos.
Respecto al software necesario, hay varios clientes de FTP gratuitos, yo prefiero usar Filezilla, para subir unicamente ingress tu dirección (sin http://), tu usuario, contraseña, normalmente no hace falta ingresar el número de puerto, click en connect y aparecerá un mensaje indicandonos que nos hemos conectado.
¿En que carpeta subo mis archivos? Normalmente una vez dentro del ftp veremos una carpeta public_html o www, dentro de esta subimos nuestros archivos, no olvides que el primer archivo en llamarse en nuestra página es index.html o index.php según corresponda.
fz3_win_main

Suscribete

Ahora también puedes suscribirte via correo electrónico

Ingresa tu dirección de correo:

Delivered by FeedBurner


Facebook

Mi Galeria flickr

[ Ver más ]

© Copyright - Miguel Manchego - Design by Kriesi