Apr 11, 2011

uokesita

Optimizando nuestro sitio para otros dispositivos usando Media Queries

Optimizar un sitio web para su uso via móvil no debe ser una tarea tediosa la existencia de los media queries nos facilitan esta tarea.

Con los media queries podemos especificar hojas de estilo para disttintos anchos de pantalla, de este modo podemos identificar si la pagina esta siendo visitada desde una pc de escritorio, tablet, o móvil.

Seguir leyendo...

Tags: css3

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

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 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