Mostrando entradas con la etiqueta Tutoriales. Mostrar todas las entradas
Mostrando entradas con la etiqueta Tutoriales. Mostrar todas las entradas

viernes, 12 de abril de 2013

Si un dia mueres, esto podras hacer con tu cuenta de Google

Google lanza sistema para gestionar tu cuenta cuando mueres

¿Te has preguntado qué sucede con la cuenta de correo de una persona una vez muere? Actualmente contamos con un montón de datos, información y contenido en la nube el cual no hace más que aumentar cada día. Bien sea nuestro correo electrónico, archivos en la nube, marcadores, vídeos y un sin fin aparente de redes sociales, tenemos muchas cosas en la web. Google ofrece una gran cantidad de servicios asociados a una misma cuenta. Hoy han estrenado un nuevo sistema llamado Inactive Account Manager que, prácticamente, nos permite decidir de una vez qué queremos que suceda con nuestra cuenta y todo su contenido una vez ya no estamos en este mundo. Una manera de gestionar nuestras cuentas de YouTube, Drive, Google+ y Gmail después de muerto.
Con este sistema Google nos invita a decidir qué sucederá con toda esa información que alberga nuestra cuenta. A quién se la confiaremos, o sencillamente si debe desaparecer una vez la persona haya fallecido.
Aunque esto no es nada nuevo, ya que otras empresas como Facebook habían estrenado un sistema de gestión luego de fallecer que incluso permite modificar el muro para ser simplemente un lugar de tributo y recuerdo a la persona fallecida, el sistema de Google tiene varias funciones atractivas y que se nos hacen realmente útiles, tomando en cuenta la cantidad de datos y archivos que muchos tienen en su correo.
Primeramente debemos decidir qué período de tiempo es considerable para Google note nuestra ausencia. Entre tres meses y un año podremos elegir para que el sistema intente ponerse en contacto con nosotros vía telefónica o un correo alternativo para saber dónde hemos estado todo ese tiempo. Si no respondemos, días más tarde se pondrá en contacto con algún familiar o amigo (que debemos especificar en la configuración de este sistema) y si lo hemos decidido, Google le dará acceso a nuestro Gmail, YouTube o Calendario, depende de lo que hayamos establecido en al configurarlo.
Finalmente y sólo cuando nuestro contacto lo decida, Google eliminará por completo nuestra cuenta. Por supuesto, el paso que involucra a otra persona puede ser ignorado, y solamente seleccionar que borre la cuenta sin avisar a nadie y eliminando todo archivo, si así lo queremos.
Así como muchos contamos con seguros de vida preparados para el peor de los casos, es buena idea también configurar este sistema, tomando en cuenta que muchos dependemos de algunos de estos servicios para trabajar, como Gmail principalmente, por lo que los datos e información que muchos tienen en esa cuenta no pueden sencillamente quedar en el Limbo una vez que no estemos más en esta vida.

viernes, 23 de noviembre de 2012

Tutorial: Como Instalar Ubuntu 12.10 Quantal Quetzal

Tutorial: Como Instalar Ubuntu 12.10 Quantal Quetzal

Si estas convencido de querer instalar Ubuntu 12.10 Quantal Quetzal en tu ordenador, lo primero que debes tener en cuenta es descargar la imagen .ISO directamente desde el Sitio Web Oficial de Ubuntu entrando aquí.

Es muy importante luego de haber descargado la imagen .ISO en tu Ordenador, verifiques la autenticidad de que es una copia real del archivo original empleando la suma de verificación MD5 como lo recomienda Ubuntu.

Si ya tenemos descargado nuestra imagen ISO desde el Sitio Web Oficial de Ubuntu y contamos con un Grabador CD/DVD o una memoria USB con el espacio suficiente para almacenar la nueva imagen ISO de Ubuntu 12.10 Quantal Quetzal, puedes seguir estas recomendaciones desde la Página Oficial de Ubuntu "Como Grabar un DVD" o "Cómo crear un arranque USB"

