Diseño Web
Estás viendo los artículos de ZonaMasters - Recursos para webmasters correspondientes a la categoría Diseño Web.
Si eres un diseñador y tienes un iPhone han elaborado una lista de más de 20 aplicaciones iphone gratuitas y no gratuitas en el que podrás entre otras cosas sacar colores hexadecimales últiles para tus diseños.
Visita lista de +20 aplicaciones para iPhone
Otros post interesantes:
Jailbreak (desbloquear tu iphone)
Dentro iPhone (Blog con noticias del iPhone)
Aplicaciones iPhone (Archivados.com)
Aplicaciones iPhone en Yappler (directio de aplicaciones)
Escrito por Niko | 
3 de Agosto de 2009 | 
1 comentario
Diseño Web.
Si estáis buscando efectos en flash para vuestras webs animadas o aplicaciones flash. Puedes disfrutrar de una colección de 96 efectos en flash que podrás usar totalmente gratis para vuestras creaciones.
Visita Levitated.
Otros artículos interesantes sobre flash:
Curso Online de Flash GRATIS
Animacion flash de 7 vidas
Flash Player para teléfonos móviles
Escrito por Niko | 29 de Julio de 2009 | 1 comentario
Diseño Web y Flash.
Aquí os dejo algunos sitios donde podrás conseguir plantillas para los blogs alojados en blogspot:
Temas para Blogger:
Otros artículos interesantes:
Plantillas CSS gratis
MeeCSS
Temas para Firefox
Temas para Windows 7
Escrito por Niko | 27 de Julio de 2009 | 1 comentario
CSS y Diseño Web.
Aquí os dejamos una paleta de colores (colores hexadecimales) muy utilizadas en las webs 2.0 
Neutrals
Magnolia Mag.nolia [#F9F7ED]
Interactive action yellow [#FFFF88]
Bold
Techcrunch green [#008C00]
Flock Blue [#4096EE]
Muted
Ruby on Rails Red [#B02B2C]
Etsy Vermillion [#D15600]
Last.fm Crimson [#D01F3C]
Visto en modernl
Temas que te pueden interesar:
Fuentes web 2.0
Botón web 2.0
Creando iconos 2.0
Diseño web 2.0
Que 2.0
Escrito por Niko | 22 de Julio de 2009 | 0 comentarios
Diseño Web.
Si estás interesado en usar imágenes de otros autores para ponerlas en la web con la licencia de Creative Commons. Puedes emplear el buscador de Google de imágenes añadiendo a la url de la búsqueda &as_rights=(cc_publicdomain|cc_attribute|cc_sharealike).-(cc_noncommercial|cc_nonderived). Por ejemplo para buscar coches empleamos la url: http://images.google.es/images?q=coches&as_rights=(cc_publicdomain|cc_attribute|cc_sharealike).-(cc_noncommercial|cc_nonderived)
Coches (con licencia creative commons)
Escrito por Niko | 22 de Julio de 2009 | 0 comentarios
Diseño Web.
En 1001Photoshop te traemos una serie de post relaciones con pinceles gratis del famoso programa de diseño Photoshop:
Espero que os gusta esta serie de post de pinceles para photoshop
Escrito por Niko | 12 de Julio de 2009 | 0 comentarios
Diseño Web.
Siguiendo el tutorial de menu CSS, podremos crear desplegables usando solo CSS, aunque para que funcione correctamente en todos los navegadores (internet explorer como siempre dando la nota) deberemos insertar el siguiente código:
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<!--[if gte IE 5.5]>
<script language="JavaScript" type="text/JavaScript">
$(document).ready(function(){
$("#navmenu-h li,#navmenu-v li").hover(
function() { $(this).addClass("iehover"); },
function() { $(this).removeClass("iehover"); }
);});
</script>
<![endif]-->
Aquí os dejamos un ejemplo
<ul id="navmenu">
<li><a href="#">Root nav item</a>
<ul>
<li><a href="#">Sub nav item</a></li>
</ul>
</li>
</ul>
Mira más menu de ejemplo.
Puedes ver también:
Plantillas CSS gratis
Visto en Anieto2k
Escrito por Niko | 10 de Julio de 2009 | 1 comentario
CSS y Diseño Web.
Reset CSS es una técnica para resetear todos los valores del CSS que vienen por defecto en los navegadores (margenes, aliniaciones…). La web de desarrolladores de Yahoo, podemos ver el siguiente ejemplo con el que conseguiremos resetar todos los valores.
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
Un reset básico sería el siguiente:
* {
margin:0;
padding:0;
}
Visita Yahoo! UI Library: Reset CSS
Escrito por Niko | 10 de Julio de 2009 | 0 comentarios
CSS y Diseño Web.
En el ordenador es común ver los colores tienen asociado un valor hexadecimal (puede tomar 16 valores cada cifra desde 0..9A..F), estos valores representan la cantida de rojo, azul y verde (RGB) dos cifras hexadecimales para cada uno, la mezcla de esos tres colores primarrios se puede sacar una gran variedad de colores.
Realmente es cómodo podemos controlar con exactitud los colores de nuestra web sean tales como los hemos preparado en photoshop (este te da el valor hexadecimal con la herramienta de cuenta gotas)
Aquí os dejo una tabla con algunos colores y su valor en hexadecimal.
|
Color
|
Hexadecimal
|
|
#FFFFFF
|
|
|
#000000
|
|
#000080
|
|
#0000FF
|
|
#008000
|
|
#008080
|
|
#00FF00
|
|
#00FFFF
|
|
#800000
|
|
#800080
|
|
#808000
|
|
#808080
|
|
#C0C0C0
|
|
#FF0000
|
|
#FF00FF
|
|
#FFFF00
|
Escrito por Niko | 10 de Julio de 2009 | 3 comentarios
CSS y Diseño Web.
A estas alturas el efecto de lightBox es bastante conocido (existe hasta para videos Videobox). El plugin que os muestro en el post se puede decir que es de los más conocidos, aunque existe alternativas como jQuery.popeye, Zoomy…
Como usar el plugin:
Para comenzar necesitamos tener el javascript de jQuery y después descargar el plugin. Debemos incluir en la cabecera dos ficheros javascript:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
También debemos incluir el fichero CSS:
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />
Incluimos las etiquetas HTML para enlazar una imagen, por ejemplo:
<a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>
Y por último incluimos el siguiente javascript que es el que activará el lightBox:
<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
$('#gallery a').lightBox(); // Select all links in object with gallery ID
// This, or...
$('a.lightbox').lightBox(); // Select all links with lightbox class
// This, or...
$('a').lightBox(); // Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>
Visita lightBox plugin
Ver una Demo
Escrito por Niko | 10 de Julio de 2009 | 0 comentarios
CSS y Diseño Web y JavaScript.
