Ley de Murphy en el Diseño Web

  1. Siempre que las cosas parezcan ir bien es que has pasado por alto algo.
  2. Siempre encuentras algún fallo en el último lugar que se te ocurre mirar y cuando los encuentras aparecerán en alguna otra parte.
  3. No encontrarás el fallo más molesto hasta que estés viajando desde el trabajo hacia tu casa.
  4. El 90 % del tiempo de desarrollo es corrección de fallos.
  5. Un sitio web siempre está “en construcción”.
  6. El sitio web siempre se caerá justo antes de hacer el respaldo.
  7. No programes unas vacaciones que comiencen justo después de una lanzamiento de versión.
  8. Todo proyecto llevará al menos el doble del tiempo que se espera incluso si desde el comienzo esperas que lleve el doble de tiempo.
  9. Ese maravilloso tono de verde en la portátil de tu casa lucirá HORRIBLE en la PC de tu trabajo
  10. Si todo luce bien en IE entonces lucirá horrible en FF y viceversa
  11. Es imposible hacerlo bien desde el principio
Anuncios
Ley de Murphy en el Diseño Web

CSS3 Generator: generador de cajas en CSS3

Navegando por la internet me encontre con esta nueva aplicación la cual sirve para crear cajas de forma sencilla, obteniendo el código necesario para incluirlo en nuestra página web.
CSS3 Generator es una sencilla aplicación online que permite a desarrolladores menos experimentados o con falta de tiempo, disponer de parte de la potencia de CSS3 en su web, sin necesidad de conocimientos avanzados acerca de esta nueva especificación.

CSS3 Generator es un editor de cajas al que es posible modificar visualmente aspectos como bordes, sombra, color y transparencia, y cuyo resultado podremos ir viendo en tiempo real.

El manejo de CSS3 Generator no presenta dificultades. Una vez finalizado el trabajo y seleccionado “get the code” obtendremos el código para incluirlo en un sitio web.

Interesados pueden acceder a CSS3 Generator desde www.css3.me.

CSS3 Generator: generador de cajas en CSS3

Como validar formularios con Jquery

Todos los que nos dedicamos al desarrollo o diseño web, en algún momento dado se nos ha presentado la necesidad de validar algún formulario y pues tenemos que recurrir a diferentes opciones para hacerlo ya sea del lado del servidor o de lado del navegador según sea el caso, el día de hoy les voy a comentar una forma que para mi me a funcionado y que nos puede ahorrar muchos dolores de cabeza.

Para este caso estoy utilizando el ya famoso Framework Jquery junto con un Plugin llamado jQuery.Validate.

En mi caso tenía que validar una serie de radio buttons de mi formulario y con solo el nombre de mi Formulario pude lograrlo, a continuación paso a explicar a groso modo como lo logre, simplemente agregue entre las etiquetas <head></head> este codigo, como podran darse cuenta lo unico que hice fue declarar el nombre de mi formulario el cual se llama #miFormulario y le agregue la funion validate(), eso fue todo ya que basicamente todo lo que este dentro del formulario lo va a validar agregando la siguiente clase class=”required”, como podran ver es muy facil de implementar este plugin.


<script src="http://code.jquery.com/jquery-latest.js"></script>
 <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
 <script>
 $(document).ready(function(){
 $("#miFormulario").validate();
 });
 </script>

Un ejemplo completo de como lo pueden implementar sería el siguiente:


<html>
<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
 <script>
 $(document).ready(function(){
 $("#miFormulario").validate();
 });
 </script>

</head>
<body>

 <form id="miFormulario" method="get" action="">
 <fieldset>
 <legend>Un simple formulario de comentarios validado y con mensajes predise&ntilde;ados</legend>
 <p>
 <label for="cnombre">Nombre</label>
 <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
 </p>
 <p>
 <label for="cemail">E-Mail</label>
 <em>*</em><input id="cemail" name="email" size="25"  class="required email"  />
 </p>
 <p>
 <label for="curl">URL</label>
 <em>  </em><input id="curl" name="url" size="25"  value="" />
 </p>
 <p>
 <label for="ccomentario">Tu comentario</label>
 <em>*</em><textarea id="ccomentario" name="comentario" cols="22"  class="required"></textarea>
 </p>

 <p>
 <input type="submit" value="Enviar"/>
 </p>
 </fieldset>
 </form>
</body>
</html>

El exito de este plugin radica en la clase que se manda llamar para validar, si ponen un poco de atención, en el input de Email utilizo la clase “required email”, con lo cual el tipo de validación que hace va ser de tipo Correo electrónico donde tiene que hacer uso de @ y de un dominio valido, con esto ya estamos del otro lado caray ya que no, nos tendremos que preocupor acerca de este tipo de cosas así como esta clase existen algunas otras especificas dependiendo del tipo de campo que necesitemos validar:

  1. required: “This field is required.”
  2. remote: “Please fix this field.”
  3. email: “Please enter a valid email address.”
  4. url: “Please enter a valid URL.”
  5. date: “Please enter a valid date.”
  6. dateISO: “Please enter a valid date (ISO).”
  7. number: “Please enter a valid number.”
  8. digits: “Please enter only digits.”
  9. creditcard: “Please enter a valid credit card number.”
  10. equalTo: “Please enter the same value again.”
  11. accept: “Please enter a value with a valid extension.”

Dentro de la pagina de Jquery pueden ver muchas otras formas de implementar este Plugin yo simplemente les estoy mostrando una forma rápida y fácil, aparte ya sabes que cada proyecto es diferente les dejo el link a la página del plugin y espero les sirva tanto como a mi.

http://docs.jquery.com/Plugins/Validation/validate

Saludos

Como validar formularios con Jquery

Cuatro pistas visuales que ayudan a distinguir un sitio web real de uno fraudulento

En el mundo del malware, es cada vez más común el armado de sitios “parecidos” a los reales pero diseñados para robar las claves y nombres de usuarios desprevenidos de sitios de ecommerce o de e-banking. ¿Es por eso que es importante aprender a distinguir visualmente un sitio real de uno falso. Tim Callan -Vicepresidente de Marketing de Productos SSL, de la compañía especializada en seguridad y sitios de comercio electrónico VeriSign, ofrece las siguientes pistas:

En el mundo del malware, es cada vez más común el armado de sitios “parecidos” a los reales pero diseñados para robar las claves y nombres de usuarios desprevenidos de sitios de ecommerce o de e-banking.

Es por eso que es importante aprender a distinguir visualmente un sitio real de uno falso. Tim Callan -Vicepresidente de Marketing de Productos SSL, de la compañía especializada en seguridad y sitios de comercio electrónico VeriSign, ofrece las siguientes pistas:

1. Barra de dirección verde: Busque la barra de dirección verde y el nombre de la empresa destacado en verde en la parte superior del navegador. Esos indicadores significan que este sitio pasó por una amplia autenticación de identidad, de manera que usted puede confiar que éste es el sitio que usted piensa ser.

2. https:// Si la dirección del sitio Web empieza con https://, esto significa que las informaciones que usted comparte están encriptadas contra espías en Internet. Nunca inserte los números de su tarjeta de crédito o informaciones personalmente identificables, como su número del Registro de Persona Física en cualquier página que no empiece con https.

3. Marcas de confiabilidad: Las populares marcas de confiabilidad pueden indicar cosas importantes sobre un negocio online. Las más importantes marcas de confiabilidad incluyen el Sello de Seguridad VeriSign (seguridad online e identidad de sitio verificada), TRUSTe (privacidad de datos de cliente), y la “Better Business Bureau” (prácticas de negocios), RatePoint (clasificaciones/reseñas del proveedor).

4. Verifique la dirección Web: Muchos sitios fraudulentos emplean deliberadamente direcciones que son equivocadas o ambiguas para engañar víctimas inocentes, haciéndolas pensar que están en determinado sitio, y en verdad no están. Sospeche de cualquier sitio con dominio desconocido que contenga el nombre de un sitio famoso en la última parte de una dirección de Web. Por ejemplo, si su banco favorito está localizado en http://www.mibancofavorito.com, entonces usted debe sospechar bastante de un sitio como http://www.algunotrodominio.com/mibancofavorito.

Visto en: Neomundo

Cuatro pistas visuales que ayudan a distinguir un sitio web real de uno fraudulento

30 Útiles tutoriales de diseño abstracto en photoshop

Hola a todos revisando las estadísticas del sitio veo que les agradan mucho los tutoriales para crear efectos ya sea para algún wallpaper o simplemente por querer aprender a hacer algo nuevo, encontré entre mis bookmarks esta liga al sitio de Noupe la cual la comparto con todos ustedes pero les sirva tanto como me sirvió a mí.

Windows Vista Aurora Efecto Tutorial Photoshop
Este tutorial enseña a crear el efecto de Windows Vista aurora lo mejor es que te lleva paso a paso para que lo termines.


La creación de un fondo de tipo Mac en Photoshop
En este tutorial, aprenderás cómo crear un fondo de escritorio al estilo Mac.

Leopard Aurora Borealis Tutorial de Photoshop
Hablando acerca de los efectos populares, aquí hay un buen fondo de pantalla de Mac OSX Leopard, este tutorial es de DesignNerd.

Firma Fondos
Este tutorial los guía para la creación de esta imagen abstracta que comúnmente se puede ver en las firmas de los foro.

Estos y algunos otros efectos interesantes los encontraran en Noupe.

Excelente fin de semana a todos.

30 Útiles tutoriales de diseño abstracto en photoshop

105 Links para Diseñadores Web

Fuentes
Tips y Tutoriales
Sitios de inspiracion
Herramientas Color
Otros Sitios Buenos
Iconos
Themes
Imagenes, pics y logos

Visto en: xyberneticos

Le agregue unos cuantos links a la lista que tenían, espero les sirvan.

Saludos

105 Links para Diseñadores Web

Silverlight Tour Workshop en Español.

El Silverlight Tour Workshop es un curso de tres días de alta profundidad técnica acerca de Silverlight 3 y Silverlight 4 Beta. El curso se imparte en varios idiomas en diferentes países en todo el Mundo y está actualizado a la versión Beta de Silverlight 4.

Incluye:

  • Tres días intensos de entrenamiento con Silverlight 3 y Silverlight 4 Beta
  • Arquitectura de Soluciones con Silverlight
  • Comunicación con el Servidor
  • Creación dinámica de contenido XAML
  • Comunicación con el DOM
  • Aplicaciones Fuera del Navegador y el nuevo modelo de ejecución en SL4B
  • Diccionarios Merged y Estilos Based-On
  • Validación de Datos utilizando el Modelo de Controles
  • Framework de Navegación
  • Utilización de XML Binario
  • Utilización de la nueva API de Bitmaps
  • Pixel Shaders
  • Comportamientos
  • Blend 3
  • Impresión
  • Acceso al Portapapeles
  • Contenido HTML
  • Utilización de Web Cam y Micrófono
  • Nuevo Modelo de Drag and Drop
  • Nuevo Modelo de Confianza
  • PopUps para Notificaciones
  • Estilos Implícitos
  • Ensamblados compartidos entre .NET Framework 4 Beta y Silverlight 4 Beta
  • …y más
  • Material totalmente en Español

Para ver el temario completo del curso haz clic aquí.

Horario

  • El curso se imparte de 08:00 a 18:00 horas los tres días
  • La comida y coffee break están incluidos (no aplica en cursos privados)

Requisitos técnicos

  • Experiencia con .NET y el lenguaje C#
  • Experiencia en la construcción de aplicaciones Web en general

Registro

Costo

  • El costo del curso depende del país. Lo puedes revisar en esta página
  • ¿Descuento por volumen? Contáctanos para más información.
Agenda Latinoamerica y España:
  • Silverlight Tour – Ciudad de México (20Ene – 22Ene)
  • Silverlight Tour – Guadalajara, Jal. (08Feb – 10Feb)
  • Silverlight Tour – Monterrey, N.L. (11Feb-13Feb)
  • Silverlight Tour – Valencia, España (03Mar – 05Mar)
  • Silverlight Tour – Lima, Perú (24Mar-26Mar)
  • Silverlight Tour – Santiago de Chile (20Abr – 22Abr)
  • Silverlight Tour – Buenos Aires, Argentina (04May-06May)

Espero les sirva esta información y los que puedan ir aprovechen al máximo esta gran oportunidad.

Silverlight Tour Workshop en Español.