Para crear este efecto hemos añadido a  nuestra etiqueta <div></div> los siguientes estilos.

background: -moz-linear-gradient(center top , #2B2B2B 0%, #6B6B6B 100%) repeat scroll 0 0 transparent; border-bottom: 2px solid #BDBDBD;
box-shadow: 0 0 3px #1C1C1C;
color: #444; opacity: 0.8;
padding: 20px;
text-shadow: 0 0 1px #1C1C1C;

Y de esta manera y con estos recursos se pueden obtener resultados verdaderamente interesantes.

Ya conocemos el famoso add-on para firefox Dummy Lipsum en el que nos genera un texto aleatoria basado en el libro en Latín ” Lorem ipsum” acorde al espacio que queremos rellenar con este texto predefinido.

Pues hoy explicamos este nuevo add-on que utiliza el mismo concepto pero rellena espacios con imágenes predefinidas. Elegimos el tamaño, color y temática de las imágenes y desde una base de datos de más de 11 millones de imágenes nos la incrusta a la espera de nuestra imagen definitiva.

Las imágenes están licenciadas mediante Creative Commons, lo cual es una ventaja añadida.

Enlace | Lorempixum

La extensión de estos archivos es y será siempre .swf . La forma más fácil de incrustarlo es subiendo el archivo a nuestro servidor donde tenemos los archivos de nuestra web. Lo más recomendable sería crearnos un directorio en la carpeta raíz que apuntada a estas animaciones.

Por ejemplo “/flash/animacion1 “.

Una vez lo hayamos subido al servidor como si fuera una simple imagen , nos fijamos en la ruta que nos lleva a este archivo. El modo de ponerlo en nuestro código es simple, siempre deberemos poner el mismo código y modificar los parámetros según nuestros gustos o objetivos.

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0″ width=”32″ height=”32″> <param name=”movie” value=”archivo.swf” /> <param name=”quality” value=”high” /> <embed src=”archivo.swf” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”32″ height=”32″></embed> </object>

La primera parte es la que indica al usuario que se descarga una versión de Adobe en el caso que no la tenga para poder visualizar la animación. En el siguiente parámetro debemos poner el tamaño de nuestra animación.

Donde vemos ” value=”archivo.swf” ” y “ src=”archivo.swf” “ pondremos nuestra ruta del archivo en nuestro caso pondremos nuestra ruta  ” /flash/nombrearchivo.swf ”

Sabes otras formas de incrustar Flash ? Nos la comentas?

Hemos encontrado una cuantas utilidades que nos ayudan a desarrollar nuestro proyectos web de una forma o otra. La primera herramienta nos permite visualizar nuestra nueva página web en nuestro navegador con diferentes resoluciones. Y de este modo poder testear en diferentes tamaños de pantalla la web.

Dirección: http://browize.com

HTMLform.com es una herramienta que nos permite crear un formulario de contacto e incluso utilizar ya creados de uan forma gráfica e intuitiva.

Dirección: http://htmlform.com

Framebox.org es una utilidad para crear esqueletos de webs, bocetos conceptuales y testeo de estructuras con labels, radibuttons, etc..

Dirección: http://framebox.org

CSS3generator es un rápido generador de código CSS3 para crear vanguardistas detalles en nuestras webs románticas y neoclásicas

Dirección: http://css3generator.com

Ponemos unos cuantos ejemplo de la gran diversidad de tipos de letras que puedes encontrar en la web.

22 Kbytes	14 Kbytes
15 Kbytes	25 Kbytes
19 Kbytes	82 Kbytes
27 Kbytes	32 Kbytes
11 Kbytes	21 Kbytes
29 Kbytes	29 Kbytes
15 Kbytes	14 Kbytes
48 Kbytes	19 Kbytes
32 Kbytes	61 Kbytes
20 Kbytes	111 Kbytes
31 Kbytes	10 Kbytes
13 Kbytes
24 Kbytes	12 Kbytes
12 Kbytes	16 Kbytes
11 Kbytes	13 Kbytes
20 Kbytes	13 Kbytes
19 Kbytes	44 Kbytes
20 Kbytes	12 Kbytes
8 Kbytes	36 Kbytes
121 Kbytes	24 Kbytes
24 Kbytes	9 Kbytes
14 Kbytes	25 Kbytes
6 Kbytes	19 Kbytes
7 Kbytes	19 Kbytes
14 Kbytes	27 Kbytes
32 Kbytes	62 Kbytes
13 Kbytes	22 Kbytes
14 Kbytes

 

Uno de los fantasmas de los desarrolladores es Internet Explorer en concreto el Internet Explorer 6 y en ocasiones el 7. Esto quiere decir que estos navegadores utilizan los estandares de una forma un poco particular , dejando la definición de standar de lado.

Uno de los problemas más comunes es el uso de .png transparente en IE6 e IE7 , veremos que nos aparece con un fondo manchado y no con la transpariencia que nos gustaría.

Por la red navegan varias soluciones y hacks. En mi opinión el más viable y eficaz es utilizar el típico javascript.

Podemos encontrar multiples Javascript pero en este caso vamos a utilizar unitpngfix.js ya que tras probar varios es el más simple y facil de implementar.

PASO 1

Lo podemos descargar del enlace  unitpngfix.js

PASO 2

El archivo esta compuesto por el JavaScript llamado “unitpngfix.js” que lo debemos copiar en la carpeta raíz o en algun sitio donde lo tengamos localizado.

Copiamos el archivo de imagen “clear.gif” en la misma carpeta que el archivo anterior.

PASO 3

Copiamos el siguiente código en la cabecera de nuestro website teniendo en cuenta que las rutas coincidan.

<script type=”text/javascript” src=”unitpngfix.js”></script>

:: ENLACE DESCARGA unitpngfix.js

Esto va cojiendo forma y para demostrarlo nuestro amigo el organismo World-Wide Web Consortium (W3C) ha creado un nuevo logo para HTML5. El nuevo lenguaje tan esperado parece que inminentemente va a llegar entre nosotros y que tendrá un lugar entre la tecnología del desarrollo web, gracias a la ayuda del gigante Google y muchisimos desarrolladores de diferentes plataformas la inmensa mayoria sigue con precaución a un cambio tan drástico.

Ahora la W3C ha tratado de colaborar a su popularidad con la creación de un logo que según sus creadores “se mantiene fuerte y verdadero, resistente y universal como el lenguaje de marcado que se utiliza. Brilla tan fuerte y de forma tan contundente como los desarrolladores web que piensan en el futuro. Es el estándar de los estándares, una bandera para el progreso”.

El logo fue diseñado por la agencia Ocupop, que se centra en el branding, la identidad y el diseño web, entre otras facetas del marketing y el trabajo de diseño. Y su puesta en escena tratará de servir para identificar mejor a todos los desarrollos web que hagan uso de un estándar prometedor en muchos frentes.

Hoy vamos a intentar dar una serie de argumentos para ayudaros a elegir entre Blogger o WordPress.

En primer lugar explicaremos que estas dos utilidades son plataformas que nos permiten crear nuestro Blog de una forma rápida,fácil y la más importante gratuita.

Una restricción que nos da es que en la URL de nuestro nuevo blog aparece de la siguiente manera.Ya que no disponemos de dominio propio.

miblog.blogspot.com

miblog.wordpress.com

wordpress vs blogger

Vamos a intentar hacer la comparación por temáticas.

Según la cantidad y la calidad que nos ofrece de Widgets aunque Blogger tiene una buena oferta , muchos de ellos aún no le encuentro la utilidad. Por eso mismo me decanto por WordPress.

El editor de Post son practicamente idénticos la única variación que encuentro que en WordPress no permite modificar a nuestra elección la fecha de escritura de nuestro post, que en algunos casos nos interesa.

wordpress vs blogger

Una vez más gana WordPress en Soporte , mucho más personal incluso tienes acceso a administrador que te ayudan a solucionar problemas. Blogger tiene solo FAQs que no suelen servir de ayuda.

Edición Diseño nos decantamos por Blogger ya que con su gestor de CSS nos permite modificar la apariencia muy facilmente e intiuitivamente sin tener ningún conocimiento avanzado de hojas de estilo. Aunque por defecto WordPress tiene mejores plantillas para nuestra bitácora.

La comunidad de Blogger es bastante más amplia y podemos obtener mucha más información y ayuda en foros y blogs de ayuda.

WordPress nos deleita con un sistema interno de estadísticas estándar que nos permite seguir el tráfico y pautas de los usuarios de nuestro blog.

Si queremos cambiar el típico logo de WordPress en la página de inicio de sesión de usuario , lo tenemos muy fácil.

Podemos poner cualquier logotipo de empresa, imagen , etc…

Para poder lograrlo de una forma rápida , nos vamos a la página ” functions.php “  en el theme que tenemos activado y le introducimos el siguiente código. En el caso de que no existiera , lo creariamos de todos modos.

add_action('admin_head', 'custom_admin_logo');

Cuando hayamos introducido el código y se hayan aplicado los cambios , solo debemos poner en la carpeta raíz de nuestro sitio la imagen elegida para nuestro nuevo logotipo con el nombre logo.png.

Anteriormente os mostramos otro plugin Web devoloper para probar la resolución en nuestro navegador.

El plugin para de mozilla firefox que explicamos ahora es idóneo si solo lo vamos a utilizar para probar la resolución en nuestro navegador .Utilizar Firesizer es realmente sencillo, deberas ir a la parte inferior derecha , y hacer click derecho en el indicador para cambiar de resolución:

Con Firesizer podemos elegir las resoluciones por defecto o configurarnos nuestras propias resoluciones.

:: Enlace  autor

:: Enlace descarga