Nuevo navegador para Windows

El nuevo navegador llegará también con la integración del asistente digital Cortana, en el que los usuarios podrán consultar, entre otras cosas, reservas de hoteles, estados de vuelos o buscar información a través de la barra de direcciones. Se espera que Cortana reemplace a Bing dentro de la infraestructura actual de Internet Explorer.

En el terreno de la personalización del navegador, Spartan incluirá diferentes temas personalizables, pero en cualquier caso no será en el lanzamiento inicial; habrá que esperar a actualizaciones futuras. El sistema de pestañas también será ampliamente retocado en un esfuerzo para conseguir abrir múltiples instancias de una forma limpia. Los usuarios podrán agrupar estas según sus preferencias, además de poder separar la navegación personal de la laboral.

Spartan saldrá al mercado siendo una aplicación que funcionará en PC, tabletas y teléfonos inteligentes. Su aspecto será similar en todas las plataformas. Estará disponible en la tienda digital de Windows para que el usuario pueda realizar el proceso de actualización del navegador de una manera sencilla. Eso sí, la versión de escritorio será una aplicación diferente a la de los móviles.

A pesar de que los esfuerzos de Microsoft se volcarán en hacer que Spartan se convierta en un nuevo estándar en Windows, los usuarios más reacios al cambio podrán permanecer usando Internet Explorer en Windows 10, ya que se incluirá también en el sistema a modo de compatibilidad.

Hoy día 21 de enero se hará el anuncio del nuevo Windows 10, y a lo mejor se sepa algo de este nuevo navegador de Windows.

¿Qué es LESS?

LESS  es una ampliación a las famosas hojas de estilo CSS, pero a diferencia de estás funciona como un lenguaje de programación, permitiendo el uso de variables, funciones, operaciones aritmeticas, entre otras, para acelerar y enriquecer los estilos en un sitio web.

LESS no reemplaza a CSS, de hecho el resultado final es una hoja de estilos css completamente funcional y compatible, simplemente ofrece mejoras en el área de desarrollo, por lo que usarlo se vuelve recomendable si quieres ahorrar tiempo de desarrollo, utilizar caracteristicas avanzadas de estilos y para ahorrarte trabajo —de allí su nombre: less css (menos css).

Caracteristicas de LESS CSS

Las caracteristicas de LESS CSS son demasiadas, e incluso combinandolas pueden conseguir más, sin embargo, intentaré mencionar las más notables:

Variables

Las variables en less funcionan de forma similar a las constantes en los lenguajes de programación, permitiendo definir valores que podrán ser reutilizados en cualquier parte de la hoja de estilo, e incluso entre otras hojas de estilo. 

Mixins

Los mixins son, como a mi me gusta llamarlos, clases dinámicas, porque funcionan de forma similar a las clases CSS pero con caracteristicas de funciones de programación. Es decir que pueden ser llamadas desde otras clases para obtener su valor y además permiten parametros, aunque no es necesario utilizarlos. Está caracteristica  hace posible definir una clase dando flexibilidad para variar algunos estilos como el color o tamaño del elemento. 

Funciones de color

Las funciones de color son funciones pre-definidas de Less que permiten alterar un color, para hacerlo más claro, oscuro, saturado, desaturado, cambiarle la tonalidad, etc. Son una gran herramienta para definir una paleta de colores sin estar buscando códigos de color.

Read more...

Crear una galería de imagen con CSS

A causa de hacer un ejercicio para la clase DIW, vi una cosa muy interesante. No la pude usar en el ejercicio. Pero me pareció interesante para ello voy a explicar en esta entrada de como hacer una galería imagen con CSS.

1. Antes de empezar tendremos que tener algunas imágenes para crear la galería.

2. Lo siguiente es configurar la estructura de página básica con un contenedor centrado en la página. Use una textura de madera de fondo y la repetí a y claro esto va en nuestra hoja de estilos. (La textura de madera no es obligatorio hacerlo, pero en mi caso lo he puesto en el código, pero realmente no se está utilizando).

  Y esta es la estructura de nuestro documento HTML:

3.  Semánticamente se diseña la galería en forma de lista desordenada pues lo hemos echo con listas y no con tablas además se le añade la viñeta, y no olvides darles la descripción adecuada.

4. Ahora tenemos que empezar a trabajar en la CSS de la galería. En primer lugar, vamos a querer quitar los gráficos de punto que aparecen en la lista de elementos. Sólo tiene que utilizar list-style: none para eliminaros.

5. Ahora de daremos el efecto Polaroid a las imágenes mediante la adición de algunos estilos a los anclajes. En primer lugar un float a la izquierda para que se apile al lado del otro, a continuación, añadir un poco de relleno. El establecimiento de un fondo de un color gris claro entonces dará la tradicional forma de Polaroid. Para terminar con esto un toque muy sutil en la forma de un borde blanco 1px.

6. Ahora añadimos un poco de realismo al diseño, el uso del propiedad box-shadow de CSS3, para añadir un poco de sombra a las fotos. Para garantizar el orden de apilamiento de las obras posteriores, también tendrá que añadir position: relative a la CSS.

7. Ahora tenemos que apuntar a cada imagen por separado, por lo que hay que volver atrás y dar a cada imagen un class único en los links en <a>.

8. Ya definidos los class, podemos añadir un estilo único a cada foto. Escribimos en nuestro CSS y especificamos un diferente z-index en cada imagen y un poco de CSS3 para la rotación.

9. Le damos ahora para terminal la propiedad :hover para ajustar el z-index y una cifra más alta, esto asegurará que cada imagen salta a la parte superior de la pila cuando se selecciona con el ratón. También puede ajustar el box-shadow para dar la impresión de que la foto ha levantado fuera de la pantalla.

Aquí se termina el tutorial para crear una galería de iamgen con CSS, espero que este tutorial le sea de gran ayuda. Gracias.

Read more...

Saludos

Para empezar vamos a presentarnos, me llamo Ismael Garzón y ahora mismo estoy en 2 de DAW (Desarrollo de Aplicaciones Web). 

La intención de este blog viene de la propuesta de profesora de DIW (Despliegue de Interfaces Web), pero desde que termine el curso pasado quería empezar a tener una especie de portafolio donde subir los trabajos y tutoriales que realice en el curso de Grado Medio de informática. Pero por tiempo o flojera al final no me puse en ello. 

A causa de esto ya es tiempo de ponerse a ello, a ver como sale las cosas. Espero tener tiempo para publica todo lo que pueda.

Read more...