Ahora que ya tienes todo listo comenzaremos con la instalación de Ubuntu 12.10 Quantal Quetzal en tu Ordenador, con esta guía aprenderás como instalar paso a paso Ubuntu sin morir en el intento.

  1. La primera pantalla que vas a ver cuándo comiences a Instalar Ubuntu 12.10 Quantal Quetzal será la pantalla con las distintas opciones que tiene el ISO de Ubuntu. Donde presionaras F2 y elegirás con que idioma deseas ver las opciones de instalación y escoges Instalar Ubuntu:
  2. Luego de haber seleccionado el idioma, el Setup cargara las opciones para proceder con la instalación:
  3. Después de los anteriores pasos, nos mostrara la Pantalla de Bienvenida, donde elegiremos el idioma necesario y presionamos el botón Continuar:
  4. Luego de haber presionado Continuar, nos muestra la Pantalla Preparando la instalación de Ubuntu donde verificamos que contamos con lo necesario para realizar una correcta instalación de la distribución, además de elegir si deseamos descargar actualizaciones mientras se instala o instalar software de terceros, presionamos Continuar para proceder con la instalación:
  5. Luego tenemos la opción Tipo de instalación, donde te recomiendo si tienes instalado otros Sistemas Operativos escojas la última "Más opciones", pero si solo deseas tener Ubuntu en tu Equipo selecciona "Borrar disco e instalar Ubuntu, clic en Continuar":
  6. En mi caso yo escogí "Más opciones" y puedo crear o modificar las particiones que quiera, clic en "Nueva tabla de particiones...", al hacer esto nos muestra un mensaje advertencia que se creara una nueva tabla y que si tenemos alguna otra partición la eliminara, presionamos "Continuar" y procedemos con la siguiente ventana:
  7. Una vez creada nuestra Nueva tabla de particiones, procedemos a crear las particiones requeridas en Linux, tales como el boot (/boot), el swap o área de intercambio (/swap) y la raíz (/), clic en el signo "+" para agregar nuevas particiones:
  8. Procedemos a crear nuestra primera partición /boot, en mi caso yo elige el tipo de la nueva partición como Lógica ya que si más adelante quiero instalar otro Sistema Operativo, no podre ya que no puedo tener más de 3 particiones primarias en mi tabla de particionamiento:
  9. Luego creamos nuestro área de intercambio o más conocido como /swap, aquí no será de la misma forma para todos, ya que debes de tener en cuenta la cantidad de memoria que tienes instalado en tu Ordenador (Ver esquema de particionamiento recomendado):
  10. Para finalizar con la creación de particiones, tenemos que crear nuestra raíz /, donde le daremos todo lo que queda de espacio en el disco:
  11. Listo luego de haber elaborado nuestra tabla de particiones, nos quedara como resultado la siguiente gráfica, clic en Instalar ahora:
  12. En la siguiente pantalla nos pedirá la información de ubicación, seleccionas de acuerdo a tu procedencia y presionas Continuar:
  13. Luego seleccionamos la distribución de nuestro teclado, clic en Continuar:
  14. En esta parte de la instalación nos da la opción de configurar nuestro nombre, el nombre del equipo y nuestro usuario y contraseña con la cual tendremos acceso al Sistema Operativo, clic en Continuar:
  15. Luego veras la siguiente ventana en la cual se comienza a copiar los archivos de instalación que contiene el ISO de Ubuntu, aquí solo nos queda esperar unos minutos:
  16. Cuando la instalación haya terminado nos mostrara el siguiente mensaje, en cual nos solicita Reiniciar ahora el equipo para que puedas usar tu nuevo Sistema Operativo:
  17. Luego de haber reiniciado el equipo tendremos como resultado la siguiente ventana, donde nos pide autenticarnos como usuarios:
  18. Al ingresar nuestra contraseña, tendremos nuestro escritorio Ubuntu 12.10 Quantal Quetzal totalmente limpio:
  19. Espero que disfrutes al máximo este Sistema Operativo.

lunes, 22 de octubre de 2012

Casos de Uso: Buenas y Malas Práticas

La Especificación de Requisitos con Casos de Uso: Buenas y Malas Prácticas

El uso de UML como estándar para la construcción de software se ha extendido en los últimos años. Es por eso que el empleo de los casos de uso, como parte del estándar UML, se ha incrementado. El propósito de los casos de uso es describir en lenguaje natural la funcionalidad completa de un sistema a desarrollar y su empleo se realiza en el proceso de especificación de requisitos del sistema.

Lamentablemente, la bibliografıa existente, muestra muchas formas de aplicar los casos de uso y no son pocas las veces en que su empleo es inadecuado. Algunas de las causas son: mala interpretación del estándar UML y secuencia incorrecta de actividades para la creación de casos de uso.

Este artıculo presenta un esquema de trabajo para afrontar el proceso en mención utilizando casos de uso. Se incluye, en este esquema, las actividades que se deben realizar, la utilización correcta de casos de uso y los errores que se cometen frecuentemente en cada una de las actividades.

Cabe resaltar que este esquema de trabajo es aplicado en los proyectos que forman parte de los cursos del área de Ing. de Software de la PUCP a nivel pre y post grado. También, es utilizado en las tesis para optar el titulo de Ing. Informático.

Fuente PDF aqui

martes, 2 de octubre de 2012

Ocultar Unidades de Disco usando DISKPART

Si dispones de archivos importantes que se almacenan en un disco duro (partición de disco) que no quieres exponer a que todo el mundo lo vea o personas indeseadas roben tu información, puedes esconderlos empleando de esta gran herramienta que viene con Windows. Sigue al pie de la letra los pasos a continuación:
  1. Te diriges a INICIO » EJECUTAR » y escribes DISKPART.
  2. Luego aparecerá una ventana, que solicita la confirmación del pedido ya que realizara cambios en el disco solo aplicas si.
  3. Y notaras la siguiente ventana de la aplicación. Digitas LIST VOLUME y te mostrara una lista con todas las unidades disponibles en tu Windows.
Ejemplo: si deseas ocultar la unidad (E:) con el label DATOS, escribes la siguiente línea SELECT VOLUME 3.

Ahora escribes la siguiente línea para ocultar la unidad REMOVE LETTER E (En algunas ocasiones es necesario reiniciar el sistema para que surja efecto).

La herramienta DISKPART eliminara la letra de la unidad, por lo tanto Windows no podrá identificarlo y no volverá aparecer.

No te preocupes por tus datos siguen estando en el mismo lugar, ahora si quieres volver a ver tu unidad para agregar más información, solo tienes que repetir el mismo proceso, pero esta vez tienes que reemplazar la línea "REMOVE LETTER E" por "ASSIGN LETTER E" y nuevamente tu disco esta visible.

Espero que sea de gran utilidad.

martes, 21 de agosto de 2012

Tutorial: Como Instalar BlackBerry® PlayBook™ Simulators

Como Instalar BlackBerry® PlayBook™ Simulators

El BlackBerry PlayBook es un tablet hecha por Research In Motion. Fue lanzado por primera vez a la venta el 19 de abril de 2011, en Canadá y los Estados Unidos. El PlayBook es el primer dispositivo que ejecuta BlackBerry Tablet OS, basado en QNX Neutrino , y corre aplicaciones desarrolladas con Adobe AIR. Más tarde se anunció que el BlackBerry Tablet OS se fusionó con el actual Sistema Operativo BlackBerry para producir un nuevo sistema operativo sistema, BBX (más tarde renombrado BlackBerry 10) que se utiliza universalmente a través de la línea de productos de RIM. Una segunda revisión importante para el sistema operativo BlackBerry PlayBook fue lanzado en febrero de 2012. El PlayBook también es compatible con aplicaciones del sistema operativo Android, lo que les permite ser vendido e instalado a través de la tienda BlackBerry App World. (Mas información)
Para poder comenzar con la instalación deben de tener disponible lo siguiente:
Comenzamos la Instalación suponiendo que ya tienen lo necesario para empezar.
  1. Una vez que hemos descargado el siguiente archivo, procedemos a instalar y extraer el paquete comprimido:

  2. Luego de haber descargado el archivo "BlackBerry Playbook Simulator", procedemos a instalar y extraer el paquete comprimido:

  3. En este cuadro aceptamos los "Terminos de Licencia" y presionas Next para continuar:

  4. En esta ventana nos brinda la opción de escoger una ruta para guardar la máquina virtual, si quieres lo dejas en Default o escoges la ruta que más os guste:

  5. En el cuadro siguiente damos por finalizado todo y presionamos install:

  6. En esta última ventana está cargando los archivos y lo está extrayendo en la ruta que ustedes eligieron para que se guarde:

  7. Luego de haber realizado los pasos anteriores veremos notamos que ya hay una máquina virtual disponible pre-configurada por BlackBerry para nuestro desarrollo o cualquier uso que os daras:

  8. Procedemos a abrir nuestro VMWare, en mi caso tengo la última versión instalada en mi computadora y me va de maravilla, si no lo tienes descárgalo o escríbeme para poder compartirlo:

  9. En la ventana anterior elegimos la opción "Open a Virtual Machine" y nos dirigimos a la ruta donde salvaste el archivo y la seleccionas:

  10. Una vez seleccionado la máquina de BlackBerry Playbook Simulator, notaras el siguiente cambio, si deseas puedes editar la configuración de la máquina virtual en "Edit irtual machine settings":

  11. Listo ya tenemos nuestro Máquina Virtual en este caso nuestra propia Tablet Virtual con BlackBerry PlayBook:

  12. Al comienzo veras todo en inglés, pero no te preocupes solo te diriges al icono "Settings", clic y veras la siguiente ventana, seleccionas language y escoges tu idioma preferido:

  13. Aquí tengo mi Tablet Virtual listo para desarrollar aplicación o utilizar para entrar a nuestras redes sociales como Facebook, Twitter o muchos más:

  14. En este cuadro configuras el idioma para tu BlackBerry PlayBook Simulator, si ya tienes un dispositivo BlackBerry te aconsejo que procedas a crearte una cuenta en BlackBerry, la cual te servirá de mucho ya que con ese Id que te brinda BlackBerry puedes instalar Aplicaciones Oficiales, Juegos y más.

  15. Esta ventana donde puedes ver el Facebook, solo es la versión web como te dije si quieres la Aplicación Oficial necesitas un Id en BlackBerry con la cual verifica que ya tienes un móvil BlackBerry y te brinda un ID la cual se asociara a tu PlayBook Virtual como si fuera una Tablet Real:

  16. Espero que os guste y se de su agrado, a ver si me regalas un "Like" o compártelo con tus amigos.

lunes, 9 de julio de 2012

Tutorial: Como Instalar Android 4.0 RC x86 usando VMWare

Como Instalar Android 4.0 RC x86 usando VMWare

La versión 4.0-RC1 está basado en el Android 4.0.3 (Ice Cream Sandwich rama). Hemos arreglado y se añade el código 86 se especifica para que el sistema funciona sin problemas en las plataformas x86, especialmente para netbooks o tabletas. Las características principales contienen:

  • Kernel 3.0.8 con KMS habilitado. La mayoría de los netbooks puede ejecutar Android-x86 en la resolución nativa.
  • Aceleración de hardware OpenGL para AMD Radeon y chipsets de Intel. Usted puede desactivar mediante la adición de hwaccel = 0 a la CmdLine si tiene problemas para habilitar la aceleración por hardware.
  • Soporte Multi-táctil, WiFi, audio, Bluetooth, G-sensor y cámara.
  • Habilitar el motor V8 JavaScript, ~ de 10 veces más rápido que el motor de JSC de edad. (Comprobado por V8 Benchmark Suite).
  • Habilitar cromado pila HTTP para streaming de medios de comunicación suppoer.
  • Simular sdcard por el almacenamiento interno.
  • Soporte experimental de renderScript.
  • Unidad USB externa, y se sdcard automático montado en / mnt / USB de conexión en marcha.
  • Admite el modo híbrido de imágenes ISO.
  • Un texto basado en interfaz gráfica de usuario de instalación que soporta sistemas de archivos ext3/ext2/ntfs/fat32.
  • Sistema de ficheros comprimido (squashfs).
Problemas conocidos
  • Suspender y reanudar no funciona en algunos de los objetivos.
  • No hay soporte para Ethernet, pero si el parche "ethernet.diff.tar.gz" que puedes descargarlo y aplicarlo.

Este es un proyecto de puerto de proyecto de código abierto Android a la plataforma x86, anteriormente conocido como "el parche de alojamiento para el apoyo Android x86". El plan original es para albergar diferentes parches para el apoyo de la comunidad Android x86 de código abierto. Pocos meses después de creado el proyecto, nos dimos cuenta que podíamos hacer mucho más que hospedaje parches. Así que decidimos crear nuestra base de código para proporcionar apoyo en diferentes plataformas x86, y configurar un servidor git como anfitrión.

Se trata de un proyecto de código abierto bajo licencia Apache Public License 2.0. Para mas informacíon.

Android-x86 VirtualBox/VMWare (Ethernet, Audio) Aquí.

Requerimientos previos a la instalación:

  • Tener instalado la ultima version de VMWare o VirtualBox.
  • Tener descargado el .ISO del Sistema Operativo desde la pagina oficial.

martes, 5 de junio de 2012

Like Box de Facebook, flotante y con efecto deslizante

El Like Box de Facebook, flotante y con efecto deslizante

Aunque Facebook Slide LikeBox es una extensión de Joomla también podemos usarlo en Blogger. Se trata de un gadget que muestra pestaña en un extremo del blog, y al pasar el cursor sobre ella aparece el LikeBox de Facebook con un efecto deslizante. Puedes verlo en esta misma entrada, se encuentra al lado derecho de la ventana.

El gadget funciona con jQuery ya que proporciona el efecto deslizante, así que usaremos ese script, un poco de CSS y el Like Box de Facebook.

Lo primero es entrar en Diseño | Edición de HTML y antes de </head> pega el script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript"> jQuery.noConflict(); jQuery(function (){ jQuery(".slide_likebox").hover(function(){ jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium"); },function(){ jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium"); },500); return false; }); </script>

Y ahora antes de ]]></b:skin> o en Personalizar | Añadir CSS agrega los estilos:

.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDWtlLtk6h_8dDr4semnhyvNefZjif9d40SWShCok3_7ASRRuXCgdfVZpEgv0KTRMhP3TmuFg1nEG6jQlXHHxxOBpk601-_JSA-B6zY-BhpDrPJB9YWw4p3hyphenhyphens18GQLuNnAuNfj7Bz4eg/) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}

div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {

margin:-1px
}

Por último entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript y ahí pega el siguiente código:

<div class="slide_likebox"><div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnombre-de-tu-pagina-de-facebook&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>

Ese código contiene el Like Box de Facebook, así que cambia solo cambia donde se indica el nombre de tu pagina, y listo. No requiere muchos pasos ni mayor trabajo, a menos que quieras realizar modificaciones.

La pestaña, así como el fondo del gadget es una imagen, así que si deseas cambiarle el color o tamaño tendras que editar la imagen que se encuentra en el área de los estilos.
Lo ideal sería no modificar el tamaño, pero en caso de que desees hacerlo deberás editar la imagen, cambiar las medidas tanto en los estilos como en el Like Box.

Pero claro, eso es sólo si quieres modificar su tamaño, sino entonces no necesitaras nada mas que los tres primeros pasos y podrás tener este Like Box de Facebook, flotante y con efecto deslizante en tu blog.

viernes, 1 de junio de 2012

Tutorial Efecto shadow-box con CSS3

Tutoriales : Efecto Shadow Box con CSS3

Anteriormente, se escribió un tutorial sobre cómo crear las esquinas redondeadas, con la ayuda de CSS3. El tutorial de hoy se encuentra en otro gran efecto que se puede lograr utilizando una propiedad CSS3, caja de sombra. Este box-shadow propiedad permite aplicar uno o más efectos de sombra a un cuadro. Y de nuevo, este efecto sólo es compatible con Firefox, Safari, Chrome y Opera, por ahora.

La propiedad Box-shadow contiene seis atributos:

box-shadow: 1px 1px 1px 1px rgba(0,0,0,1) inset;
Propiedades: x-offset, y-offset, blur distance, spread distance, color, inset attribute for inner shadows;

Atributos Descripción
x-offset Desplazamiento horizontal de la sombra. Los valores positivos para hacer que la caída de la sombra en el lado derecho de la caja. Los valores negativos hacen que las sombras caen sobre la izquierda.
y-offset El desplazamiento vertical de la sombra. Los valores positivos para hacer que la caída de la sombra debajo de la caja. Los Valores negativos hacen que las sombras caen en la parte superior de la caja.
Blur distance Los valores negativos no son permitidos. Si el valor es cero, el borde de la sombra será nítido. Cuanto más positivo sea el valor, el desenfoque de la sombra es más.
Spread distance Los valores negativos hacen sombra a disminuir hacia el interior. Un valor positivo hace que la sombra de su expansión en todas las direcciones.
Inset La adición de este atributo a la sintaxis va a crear un efecto de sombra interior.
Color El color de la sombra. Código HEX, RGB o RGBA se puede utilizar como valor.

Estos son algunos ejemplos agrupados de acuerdo a los atributos que se utilizan. He usado RGBA para el color. Por lo tanto, quiero explicar acerca de RBGA también. RGBA funciona de manera similar como la anterior RGB usando CSS2. Pero, RGBA incluye "alfa" para permitir la especificación de la opacidad de un color.

RGBA ( R , G , B , A )
R: 0-255
G: 0-255
B: 0-255
Un :0-1

Si están menos familiarizados con el color RGB, a continuación puede utilizar generadores en línea, agrege un valor de opacidad para crear RGBA.

Ejemplos de “box-shadow” con CSS3

Este cuadro normal con afilados bordes esquinas se creó usando el siguiente código.

<div style="background-color:#F1F1F1; border:3px solid #DDDDDD;"></div>

Esta caja normal con las esquinas redondeadas se ha creado utilizando el siguiente código.

