Sep 25, 2011

jorgeu

Implementando paginado continuo al estilo google images con JQuery+PHP+JSON

De hace un tiempo hemos visto el principio del fin de las páginas que muestran información de la página 1 y ofrecen ir a la siguiente, la 2, la 3... la última. Uno de los casos más vistosos es Google Images. Al finalizar la página de resultados se ofrece un botón para cargar más en sitio sin abrir otra página.

En este post veremos una manera de implementar algo parecido con JQuery. Del lado del servidor se simplificará con PHP+JSON. Del lado de la página usaremos rutinas JavaScript+jQuery lo más sencilla posible.

Seguir leyendo...

Tags: html javascript php json jquery

Mar 09, 2011

uokesita

Curso HTML5 - Mozilla Venezuela

Este 25 y 26 de marzo en Maturin, Manuel Camacho (@maedca) representante de Mozilla Venezula dará un curso de HTML5

Estos son solo un poco del contenido que se verán en el curso:

  • Características del lenguaje HTML
  • Primeros pasos con HTML
  • Uso de fuentes
  • Manipulación de imágenes
  • Estándares de HTML
  • Los nuevos elementos y atributos
  • Audio, Video y Canvas
  • Aplicaciones OFFline
  • Geolocalizacion

El curso sera certificado por Mozilla Venezuela

Para mayor información comunícate con Marcos Morales vía marcosaugustomorales@gmail.com o maturin@cointtec.com.ve

Tags: html5 css eventos general

Dec 27, 2010

uokesita

Windows Live Messenger en tu página Web

Windows Live™ Messenger IM es un control que nos permite añadir en nuestro sitio el "cliente de messenger" asociado a nuestra cuenta asi cualquiera que visite nuestra página podrá enviarnos un mensaje a sin necesidad de descargar ni instalar plugin alguno.


1. Ir a la dirección http://settings.messenger.live.com/applications/websettings.aspx y loguearte con tu cuenta de Windows Live.


2. En Configuración Web ir a la parte de Configurar y marcar la casilla Permitir que todos los usuarios de Internet vean mi estado en línea y me envíen mensajes


3. Posteriormente pasamos a Crear HTML y podemos escoger entre sólo mostrar un icono de estado o bien integrar el sistema de messenger para que puedan conversar directamente con nosotros.


4. Una vez seleccionado, nos proporcionan un código HTML que hemos de añadir en dónde queremos que se muestre.


Como prueba he añadido el control en ésta página.




Tags: html

Dec 27, 2010

uokesita

Links remotos

Links remotos se refiere a cuando una etiqueta de enlace posee múltiples áreas clikeables en diferentes zonas.



Para hacerlo solo debes colocar todo lo que quieres que sea parte del area de rollover dentro de un tag de enlace, asi:


              <a href="#php" id="php">
                      <span class="name">Php</span><br />
                      Lorem ipsum dolor sit amet
                      <img src="php.png" alt="Php Lang" class="photo" />
              </a>

Luego en el css posicionamos las imágenes absolutamente y le damos estilo a los hover


              body { margin:0 30%; text-aling:center}
              .people { position: relative; width:400px;}
              a { text-decoration: none; color: #222; display: block; margin: 0 0 0 270px; outline: none; padding: 5px; }
              a img        { border: 1px solid #ccc; display: block; position: absolute; }
              a:hover { background: #ccc; }
              a .name { font: 18px Georgia, Serif; }
              a:hover .name { color: #900; font-weight: bold; }
              a:hover img         { border: 5px solid #222; margin: -4px; }
              #php img { top: 0; left: 0; }
              #ruby img { top: 0; left: 134px; }
              #java img { top: 134px; left: 0; }
              #python img { top: 134px; left: 134px; }

Tags: html css

Dec 27, 2010

uokesita

Barras con css

Una barra de gráficos básica 
              <style>
                  .graph { 
                      position: relative; /* IE is dumb */
                      width: 200px; 
                      border: 1px solid #B1D632; 
                      padding: 2px; 
                  }
                  .graph .bar { 
                      display: block;
                      position: relative;
                      background: #B1D632; 
                      text-align: center; 
                      color: #333; 
                      height: 2em; 
                      line-height: 2em;            
                  }
                  .graph .bar span { position: absolute; left: 1em; }
              </style>
              <div class="graph">
                  <strong class="bar" style="width: 24%;">24%</strong>
              </div>

El tamaño de la barra puede variar si le cambiamos el width que tiene en el inline. Igualmente le pueden pasar datos de alguna consulta php.

Tags: css html

Dec 27, 2010

uokesita

Contador en un boton

Alguna vez has querido hacer un botón que lleve la cuanta hacia atrás, y que al terminar la cuenta te permita ir a otra pagina, o descargar algún archivo?

Bien, crearemos nuestro formulario con un botón llamado contador, que estará desabilitado mientras no se haya cumplido el tiempo establecido... En el cuerpo de la página llamaremos a la función JavaScript cuenta atras()

              <html>
              <head></head>
              <body onload="cuentaatras()">
                 <form action="#">
                    <input type="button" id="contador" disabled="disabled"/>
                 </form>
              </body>
              </html>

Ahora la función JavaScript puede ir en la cabecera de la pagina o en un archivo aparte que luego debemos enlazar.

En esta función cuentaatras(), el valor de la variable cuenta indicará la cantidad de tiempo a esperar. Al cumplirse el tiempo, el botón se activará y mostrará un texto para continuar.

              <script language="javascript">
              cuenta = 5;
              function cuentaatras() {
                 document.getElementById('contador').value = "espera " + cuenta + " seg.";
                 if (cuenta > 0) {
                 setTimeout("cuentaatras()", 1000);
                 } else {
                    document.getElementById('contador').value = "continuar...";
                    document.getElementById('contador').disabled = false;
                 }
                 cuenta = cuenta - 1
              }
              </script>

Tags: html javascript

Dec 22, 2010

uokesita

Sticky Footer, footer fijo con CSS

Quieres colocar un footer fijo en tu página? bien, te ayudaré un poco. Éste código sirve en Firefox(3.0.7), IE (7), Opera(9.63), Safari (3.2.2)
Coloca este código en hoja de estilo 
              html, body, #contenedor { height: 100%; }
              #principal { padding-bottom: 150px; }  /* debe ser del mismo alto que el footer */
              #footer {
                margin-top: -150px; /* alto del footer en negativo */
                height: 150px;
                clear:both;
                background-color:#000 
              }
Y éste código en tu archivo html 
              <div id="contenedor">
                <div id="principal">
                  <!--contenido principal-->
                </div>
              </div>
              <div id="footer">
                <!--contenido del footer-->
              </div>

Tags: html css

Dec 21, 2010

uokesita

Centrar un div horizontalmente

Centrar un div con un diseño liquido
El centrado de div en diseños líquidos básicamente se limita a colocar la misma distancia del margen derecho y el margen izquierdo usando medidas porcentuales. 
<div style="margin-left:20%; margin-right:20%;
Centrar un div con un diseño de ancho fijo

  • Ambos margenes, derecho e izquierdo deben colocarse en auto.
  • Se debe colocar el ancho del div.

<div style="margin-left:auto; margin-right:auto; width:500px;

Tags: html css