Código | SOY GIK

Me encanta el HTML 5!

Imprime esta anotacion - 08 Julio, 08 by nacho

Una de las cosas que más me ha gustado del HTML en su versión 5 es la nueva forma de etiquetar. El término HTML posee una sintaxis compatible con HTML4 y XHTML1 publicados en la red, pero no compatible con las características más esotéricas del SGML de HTML4.

HTML5 define detalladas reglas de parse, incluyendo un control de errores, para que esta sintaxis sea compatible con las implementaciones más populares. Cuando lleguemos a sustituir el HTML4 por el HTM5, hacer un blog será mucho más fácil y rápido. Podéis ver por ejemplo la diferencia de marcado entre HTML4 Y HTML5 en estos gráficos:

HTML4	HTML5

Con lo que para hacer un blog, así en pocas líneas se me ocurre el siguiente código que se escribe en segundos. Evitando el “ y el = creo que se ahorra muchísimo:

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

Otra cosilla que también está muy bien pensada es que los elementos de entrada <input /> dispondrán de una serie de tipos (type) nuevos para indicar los diferentes tipos de elementos de entrada posibles:

datetime
datetime-local
date
month
week
time
number
range
email
url

Más info | w3-HTML5
Vía | Luigix

5 Comentarios
Categorias: Internet

Se descubre una posible versión del código fuente de Windows

Imprime esta anotacion - 05 Junio, 08 by nacho

La verdad es que tendría que poner muchos “vía:” porque está por toda la red… el código fuente después del salto…

Lee el resto de la entrada »

6 Comentarios
Categorias: Humor, Friki | Absurdo

Editando el código del footer

Imprime esta anotacion - 20 Mayo, 08 by nacho

He subido a Youtube un pequeño vídeo que resume un poco el par de horas que estuve con los códigos del footer de SoyGik en el que ahora aparecen los últimos twitts de Miki y míos. La verdad es que estuvo más entretenido los cambios del header pero no me acordé de ponerlo a grabar. (La próxima vez será) Este vídeo fue inspirado en el que subí hace unos días de un diseñador gráfico (aunque no tiene nada que ver con las 40h de diseño gráfico, a apenas, unas 15h; no me quiero comparar ni mucho menos, pero la idea me gustó mucho) Bueno os dejo con el vídeo:

http://www.youtube.com/watch?v=m8koHw1oZR4

Espero que os guste, o por lo menos, sea curioso ver el típico “cómo se hizo”.

3 Comentarios
Categorias: Geek, Curiosidades, Blog

Testeando los tipos de letras para páginas web

Imprime esta anotacion - 29 Abril, 08 by nacho

Para los que escribimos páginas web esta es una de esas herramientas que resultan muy útiles tenerlas a mano. Es un editor de textos en el cual podemos cambiar los diferentes estilos que luego incluiremos en nuestros archivos CSS para dar formato a las letras que aparecerán en los textos de nuestras páginas. Es muy completo, a la derecha tenemos tres textos para poder ir probando las propiedades sobre cada uno por separado; a la izquierda tenemos el menú de la página desde el que podremos elegir las propiedades que queremos aplicarle (font-style, text-decoration, white-space, direction, letter-spacing…) y después seleccionaremos el texto donde queremos ver el resultado. Una vez tengamos el estilo que nos gusta encima de los textos de la derecha nos devuelve el código CSS que abría que poner para conseguirlo, en forma de ID, clase, o tipo e incluso nos devuelve el código en HTML para hacer copy&paste directamente en nuestra página tal cual.

Es de lo más completo y útil que he visto. Seguro que nos ahorrará mucho tiempo a la hora de diseñar páginas.

Enlace | Font Tester

No hay comentarios
Categorias: Servicios Web, Tutoriales | Trucos, Internet

Ophcrack Live CD - crackeando contraseñas de Windows en minutos

Imprime esta anotacion - 24 Marzo, 08 by nacho

El live CD de Ophcrack de código libre, es una herramienta capaz de recuperar la contraseña de una cuenta de Windows. Está diseñada para ayudarte a recuperar las contraseñas perdidas de Windows.

Después de descargar la .iso de 462mb y se quemarla en un CD; nada más reiniciar tu ordenador y arrancar desde CD (live CD), el Ophcrack se cargará y estará automáticamente dispuesto a mostrarte todas las contraseñas que vaya encontrando.

Si os lo queréis descargar para probarlo, podéis probar en su espacio Ophcrack dentro de Sourceforge, o probar el l0phtcrack (aka LC5) desde algún mirror si la anterior no está disponible, que lo dudo.

Fácil, sencillo, y para toda la familia

3 Comentarios
Categorias: Tutoriales | Trucos, Geek, Linux:Ubuntu, Software

Rollovers sobre imagenes sólo con CSS

Imprime esta anotacion - 27 Febrero, 08 by nacho

Introducción

El theme que utilizamos en soygik.com tiene un trozo de código muy interesante que permite hacer que una imágen cambie a otra al pasar el ratón por encima de ella. Explicándome un poco más, realmente esto se consigue con una sola imágen que está dividida en dos partes. Cuando se sitúa el ratón por encima de la imágen, el código hace que se muestre un trozo de la imágen y cuando no está el ratón por encima se muestra otro trozo.

Ejemplo

Para aclararnos las dudas de lo que estoy hablando, mira arriba de la página donde hay una barra de color oscuro, en esa barra a la izquierda pone “Soy Gik .com“, si posas/pasas el ratón por encima del texto, éste cambiará y pondrá la versión del weblog: “versión alpha” (y también tiene un enlace a una página, pero la idea es que cambie, luego después es fácil poner el enlace)

Veamos el código utilizado

El código que permite hacer estos cambios en el trozo de imágen mostrada es:

a.rollover {
display: block;
width: 30px;
height: 30px;
text-decoration: none;
background: url(’imagen.jpg’);
}
a.rollover:hover {
background-position: -30px 0;
}

Este código cambiaría una imágen doble (dos imágenes dentro de una) que estuviera una a la izquierda (la que siempre se va a ver) y otra a la derecha (la imágen que se verá cuando pasemos el ratón por encima). Como podéis ver, con los tamaños que hay, la imágen total sería de 60px (ancho) x 30px (alto). Y cada imágen pequeña sería de 30×30px una al lado de la otra. Éste código lo meteríamos en el archivo CSS de nuestra página.

Y luego, donde queramos poner la imagen que cambia habría que meter el código siguiente:

Personalmente creo que es bastante sencillo y los resultados son muy muy chulos. Esto es válido para navegadores como: Firefox 2, Firefox 1.5, IE 6, IE 7, Opera, Netscape, Safari 2, Safari 3 beta.

Dado que lo he escrito todo de puño y letra espero no haberme equivocado en nada. Si veis algo mal dejarlo en los comentarios.

No hay comentarios
Categorias: Tutoriales | Trucos, Imagenes, Blog

Código fuente del Windows Vista [humor-fake]

Imprime esta anotacion - 19 Febrero, 08 by nacho

Para los que estamos programando todo el día, quizás nos sea más fácil coger la gracia de la imágen. Pero para los que no, tampoco es tan difícil… Teniendo en cuenta que el Windows Vista es como todo el mundo sabe otra versión más del Windows NT, en su versión “n”, es fácil sacar conclusiones como: