miércoles, 6 de enero de 2016

Novedades sobre CSS3


CSS (Cascading Style Sheets) es la sigla utilizada para definir a las hojas de estilo , estas son utilizadas a la hora del realizar un diseño web para definir los diferentes estilos y reglas de visualización en los diferentes dispositivos y navegadores web.

A partir del año 2005 aparece una nueva versión denominada CSS3 (Cascading Style Sheets  Level 3)  que ofrece una serie de características nuevas, a continuación vamos a ver alguna de ellas.


- Transparencias : 


En CSS3 se agrega una propiedad que permite ajustar el grado de transparencia para cualquier elemento con lo cual ya no es necesario utilizar imágenes PNG para simular este efecto

Un Ejemplo  :

color: #000;
opacity:0.5;
filter:alpha(opacity=50);

-moz-opacity:0.5; 





- Definir la tipografía sin limitaciones : 


Una de las propiedades más interesantes de CSS3 es poder decidir como será el font que utilizaremos sin tener que recurrir a las fuentes básicas estándar (Arial, Times, etc..)  

Mediante el parámetro "src" definimos en que carpeta se encuentra almacenado el font, debemos asegurarnos de bajar el archivo con la tipografía deseada en la carpeta correspondiente y de esta forma el navegador se ocupará de mostrarla tal como fue definida con sus características específicas.

Un Ejemplo  :

@font-face {
font-family:'MEgalopolis Extra';

src: url('/archivos/MEgalopolisExtra.otf') format('opentype');}







- Bordes redondeados : 


Ahora en CSS3 podemos definir esquinas redondeadas cuando antes para lograr el mismo efecto debíamos utilizar imágenes que simulaban esta propiedad

Un Ejemplo  :

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

los parámetros "-moz" y "-webkit" definen a que navegador se le está aplicando la propiedad "radius", en primer caso es para que funcione en Firefox y en el segundo para Safari y Chrome




martes, 5 de enero de 2016

Que novedades nos trae el HTML5 ?


HTML (hyper text markup language) son las siglas utilizadas para definir este lenguaje ampliamente utilizado para el diseño y programación web, fundamentalmente nos permite estructurar y presentar el código en los diferentes navegadores y dispositivos. 


En el año 2000 el HTML4 (cuarta revisión del html) fue declarado el lenguaje oficial de la web y 10 años después surje el HTML5 que se trata de la quinta revisión del mismo lenguaje.

Podemos decir que el HTML5 se ocupa de presentar el layout de nuestras páginas, realizando ciertos ajustes en el medio. La diferencia fundamental con el HTML4 es la mejora en muchos aspectos del código como la incorporación de elementos que permiten reducir la dependencia de plug-ins, la posibilidad de acceder de forma offline, el uso del drag and drop, la inserción de multimedia y la incorporación de etiquetas entre otros.


1. El HTML5 es mucho más estructurado que el HTML4


Nos brinda una serie de etiquetas para delimitar zonas y secciones que permiten darle mayor simplicidad y facilidad de lectura a nuestro código fuente. La semántica pasa a ser mucho más comprensible y el trabajo que realiza el buscador resulta altamente favorecido.

En lugar de utilizar tantos elementos <div> con id o class para identificar secciones ahora podemos utilizar un conjunto de etiquetas que dan mayor dinamismo a los buscadores.

Algunos ejemplos de estas etiquetas :

<header>  especifica que se trata de una cabecera marcando mayor importancia.

<nav>  es la típica barra de navegación superior de los sitios 

<section> determina una sección dentro del documento 

<article> especifica un contenido variable como son las entradas de un foro o blog

<aside>  es una referencia sobre aquel contenido que no representa lo más importante del sitio, sino que es secundario o de apoyo como el caso de una barra lateral.

<footer> especifica el final o pié de página del sitio










2. El HTML5 tiene formularios mejorados

Los "inputs" permiten nuevos tipos de datos 

number , range , datetime , datetime-local , month ,  date , time, week , email , search , url, color


Nos evita tener que añadir código javascript adicional para controlar ciertos elementos.

La mayor ventaja se observa al momento de utilizar una misma aplicación web en diferentes navegadores y sistemas operativos que utilizan este estándar y verificar que cada uno se adapta al tipo de dato con su forma particular .











3. El HTML5 incorpora nuevos atributos

Algunos de los atributos más interesantes son :

autofocus : especifica que el elemento de un form quedará enfocado (con el cursor posicionado en él) al momento de cargarse la página

required : obliga a ingresar algún valor en el elemento del formulario y no permite enviar el formulario hasta que no se ingresa el mismo.

min, max, step : indican que el valor del elemento debera estar dentro de un rango mínimo y máximo y que podrá incrementarse o decrementarse según el valor "step". 

reversed : se puede utilizar en el caso de las listas <ol> para indicar que la lista sea numerada de forma descendente.