jueves, 20 de septiembre de 2012

Efecto de apretar el texto de un boton con CSS3

Hola, bienvenido a esta sección de CSS3 el primer truquito que les traigo es uno muy sencillo de imaginar si son conocedores de CSS3, pero que le da un efecto muy bueno a nuestras páginas.

Ese efecto es el siguiente, si tienes links que son imágenes o texto, estos permanecen estáticos al momento en que se les da clic, es decir, no tienen ese efecto de "apretar un botón", con este sencillo código puesto directamente en nuestro archivo CSS lograremos ese efecto deseado:

lunes, 17 de septiembre de 2012

Usar iframes en tu sitio web

Si bien esta etiqueta no es propia de HTML5, sino que se usa desde la versión 4, es una poderosa herramienta de diseño web a la cual le podemos sacar mucha usabilidad para nuestro sitio.

¿Qué es un iframe?

Es una forma de poner una pagina web DENTRO de nuestra página web sin necesidad de abrir otra pestaña del navegador.

¿Cómo se utiliza?

bueno para contestar eso aquí les dejo el código y posteriormente la explicación.
<!DOCTYPE html>
<html>
<body>
<iframe src="http://jesquivel.zxq.net" width="400" height="400"></iframe>
<p>Algunos navegadores antiguos no soportan iframes.</p>
<p>si es así no veras nada de pagina embebida</p>
</body>
</html>

Como puedes apreciar basta con utilizar la etiqueta <iframe>

En el modificador src ponemos la URL del sitio que queramos mostrar y luego definimos el tamaño.

Para terminar solo comentarles que el iframe tambien cuenta con el modificador frameborders que determina el tamaño del borde que rodeará al iframes, si no queremos borde le ponemos un valor de 0.

Esto es todo por el momento, no olvides comentar y nos leemos luego!!!

Agregar audio a tu web con HTML5

Si visitaste la entrada de como poner video en tu web con HTML5, notarás que poner audio es exactamente igual, solo cambia obviamente la etiqueta principal, pero los beneficios son los mismos, es decir, podrás reproducir audio sin necesidad de complementos.

Sin más, aquí el código:
<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="tumusica.ogg" type="audio/ogg" />
<source src="tumusica.mp3" type="audio/mpeg" />
Tu navegador no soporta el audio HTML5
</audio>
</body>
</html>

Eso es todo por ahora, no olvides comentar y nos leemos luego!!!

Tags eliminados en HTML5

La siguiente es una lista de aquellas etiquetas de HTML4 que YA NO FUNCIONAN en HTML5. solo para tenerlo en cuenta:

 

  • <acronym>

  • <applet>

  • <basefont>

  • <big>

  • <center>

  • <dir>

  • <font>

  • <frame>

  • <frameset>

  • <noframes>

  • <strike>

  • <tt>


Esas son todas, espero les sea de ayuda y nos leemos luego!!!

Agregar video a tu sitio web con HTML5

Una de las principales ventajas de usar HTML5 es que ya puedes añadir video de forma nativa sin tener que depender del molestoso plugin de Flash u otros recursos externos que hacen que tu sitio web sea menos compatible.

En esta entrda les voy a mostrar como poner video en nuestro sitio web utilizando unicamente código en HTML5

Y sin más que agregar aquí les dejo el código.

domingo, 16 de septiembre de 2012

10 Sitios Excelentes hechos totalmente con HTML5

Si todavía no aprendes HTML5 aquí te van algunos ejemplo de TODO lo que puedes hacer con este lenguaje de marcas.

Espero y te motive y si quieres que inicie un tutorial con el sello de la casa sobre este tema no dudes en pedirlo

THE KILLERS
http://www.thekillersmusic.com/html5

jueves, 13 de septiembre de 2012

Textura de cielos para tus fondos Web con Photoshop

Aquí con el segundo de estos tutoriales paradiseñadores Web, en esta ocasión vamos a hacer un efecto de cielo para textura de fondo Web.






























Crea un área de trabajo File> New de 800 x 800 pixeles con color azul de fondo photoshop (#4272D7)photoshop
Aplica Filter> Render> Difference Clouds photoshop
Invierte los colores usados en el área de trabajo usando Image> Adjust> Invert photoshop
Puedes alterar los tonos y los colores para obtener diferentes resultados como cielos mas azules, nubes mas claras, cielos grises para días lluviosos.

Recuerda que todos los valores y colores son recomendaciones, que eso no limite tu creatividad jejeje.

Bueno eso es todo por esta entrada. Nos leemos luego!!!!

Textura de madera para tus fondos Web con Photoshop

Una de las cosas que más se nos dificulta a los diseñadores Web informáticos, es la creación de nuestros propios recursos de diseño para el sitio en cuestión.

Por ese motivo me daré a la tarea de iniciar una serie de entradas donde muestro como realizar texturas con Photoshop para poder usarlas como fondo en nuestros sitios Web con la ayuda de css3.

Cabe destacar que para ellos me basaré en tutoriales existentes haciendoles pequeñas modificaciones y/o adiciones.

También les menciono por adelantado que esta es solo UNA de varias maneras en las que podrían realizarse, bueno sin más les dejo la primera de ellas que es la de un fondo de madera.


























Un fondo muy fácil de hacer que da muchas posibilidades.1 . Abrimos un tapiz de 150x150 (es una sugerencia, cualquier cuadro estaría bien) píxeles y lo rellenamos con alguna tonalidad marrón (a gusto según el tipo de madera que se desee, o ponganse creativos y prueben con otros colores).

photoshop
2 . Le añadimos algo de ruido con Filtro>Ruido>Añadir ruido Filter>Noise>Add noise con valor de 20 y las opciones Gaussiana y Monocromático .photoshop
3 . Seguidamente vamos a Filtro>Desenforcar>Desenfoque de movimiento Filter>Blur>Motion blur y seleccionamos el valor 999 .photoshop
 4 . Para terminar le damos credibilidad con Filtro>Ruido>Añadir ruido Filter>Noise>Add noise con un valor de 8 , siempre con las opciones guassiana y monocromático seleccionadas.
photoshop

Bueno eso es todo por ahora, si te gustó comenta para que siga poniendo estos pequeños y simples tutoriales, nos leemos luego!!!

lunes, 10 de septiembre de 2012

Saber las direcciones ip con C#

En esta ocasión les traigo como obtener las direcciones ip de los diferentes dispositivos de red que tenemos en nuestra computadora.

Traigo el código para C#, sin más les dejo el código:

martes, 4 de septiembre de 2012

La teoría de la rueda de colores

Sin duda al dar materias que requieren una cierta dosis de diseño gráfico por parte del programador de aplicaciones me doy cuenta que una de las cosas que peor saben hacer o que menos conocimientos tienen los alumnos es sobre la creación de una paleta de colores para desarrollo.

es por este motivo que en esta entrada me dí a la tarea de investigar un poco sobre lo que necesita saber un programador sobre armonio de colores para desarrollar aplicaciones visiblemente llamativas.

esto me llevó al estudio de la rueda de colores y la forma de optener estas armonías basandonos de un color inicial.

No soy experto en diseño ni es mi intención dármelos de ello ,por tal motivo este material lo extraje de designals xon la única finalidad de dar información confiable que sirva para aprender un poco de este tema. sin más por el momento: la información.

Que nos depara Apple para este fin de año 2012

Solo le quedan cuatro meses(y contando) a este año 2012 y si nuestro mundo sobrevive es tiempo de hacer nuestrsa carta de deseos navideños, y como todo geek no podemos dejar de pensar en que podemos pedir de esta compañia para navidad.

aquí te digo cuales son los nuevos productos de la manzana y para cuando se esperera que hagan su presentación oficial.
Concepto de lo que será el iPhone 5


Septiembre



Octubre



  • Nuevo iPod Nano

  • iPad Mini

  • New iPad modificado

  • Nuevo iMac de 27 pulgadas



Dentro de los iDevices, el producto más esperado es sin dudas el iPhone 5, que sería presentado del 12 de septiembre junto al iPod Touch.

Los rumores, también apuntan a que Apple lanzará nuevas versiones del iMac en los meses que queda del año, aunque las informaciones son menos precisas. El ya lanzado Mac Book Pro con pantalla Retina Display, haría debutar un nuevo tamaño de pantalla.

En cuando al iPad, es casi seguro que llegará el tan rumoreado iPad Mini en octubre. Lo novedoso, es que el New iPad, que está en el mercado desde marzo del 2012, tendría una edición renovada, donde el único cambio sería el conector dock, que se ajusta en tamaño para coincidir con el resto de los lanzamientos del año.

La linea de iPods, también se gana un par de cambios, los que son muy esperados por los usuarios, luego de más de 20 meses sin modificaciones significativos.

esto es todo por ahora y nos leemos luego.

Tablas de multiplicar en consola con C#

Aquí un pequeño programita en consola que pide el número de tabla de multiplicar que quieres y despliega la misma del 1 al 10 por ejemplo quieres la del 5 y despliega 1*5=5;2*5=10 y así.

sé que es un código de un ejemplo básico pero es para recordar y tal ves encuentren una forma de hacerlo más simple a una que ya hayan utilizado. Sin más les dejo el código: