Descargate el fondo de pantalla de 2009 para tu escritorio.. pincha en la imagen para descargarlo.
Felices fiestas y año nuevo 2009
Accede a las mejores y mas urgentes ofertas de trabajo en la nueva web disponible para trabajar en la zona sur de Madrid.
Recuerda que para que se mantenga esta web,debes de clickar al menos una vez al dia a los anunciantes.
Saludos y suerte en la busqueda de empleo.
Si hay algo en lo que el W3C siempre insiste es en el significado del documento. Desde el punto de vista del W3C, internet debe ser información estructurada, y el html debe ser la herramienta para lograr esa estructuración.
Una página web debe ser un conjunto de datos organizado con sentido. Las etiquetas html deben insertarse con este fin organizativo (dejando la presentación para otros lenguajes, CSS). La sola lectura del código debería ofrecer información relevante sobre el documento. Se trata en definitiva de organizar internet, escribiendo páginas que contengan información sobre si mismas, de forma que pueda mecanizarse su clasificación y catalogación. El futuro de la metainformación pasa por la web semántica y por XML, pero mientras tanto podemos avanzar por ese camino con los metadatos.
Los metadatos (información sobre la información) no se visualizan, pero estan integrados en el documento ofreciendo información variada: desde el tipo de formato utilizado (html, xml …) hasta el autor, editor con el que se ha confeccionado, información para los buscadores, etc.
La forma usual de insertar metadatos en el documento es por medio de la etiqueta <META> en la sección <HEAD> de la página.
Esta etiqueta es de aquellas de las que llamabamos “elementos vacios” porque no lleva etiqueta de cierre. Su estructura es la de una declaración propiedad:valor. Por ejemplo:
Arrayetiqueta que contiene la metainformación de que el documento ha sido escrito usando dicho editor.
No existe ninguna regla acerca de la informacion que puedes o no puedes incluir en las metatags. El standard html define la estructura de una etiqueta META, pero no sus valores. Es perfectamente válido que inventes tus propias etiquetas META; sin embargo dado que no se visualizan en el navegador, y que realmente solo se aprovechan por los buscadores y otras herramientas informáticas (que lógicamente solo entienden las etiquetas META mas difundidas) tampoco tiene mucho sentido crear tu propia metainformación, salvo para uso propio.
Mediante esta etiqueta podemos incluir como metadato una descripción de nuestra página. Esta descripción puede ser leida y utilizada por algunos buscadores
La etiqueta <meta> admite el atributo lang, que nos permite ofrecer información sobre el idioma:
<meta name=”description” content=”Esta es la mejor pagina del mundo mundial” lang=”ES” />
Las palabras clave son aquellas que resumen de forma significativa el contenido de la pagina. Por ejemplo keywords adecuadas para ignside.net podrían ser “noticias, internet, manuales, html”
Las dos etiquetas META que acabas de ver son las mas importantes. Como los buscadores leen estas etiquetas y pueden juzgar acerca de la importancia de la pagina segun ellas, existe una auténtica industria montada sobre estas dos sencillas lineas. Una buena selección de descripción y keywords puede suponer que tu página aparezca muy arriba en las búsquedas, y eso supone mucho dinero para las páginas comerciales.
Naturalmente no es tan sencillo … a cualquiera se le ocurriria que unas keywords como las del ejemplo atraerian visitantes como moscas … por eso mucha gente, en lugar de hacer páginas atractivas, se conforma con incluir keywords atractivas, pensando que actuarán de cebo, y los buscadores incluyen filtros para evitarlo. Por ejemplo, el filtro mas sencillo es comprobar si en el texto del documento aparecen las palabras usadas como keywords.
Las páginas web se distribuyen por internet mediante el protocolo http, que viene a regular el diálogo entre el servidor y el navegador. Pues bien, con estas etiquetas, el autor de la página puede predeterminar aspectos de este diálogo.
Su sintaxis general es:
ArrayCon esta etiqueta META indicamos al navegador el tipo de documento que es nuestra página: si es un documento html, o un documento de texto plano, o cualquier otra cosa:
En el ejemplo, significaria que es un documento texto-html y que usa un juego de carácteres ISO-8859-1 (esto es, que no usa letras chinas, ni cirílicas, ni nada raro). Esta información es útil para que el navegador de nuestros visitantes sepa que juego de carácteres debe emplear.
Mediante esta etiqueta y el valor refresh podemos indicar al navegador que debe recargar la página una vez transcurridos el tiempo de segundos especificado. En la primera linea se ve un refresh simple, con orden de recarga a los cinco segundos. En la segunda línea, un refresh con redirección. El navegador debe refrescar la página a los cinco segundos, recargando en su lugar la especificada.
Advierte como las comillas abarcan todo el contenido, incluyendo segundos y url.
Mediante la orden expires informamos de la vigencia del documento. Su utilidad principal es la de evitar que el navegador guarde indefinidamente en caché una página forzandole a cargar las nuevas versiones.
La fecha debe estar necesariamente en formato RFC840 (GMT), es decir:
dia_de_Semana, DD-Mon-YY HH:MM:SS TIMEZONE(Greenwich) todo ello en inglés
Por ejemplo Fri, 01 Jan 2003 07:20:55 GMT
Si la fecha está expresada en un formato distinto, el valor de expires será interpretado como now, es decir, se fija una caducidad inmediata.
Ordena al navegador que no almacene una copia cache de la página. Util cuando se trata de páginas dinamicas cuyo contenido cambia frecuentemente. Su unico valor aceptable es no-cache
ArrayMediante esta metatag podemos enviar una cookie al navegador del usuario. Si contiene fecha de expiración, el navegador la conservará en el disco duro hasta dicha fecha; en caso contrario, se borrará al terminar la sesión de navegación.
ArraySirve para especificar el nombre de la frame donde la página ha de ser cargada. Por ejemplo:
ArrayEn fin, estas son las mas corrientes de entre las destinadas a tratar con los servidores; menos usadas son
Arrayque informan respectivamente del tipo de lenguaje script utilizado, y del uso de CSS
Podemos dar instrucciones a los robots de los buscadores acerca de que páginas pueden incluir en sus bases de datos y cuales deben saltarse. Sus valores son index que indica que la página debe ser indexada; noindex es justo lo contrario, el robot debe saltarse esa página; follow pide al robot que siga los links que existan en la página e indexe las páginas resultantes; nofollow lo contrario. Los valores por defecto se entiende que son index, follow (separados por coma).
ArrayHay otras formas supuestamente mejores de tener tratos con los robots. Puedes enterarte como aqui.
Nada que ver con fotografias aqui (o si, indirectamente).
La etiqueta PICS se usa para facilitar la labor de filtrado de la página con arreglo a su contenido, advirtiendo de que puede tener, por ejemplo, contenido sexual, violencia o lenguaje ofensivo. Por ejempo:
ArrayDe utilidad dudosa (ya que la metatag por definicion la escribe el autor de la página), si tienes interés puedes probar este generador.
Las smart-tags fueron un invento de microsoft que sencillamente permitía alterar el contenido de una página web, insertando, insertandose enlaces aqui y allá al libre albedrío de sus creadores. El problema es que ya no es el autor de la página quien decide donde incluye links (y sobre todo, hacia donde enlaza) sino la propia microsoft. Naturalmente se levantó un clamor contra la idea, que de momento está aparcada.
ArrayAqui teneis de la mano de webusabilityhelp.blogspot.com
http://webusabilityhelp.blogspot.com/2007/11/99-resources-for-web-20-design.html
BADGES
Web 2.0 Badges - Un set gratuito de badges para descargar.
Fresh Badge - Genera rapidamente tus badges.
adClustr - Crea tus badges.
Deziner Folio - Coleccion de varios badges.
BittBox - Badges vectoriales.
Official Seal Generator - Alternativa al tipico badge.
Photoshop Tutorial - Lecciones rapidas en photoshop para crear nuestro badge.
Glossy Photoshop Tutorial - Crea tu badge glossy con este tutorial.
BOTONES
Mi Boton cool - Un bonito editor online que nos ayudara rapidamente a crear nuestro boton .
Adam Kalsey’s Button Maker - Herramienta online de Adam Kalsey para crear botonos.
Button Maker from Blog Flux - Crea tu boton desde el blog de Flux.
Crea tu boton brillante - Similiar al anterior editor online de creacion de botones.
Botones CSS - Escoge el texto, el fondo y los bordes para tu web.
Buttonator - Una alternativa de pago para crear nuestros botones, muy interesate.
RSS Button Maker - Crea tu boton RSS.
Button Boost - Una pequeña herramienta para generar pequeños botones.
ButtonGenerator.com - Crea menus y botones de navegacion para tus webs.
Crystal Button - Así de facil, botones de cristal.
Chicklet Creator - Crea botones para subscribir a tus visitantes a tus feeds.
ESQUINAS REDONDEADAS
Esquinas redondeadas es una de las acciones tipicas de las web 2.0. Aqui tienes algunas herramientas online para crearlas, pero existem muchas mas.
RoundedCornr
Corner Shop
Spiffy Box
Canvas Corner
Spanky Corners
Sliding Doors Text Box
Smart Rounded Corners
Rounded Corners in CSS
News List
LOGOS
Crea facilmente tu logo para tu web totalmente online, es simple, rápido, fácil y 2.0.
Web 2.0 Logo Creator
Web 2.0 Logo Creatr
Web 2.0 Logo Creator
Web 2.0 Stylr
ICONOS
Una web 2.0 no puede ignorar los iconos. Aqui dispones de una gran coleccion de iconos listos para usar en tus projectos.
UtomBox - Coleccion de iconos web 2.0.
Feed Icons - Iconos para RSS estandars.
Map Icon Factory - Crea ty icono para tu sitemap.
Perishable Press - Una bonita coleccion de iconos RSS.
Glass Style - Mas iconos RSS
Snap2Objects - Iconos vectoriales RSS.
31 Sources of Quality - Iconos gratis, 31 iconos de calidad
IMAGENES CON DEGRADADOS (ideal para fondos de celdas)
Otra de las acciones necesarias para tener un buen diseño web 2.0 son los degradados.
Gradient Image Maker
Gradient Generator
Online Gradient Image Maker (OGIM)
ALGUNAS OTRAS COSILLAS INRESANTES
Speech bubbles are commonly used for styling comments or blockquotes.
Will Mayo
Bubblesnaps
CSS Play
XHTML Speech Bubbles
WigFlip
Fluid CSS Speech Bubbles
MySpace Speech Bubble Generator
Photoshop Tutorial
IMAGENES DE FONDO
Herramientas online para crear tus backgrounds.
Stripe Designer - Crea facilmente tus imagenes.
Tartan Maker - Crea imagenes de fondo online.
Texture Generator - Crea texturas con las siguientes imagenes para tus fondos de web.
All Free Backgrounds - Escoge el fondo que quieras de esta galeria.
COLORES
Quizas sea la parte mas importante para algunos, “el color”.
Web 2.0 Color Pallete - Colores populares en los estandares 2.0.
Color Schemer Gallery - Tienes problemas escogiendo un esquema de color para tu pagina, elige el que quieras de esta galeria..
COLOURlovers - Mas ejemplos de combinaciones de colores.
Website Color Picker - Combina rapidamente combinaciones de colores.
I Like Your Colors - Elige los colores que vas a usar en tu web.
NAVEGACIÓN
CSS Menu Generator - Easily create attractive CSS menus.
Listamatic - Collection of CSS menus.
List-O-Matic - Create your own CSS menus.
List-U-Like - Another tool to create your own navigation bars.
Tabs Generator - Create tabbed images for navigation.
Flash Buttons - Create navigation menus with flash buttons
CSS Play - An extensive collection of CSS menus.
Exploding Boy - Tabbed CSS navigation menus.
CSS Navigation Menu Generator - A tool to help you create your own menu.
FAVICONS
Favicon Generator - Create your own favicon from an image on your computer.
Favicon from Pics - Create a favicon from a photo.
Favicon Editor - Upload a photo, create a favicon.
Favicon.cc - Another option for favicons.
Photoshop Tutorial - Creating a favicon with Photoshop.
CHARTS
PHP/SWF Charts - Create attractive charts.
amCharts - Flash charts.
OTHER
Avatar Maker - Create and edit an avatar.
Shrink Pictures - Create an avatar from your photo.
ScaleNine - Collection of skins and themes created for Flex and Adobe AIR.
VectorMagic - Converts bitmap images to vector art.
Templatr - Create a layout.
PsycHo - Blog template generator.
Web 2.0 Generator - Creates layouts.
Typetester - Compare fonts on-screen.
BlogPoll - Create a free poll for your blog.
RSSxl - Convert an HTML page to RSS.
Meta Tag Generator - Easily create meta tags for your pages.
URL Rewrite - Create search engine-friendly URLs for dynamic pages.
.htacces generator - Quickly create an .htaccess file.
Thumbnail Generator - Create thumbnails for a large amount of images.
Reflection.js - Adds reflections to your photos.
Drop Shadow - Improve your images with a drop shadow.
CSS Sprite Generator - From Website Performance.
Vecteezy - Stupid name. Cool vectors.
Brusheezy - Photoshop brushes.
PSBrushes.net - More Photoshop brushes.
deviantART - Photoshop brushes at deviantART
Related Link:
99 Useful Resources for Graphic Designers
Download AutoCAD 2007 for free
A to Z Online Resources for e-Learning
A Preview of HTML 5
Best Selling Graphic Design related Books
25 Headline Formulas That Have Blessed Web 2.0
Website Design for your Customers - It’s not what you want
La más común al hacer una página web es que en un navegador se vea bien y en otro se vea diferente, este fenómeno ocurre porque cada navegador interpreta los estándares de una manera diferente incluso en sus distintas versiones, sobre todo en Internet Explorer (IE). Es aqui cuando requerimos la aplicación de diferentes hacks o trucos para que nuestra página funcione bien en los diferentes navegadores.
A continuación veremos unos cuantos trucos, hacks y consejitos a la hora de trabajar con CSS que seguramente nos quitaran un dolor de cabeza en algún momento y nos mantendran dentro de los estándares web.
SELECTORES ESPECIFICOS PARA CADA NAVEGADOR
Estos son unos cuantos selectores que nos permiten cambiar un estilo en un navegador determinado, pero no en los demás.
IE 6 y anteriores:
* html {}
IE 7 y anteriores:
*:first-child+html {} * html {}
IE 7 solamente:
*:first-child+html {}
IE 7 y navegadores modernos solamente:
html>body {}
Navegadores modernos solamente (IE 7 NO):
html>/**/body {}
Versiones recientes de Opera y anteriores:
html:first-child {}
Safari:
html[xmlns*=”"] body:last-child {}
Para usar estos selectores, debes colocarlos despues del estilo que quieres modificar asi:
#cuadro-contenido{
width: 300px;
height: 150px;
}
* html #cuadro-contenido{
width: 250px;
}
Esto anula el estilo y cambia el ancho por 250px en IE6 y sus versiones anteriores
PNG’s TRANSPARENTES PARA IE6
Como bien sabemos IE6 no soporta la transparencia de las imagenes en formato PNG, generalmente saca un recuadro gris que daña todo nuestro diseño. Para que nos funcione la transparencia necesitamos usar un filtro que solo funciona para IE6 aplicando los selectores del punto pasado asi:
* html #estilo-imagen {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”nombreDeArchivo.png”, sizingMethod=”escala”);
}
REMOVER RECUADRO PUNTEADO EN LOS HIPERVINCULOS:
Firefox produce un recuadro punteado cuando hacemos click en un link o hipervinculo.
Esto es muy fácil de arreglar, simplemente agregamos la propiedad outline:none en la etiqueta a
a{
outline: none;
}
ANCHO A ELEMENTOS INLINE
Si le aplicas un ancho a un elemento inline, solo funcionará en IE6. Esto es una falla del navegador ya que los elementos inline no deberían necesitar tener un ancho asignado. Sin embargo el asignarselo es algo muy útil por ejemplo si quieres todos los labels de un formulario del mismo ancho.
Todos los elementos HTML son de algun tipo, block o inline. Los elementos inline son los span, a, strong, em, entre otros. Los elementos de tipo block son los div, p, h1, form, ul, etc.
Nosotros podemos cambiar el ancho de un elemento inline. El truco esta en cambiar el elemento de tipo inline a tipo block.
span {
width: 150px;
display: block
}
Aplicando la propiedad display:block convertimos el span de un elemento inline a uno de tipo block, permitiendonos asi cambiar su ancho. Lo unico que debemos tener en cuenta es que los elementos de tipo block comienzan en una nueva linea por su margen y relleno por defecto, aunque tenemos la ventaja tambien de usar flotaciones si lo requerimos.
CENTRAR UNA PAGINA CON ANCHO FIJO
Para centrar una página web dentro del navegador, aplicale una posición relativa al div contenedor de la página y colocale una margen automática.
#contenedor {
margin: auto;
position: relative;
}
TECNICA PARA REEMPLAZAR IMAGENES
Para cumplir los estándares, siempre es mejor usar texto en los encabezados en vez de imágenes. Pero la mejor practica para poner las imágenes a nuestros encabezados es ubicar la imágen en el fondo con un texto oculto dentro de un div. Esto es muy útil para los lectores de pantalla, para el SEO, lectores de feeds, dispositivos móviles, o si simplemente desactivan los estilos css de nuestra página ya que alli solo se verá el texto.
HTML:
<h1><span>Main heading one</span></h1>
CSS:
h1 {
background: url(heading-image.gif) no-repeat;
}
h1 span {
position:absolute;
text-indent: -5000px;
}
Como pueden ver usamos html normal para la etiqueta h1, y con css reemplazamos el texto por la imágen poniendo el texto 5000px a la izquierda, haciendolo invisible al usuario, para probar el efecto visualiza tu página en el navegador y luego desactiva los estilos css.
ANCHO MINIMO
Otro error en IE es que no soporta el atributo min-width. Este es extremadamente útil, especialmente para plantillas flexibles que tienen un ancho de 100% y no queremos que el navegador las contraiga. Para todos los navegadores exceptuando IE6 solo necesitas especificar min-width:Xpx; asi:
.contenedor {
min-width:300px;
}
Para IE6 es un poco más complicado, para empezar nesecitamos crear dos divs, uno dentro del otro
<div class=”contenedor”>
<div class=”contenido”>Content</div>
</div>
Indicamos el min-width del div exterior
.contenedor {
min-width:300px;
}
Ahora viene el hack, nesecitamos insertar el siguiente código
* html .container {
border-right: 300px solid #FFF;
}
* html .holder {
display: inline-block;
position: relative;
margin-right: -300px;
}
Cuando la ventana del navegador es redimensionada, el ancho del div exterior se reduce junto con el ancho del borde que no permite que se encoja más de la medida. EL div interno hace lo mismo deteniendose igual a la medida. Asi pues el div exterior define el ancho mínimo para el div interior.
ESCONDER EL SCROLL HORIZONTAL
Para remover la barra de scroll horizontal, debemos insertar la propiedad overflow-x: hidden; en el body así:
body {
overflow-x: hidden;
}
Esto es muy útil cuando tenemos una imágen o una pelicula de flash con un ancho muy largo en el navegador.
Esperamos que pongas en práctica estos trucos cuando te sean necesarios y que te sean de mucha utilidad.