<div style="background-color:#F1F1F1; border:3px solid #DDDDDD;-webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;padding: 10px;"></div>

Sombra (usan los atributos x-offset y offset)

-webkit-box-shadow: 5px 5px rgba(0,0,0,0.4);

-moz-box-shadow: 5px 5px rgba(0,0,0,0.4);

box-shadow: 5px 5px rgba(0,0,0,0.4);

-webkit-box-shadow: 5px 5px rgba(0,0,0,0.4);

-moz-box-shadow: 5px 5px rgba(0,0,0,0.4);

box-shadow: 5px 5px rgba(0,0,0,0.4);

-webkit-box-shadow: -5px -5px rgba(0,0,0,0.4);

-moz-box-shadow: -5px -5px rgba(0,0,0,0.4);

box-shadow: -5px -5px rgba(0,0,0,0.4);

Usando el atributo Blur

-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);

-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);

box-shadow: 5px 5px 5px rgba(0,0,0,0.4);

-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);

-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);

box-shadow: 0px 0px 20px rgba(0,0,0,0.4);

Usando el atributo Spread

-webkit-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);

-moz-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);

box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);


-webkit-box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);

-moz-box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);

box-shadow: 0px 0px 10px 20px rgba(0,0,0,0.4);

Usando el atributo Inset para inner shadow

-webkit-box-shadow: 10px 10px inset rgba(0,0,0,0.4);

-moz-box-shadow: 10px 10px rgba(0,0,0,0.4) inset;

box-shadow: 10px 10px rgba(0,0,0,0.4) inset;

Usando el atributo Inset con Blur

-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;

-moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;

box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;

Usando el atributo Inset con Blur y Spread

-webkit-box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;

-moz-box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;

box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;

jueves, 31 de mayo de 2012

Tutorial esquinas redondeadas con CSS3

Tutoriales : Esquinas Redondeadas con CSS3

Este tutorial trata de la creación de efectos de esquinas redondeadas, con la ayuda de CSS3. Este efecto se consigue utilizando la propiedad "border-radius" y realmente ahorro de tiempo que se desperdicia en la creación de alrededor de bordes fronterizos imágenes en Photoshop y luego se utilizan en los diseños de la tela.Por ahora, este efecto sólo es visible en las últimas versiones de Mozilla Firefox, Chrome, Safari y Opera, y no en IE todavía. Sin embargo, Microsoft ha confirmado el apoyo de CSS3 en Internet Explorer 9. Y echar un vistazo a la actualización de la propiedad Border Radius de CSS3 en IE9 página de Test Drive.


Ejemplos CSS3 de la Propiedad “border-radius”

Ejemplo 1

This box was created using the following code.
<div style=”background-color:#F1F1F1; border:3px solid #DDDDDD;-webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px;padding: 10px;”></div>

Ejemplo 2

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Ejemplo 3

-webkit-border-radius: 20px;
-moz-border-radius: 20px;

Ejemplo 4

-webkit-border-top-left-radius: 24px;
-webkit-border-bottom-right-radius: 24px;
-moz-border-radius-topleft: 24px;
-moz-border-radius-bottomright: 24px;
border-top-left-radius: 24px;
border-bottom-right-radius: 24px;

Ejemplo 5

-webkit-border-radius: 36px;
-webkit-border-top-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
-moz-border-radius: 36px;
-moz-border-radius-topright: 12px;
-moz-border-radius-bottomleft: 12px;
border-radius: 36px;
border-top-right-radius: 12px;
border-bottom-left-radius: 12px;

Ejemplo 6

-webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;

Ejemplo 7

-webkit-border-top-left-radius: 50px 30px;
-webkit-border-top-right-radius: 50px 30px;
-moz-border-radius-topleft:50px 30px;
-moz-border-radius-topright: 50px 30px;
border-top-left-radius: 50px 30px;
border-top-right-radius: 50px 30px;

y mucho más...

Aquí, me gustaría hablar de esta genial herramienta de CSS "border-radius" que genera el código CSS3 por ti. Todo lo que tienes que hacer es ajustar el valor del punto de “border-radius” valor, copie el código CSS generado y pégalo en tu hoja de estilo, como se muestra en la codebox a continuación.

.example {
background-color:#F1F1F1;
border:3px solid:#DDD;
text-align:center;
width:400px;
padding:10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

En resumen, este CSS3 border-radius propiedad minimiza el uso de las imágenes en nuestra página web, ahorro de tiempo y acelera las cargas de página.