En este articulo se resume las novedades más importantes y
explicaré brevemente en que consiste eso que llaman el CSS3.
Se debe tener en cuenta el factor de la
especificidad en CSS, su influencia y la manera de controlarlo.
lunes, 14 de mayo de 2012
¿POR QUÉ SE CONSIDERA UNA TECNOLOGÍA DE PUNTA O MODERNA A CSS3?
Las nuevas
características de CSS nos permiten añadir efectos de animación a la mayoría de
elementos HTML, sin necesidad de Javascript o Flash. Por el momento, es
compatible con los navegadores WebKit -incluyendo Safari, Safari para iOS y
Chrome- y Firefox. Está previsto que Internet Explorer, a partir de su versión
10, también tenga soporte para este tipo de animaciones. Debido a que la
tecnología es relativamente nueva, se debe añadir un prefijo con el motor del
navegador. En nuestro caso, los ejemplos los realizaremos con los prefijos
webkit y moz.
¿POR QUÉ SE PUEDE APLICAR EN DETERMINADO PROBLEMA O EN CIERTOS SISTEMAS EL CSS3?
El CSS nos permite controlar los estilos de nuestros elementos HTML, en
realidad con el HTML definimos la estructura de la web & con el CSS todo
lo demás - o sea colores, fuentes, ubicación & todo lo que
se va a mostrar de nuestra web.
Hay 3 formas de aplicar CSS a una pagina HTML :
1. Dentro de la
etiqueta HTML – controlando solo la etiqueta – por ejemplo - p
{color:red;text-align:center;}.
2. Dentro del archivo
HTML (dentro de la zona HEAD) – controlando solamente este archivo -
<style>p {color:red;text-align:center;}</style>.
3. Creando un archivo
exterior .css, controlando todos los archivos web del sitio usando la etiqueta
para aplicar los estilos - <link rel=”stylesheet” type=”text/css” href=”theme.css” />- esto va
dentro del HEAD de nuestra pagina p {color:red;text-align:center;} – los estilos los aplicamos en el archivo
externo css
¿CUÁLES SON LAS APLICACIONES O USOS DE CSS3?
1. Botones y HTML: Mostramos algunas insuficiencias del
HTML en el diseño de formularios y en concreto en el retoque de botones de
envío de formularios.
2. Botones y CSS: Explicamos las mejoras que pueden
obtenerse por el uso de hojas de estilo en la creación de formularios y, más
concretamente, los botones de envío.
3. Botones e imágenes: Como podemos mejorar los botones con el
uso de imágenes en lugar de botones de submit corrientes.
4. Botones, CSS y tablas: Vamos a mejorar los botones normales,
que al hacer click hacen efecto de pulsación, con imágenes a los lados para
mejorar su aspecto.
5.
Botones, imágenes y
eventos: Para que los botones de imagen no ignoren los eventos de teclado, vamos
a utilizar una función Javascript.
6. Botones, tablas y eventos: Ampliamos
el ejemplo anterior para que el texto de los botones se pueda editar fácilmente, sin perder en presentación.
¿CUÁLES SON LAS VENTAJAS Y DESVENTAJAS DE CSS3?
Ventajas
Se obtiene un mayor control de la presentación del sitio al
poder tener todo el código CSS reunido en uno, lo que facilita su modificación.
Al poder elegir el archivo CSS que deseamos mostrar, puede
aumentar la accesibilidad ya que podemos asignarle un código CSS concreto a
personas con deficiencias visuales, por ejemplo. Esto lo detecta el navegador
web.
Conseguimos hacer mucho más legible el código HTML al tener el
código CSS aparte (Siempre que no usemos estilos en línea, claro está).
Pueden mostrarse distintas hojas de estilo según el dispositivo
que estemos utilizando (versión impresa, versión móvil, leída por un
sintetizador de voz…) o dejar que el usuario elija.
Gracias a la técnica CSS Sprites podemos aligerar la carga de nuestro sitio al juntar todas las
imágenes en una.
Las novedades de CSS3 nos permiten ahorrarnos tiempo y trabajo al poder seguir varias
técnicas (bordes redondeados, sombra
en el texto, sombra
en las cajas, etc.) sin necesidad de usar un editor
gráfico.
Desventajas
Existen limitaciones que CSS 2.x todavía no permite, por
ejemplo, la alineación vertical de capas, las sombras, los bordes redondeados…
El uso de las tablas nos permitía crear diseños complejos de
forma mucho más sencilla que utilizando CSS, aunque CSS3 está intentando
facilitar dicho trabajo.
A veces, dependiendo del navegador (Acid tests), la página
que ha sido maquetada con CSS puede verse distinta (Aunque, si hemos seguido
los estándares web de forma correcta, el problema es del navegador).
¿CUÁLES SON LAS CARACTERÍSTICAS PRINCIPALES DE CSS3?
1. Atributo
gradiente de colores en borde con CSS y Firefox: Posibilidad de definir el un gradiente de color
en el borde de los elementos con CSS, en un atributo no estándar de Firefox.
2. Bordes redondeados en CSS 3: Las características de CSS 3 incluyen bordes redondeados, a través del atributo border-radius, que define la curvatura que debe tener el borde del elemento.
3. Múltiples imágenes de fondo con CSS: Cómo conseguir que un elemento de la página tenga varias imágenes de fondo a la vez, con CSS básico y con características de CSS 3.
4. Colores RGBA en CSS 3: Veremos qué son los colores RGBA y su notación, que se incluyen en la especificación de Hojas de Estilo en Cascada CSS 3.
5. Word-wrap en CSS 3: Una propiedad de CSS 3 que sirve para romper las palabras que son demasiado largas y no caben enteras por la anchura de una caja.
6. Textos multi-columna con CSS 3: CSS 3 incorpora nuevos atributos para que el navegador se encargue de producir texto multicolumna, es decir, que maquete directamente el texto en varias columnas sin tener que hacer nosotros nada.
7. Bordes con imágenes en CSS 3: El atributo border-image y varios otros de CSS 3 harán posible la utilización de imágenes como bordes de los elementos de la página, sin código HTML especial, simplemente con hojas de estilo.
8. Sombras en CSS 3 con box-shadow: Crear sombras en CSS3 con el atributo box-shadow. Por fin podremos aplicar sombras a los elementos de la página, sin usar imágenes, Javascript ni nada extra, simplemente con un atributo de CSS 3.
9. Resplandor exterior con CSS3: Cómo realizar un elemento que tenga un resplandor exterior con CSS3 y la propiedad box-shadow.
10. Propiedad background-origin de CSS 3: La propiedad de CSS 3 background-origin permite decidir la posición de la imagen de fondo con respecto al borde, padding o el contenido del elemento.
11. Atributos CSS3 overflow-x y overflow-y: Descripción de los atributos de CSS3 overflow-x y overflow-y, que sirven para definir cómo renderizar un contenido cuando sobrepasa los límites de un contenedor en la horizontal o vertical.
12. Introducción a @font-face de CSS: Fuentes en CSS 3. Sintaxis y principales características de la regla CSS @font-face, que nos permite utilizar cualquier tipografía en una página web.
13. Sombras en el texto con text-shadow de CSS: Cómo aplicar sombras y otros efectos en los textos con CSS y el atributo text-shadow.
2. Bordes redondeados en CSS 3: Las características de CSS 3 incluyen bordes redondeados, a través del atributo border-radius, que define la curvatura que debe tener el borde del elemento.
3. Múltiples imágenes de fondo con CSS: Cómo conseguir que un elemento de la página tenga varias imágenes de fondo a la vez, con CSS básico y con características de CSS 3.
4. Colores RGBA en CSS 3: Veremos qué son los colores RGBA y su notación, que se incluyen en la especificación de Hojas de Estilo en Cascada CSS 3.
5. Word-wrap en CSS 3: Una propiedad de CSS 3 que sirve para romper las palabras que son demasiado largas y no caben enteras por la anchura de una caja.
6. Textos multi-columna con CSS 3: CSS 3 incorpora nuevos atributos para que el navegador se encargue de producir texto multicolumna, es decir, que maquete directamente el texto en varias columnas sin tener que hacer nosotros nada.
7. Bordes con imágenes en CSS 3: El atributo border-image y varios otros de CSS 3 harán posible la utilización de imágenes como bordes de los elementos de la página, sin código HTML especial, simplemente con hojas de estilo.
8. Sombras en CSS 3 con box-shadow: Crear sombras en CSS3 con el atributo box-shadow. Por fin podremos aplicar sombras a los elementos de la página, sin usar imágenes, Javascript ni nada extra, simplemente con un atributo de CSS 3.
9. Resplandor exterior con CSS3: Cómo realizar un elemento que tenga un resplandor exterior con CSS3 y la propiedad box-shadow.
10. Propiedad background-origin de CSS 3: La propiedad de CSS 3 background-origin permite decidir la posición de la imagen de fondo con respecto al borde, padding o el contenido del elemento.
11. Atributos CSS3 overflow-x y overflow-y: Descripción de los atributos de CSS3 overflow-x y overflow-y, que sirven para definir cómo renderizar un contenido cuando sobrepasa los límites de un contenedor en la horizontal o vertical.
12. Introducción a @font-face de CSS: Fuentes en CSS 3. Sintaxis y principales características de la regla CSS @font-face, que nos permite utilizar cualquier tipografía en una página web.
13. Sombras en el texto con text-shadow de CSS: Cómo aplicar sombras y otros efectos en los textos con CSS y el atributo text-shadow.
¿PARA QUE SIRVE EL CSS 3?
El CSS sirve para definir la estética de un sitio web en un
documento externo y eso mismo permite que modificando ese documento (la hoja
CSS) podamos cambiar la estética entera de un sitio web, el mismo sitio web
puede variar totalmente de estética cambiando solo la CSS, sin tocar para nada
los documentos HTML o jsp o asp que lo componen.
CSS es un
lenguaje utilizado para dar estética a un documento HTML (colores, tamaños de
las fuentes, tamaños de elemento, con css podemos establecer diferentes reglas
que indicarán como debe presentarse un documento. Podemos indicar propiedades
como el color, el tamaño de la letra, el tipo de letra, si es negrita, si es itálica,
también se puede dar forma a otras cosas que no sean letras, como colores de
fondo de una pagina, tamaños de un elemento (por ejemplo el alto y el ancho de
una tabla.
¿QUÉ TRABAJOS SE HAN REALIZADO POR DIVERSOS INVESTIGADORES ALREDEDOR DEL TEMA? PUEDEN SER PONENCIAS, ARTÍCULOS CIENTÍFICOS U OTROS DE HTML5.
Investigadores de la ETSI de Telecomunicación han
analizado el soporte de algunos navegadores web al estándar HTML5. De entre los
analizados, Google Chrome 16 demuestra ser el navegador para PC con mayor
compatibilidad y Blackberry PlayBook 2.0 para tablets.
El estándar HTML5, en continua
evolución pero con versiones cada vez más estables gestionadas por el consorcio
World Wide Web Consortium (W3C), pretende dar respuesta a necesidades
existentes desde hace tiempo en el ámbito de las aplicaciones web: desarrollo
de aplicaciones con una experiencia de usuario mejorada sin la utilización de
software adicional; aprovechamiento del trabajo colaborativo de desarrolladores
dada su naturaleza abierta; o, en principio, una mejora de ahorro de
costes en el desarrollo de páginas web.
Martes, 30 Noviembre 2010 por Federico Erostarbe
De acuerdo a toda una serie de estudios comparativos realizados por Paul Bakaus y compañía, la famosa etiqueta canvas de HTML5 todavía “no es una decisión obvia” para hacer juegos en línea. ¿Por qué? Porque trabajar con imágenes sería lento y el redibujado simplemente doloroso. Sí, dije “todavía”.
¿Lo bueno? Para prevenir cross-site scripting, HTML5 permitirá (algún día, recuerden el “todavía” del parrafo anterior) llevar a cabo cross-document messaging, es decir que se permitiría la comunicación entre distintos documentos sin importar el dominio, pero de un modo tal que se evite el problemita mencionado al inicio del párrafo.
http://www.aulaclic.es/articulos/html5.html
Articulo 26: HTML5, otra forma de crear
En los últimos años, las tecnologías para el diseño y
la programación web han avanzado mucho, pero los esfuerzos se han centrado en
potenciar el uso de AJAX. El lenguaje de etiquetas HTML, sin embargo, permanecía
sin cambios desde su última revisión en 1999, quedando obsoleto en muchos
aspectos. Entonces, en 2004, los principales desarrolladores de navegadores
(Apple, Opera y Mozilla) iniciaron una colaboración para crear aplicaciones
web, el WHATWG. Como no podía ser de otra manera el W3C se unió a la iniciativa en 2006, cuando empezaron a desarrollar la nueva
versión. En 2009 nace por fin HTML5, y se prevee que para 2012 se acepte como
estándar.
¿POR QUÉ SE CONSIDERA UNA TECNOLOGÍA DE PUNTA O MODERNA A HTML5?
Tecnología
de punta es, un término utilizado por todos, entendido a plenitud por algunos,
pero que otros asimilan sólo con computadores, elementos electrónicos o
relacionados. Este tema, que tiene tanto qué expresar, se considera una
herramienta útil que mantiene a las empresas vigentes y que contribuye a que
éstas aumenten su rentabilidad a través de la agilización y efectividad en
compras, ventas y, por supuesto, publicidad.
La
tecnología de punta ha permitido que el desarrollo de las empresas adquiera una
dinámica diferente, que utilicen lo nuevo para hacer la vida de los clientes
más fácil, llevadera y grata. Un ejemplo de este tipo de tecnología es la
presentada por Thriftway en West Seatle – Estados Unidos, quien implementó un
sistema en el que se adhirió la huella digital en la tarjeta de crédito o
débito de los usuarios, con el objeto de que éstos sólo pasen uno de sus dedos
por un huellero que identifica las huellas de las personas, sin necesidad de
presentar documentos de identificación o firmar papeles.
Uno como desarrollador Web siempre
estructura sus paginas Web dependiendo de sus necesidades, pero generalmente
ocupamos los campos o div con los identificadores :header (cabecera),
footer (pie de página), sidebar(barra latera), nav (barra de navegación). La
W3C, en esta version de HTML, se basó en el diseño más común de las
páginas Web alrededor del mundo para llegar a un estándar de etiquetas que
realicen las mismas tareas de manera más rápida y eficiente.
¿POR QUÉ SE PUEDE APLICAR EN DETERMINADO PROBLEMA O EN CIERTOS SISTEMAS DE HTML5?
El HTML5 (HyperText Markup Language, versión 5) es
la quinta revisión del lenguaje de programación “básico” de la World Wide Web,
el HTML. Esta nueva versión pretende remplazar al actual (X)HTML, corrigiendo problemas
con los que los desarrolladores web se encuentran, así como rediseñar el código actualizándolo a nuevas necesidades que demanda la web de hoy en día.
El HTML5 no es una cosa grande como un todo, sino
una colección de elementos individuales, por consiguiente lo que sí se podrá
será detectar si los navegadores soportan cada elemento por separado. Todos los
objetos DOM comparten unas características comunes, aunque algunos tienen más
que otros. En los navegadores que soportan rasgos del HTML5, algunos objetos
tienen una única propiedad y con una simple ojeada al DOM podremos saber las
características que soporta el navegador.
Existen muchas razones, de las cuales podemos
mencionar:
- Empresas como Google, Apple y Microsoft apoyan este estandar.
- Servicios Web como Yotube, Vimeo y Scribd ya se estan cambiando a este estándar
- Permite una mayor interacción entre nuestras páginas Web y contenido media (vídeo, audio, entre otros) así como una mayor facilidad a la hora de codificar nuestro diseño básico.
- Su reproductor de video no requiere flash o adobe player y es más eficiente ya que ocupa menos recursos en el computador del usuario.
- Es compatible con las versiones anteriores de HTML
- Su API ofrece una variedad de herramientas que son fundamentales para el futuro de las aplicaciones Web como aplicaciones con caché.
¿CUALES SON LAS APLICACIONES O USOS DE HTML5?
Las
aplicaciones que utilizan HTML5 son:
1. DeviantART muro. Una aplicación de dibujo basado en HTML 5 que
funciona en todos los navegadores modernos, y se puede bucear y empezar a
dibujar sobre un lienzo en blanco.
2. HootSuite. Panel de control social basado en HTML5 con algunas
funciones muy útiles: geo-localización de Tweet, búsqueda, elección entre
retweets con estilo nuevo y viejo, con Google Analytics, interfaz personalizado
y mucho más.
3. X-Worlds. Algo interesante para los niños, done puede
presentar un dibujo de tu personaje favorito y ver que se transforman en una
ilustración impresionante.
4. Aviary’s Image Editor.
Un potente foto editor que es fácil de usar y sorprendente. Además está
diseñada para ser portátil para que los desarrolladores pueden integrar
directamente en sus sitios o aplicaciones.
5. CSSWarp. Una herramienta en línea que te permite conectar
cualquier texto a una trayectoria curva o un círculo, a continuación, crear
texto deformado con puro CSS y HTML.
6. Flickr Browser. Una
aplicación única para la navegación en las fotos de Flickr con un enfoque
nuevo.
7. CSS3.0 Maker. Una aplicación ideal para los desarrolladores.
Hace uso de cursores e incluso un área de vista previa en vivo para generar las
diferentes opciones.
8. Coolendar. Un calendario basado en HTML5, con interfaz simple
y limpio y funciones útiles para la gestión eficaz del tiempo.
9. Twimbow. Una herramienta colorida, de Twitter con un enfoque
en la filtración. Se pueden asignar diferentes colores para diferentes usuarios
y grupos, y también cambiar el color de los tweets añadiendo una etiqueta de
color.
10. Sketchpad. Una aplicación de dibujo con selección de colores,
patrones, muestras y mucho más.
11. CloudCanvas. Editor de imagen con todas las funciones en línea
que te permite crear y guardar los medios de comunicación digitales.
12. Lislis Painter.
Otra interesante aplicación web con las herramientas básicas, que hacen de esta
aplicación una útil herramienta de dibujo en línea.
13. Scribd. Una
aplicación web que proporciona acceso en el navegador a todo tipo de documentos
y libros electrónicos subidos por los usuarios.
14. Google Body Browser. Una
aplicación web para el estudio del cuerpo humano.
15. LucidChart. Una gran herramienta en línea para la creación de
gráficos y diagramas.
16. Diagramo. Una aplicación interactiva en línea, que te permite
hacer diagramas y diagramas de flujo desde un navegador web.
17. Ultimate CSS Gradient
Generator. Generador de gradientes CSS3. Utiliza los deslizadores y
selectores de color como Photoshop y es muy recomendable.
18. Citicles. Un visualizator experimental que agrega información
básica sobre una ciudad y lo muestra en un diseño de círculo (población,
temperatura, tiempo, altitud, latitud y longitud).
19. Tiny Fluid Grid. Generador de marco con rejilla.
viernes, 11 de mayo de 2012
¿CUALES SON LAS VENTAJAS Y DESVENTAJAS DE HTML5?
Ventajas
- Tiene una sintaxis más clara.
- Elementos semánticos más concretos.
- Nuevos elementos de formulario que facilitan la programación de los mismos.
- Hace que se dependa menos de Flash, Silverlight y ciertas librerías de JavaScript.
- Hace que el navegador dibuje y ejecute de forma más rápida la web.
Desventajas
- La especificación de HTML 5 no ha finalizado, aún pueden sucederse cambios.
- No todo funciona en todos los navegadores.
¿CUALES SON LAS CARACTERÍSTICAS PRINCIPALES DE HTML5?
¿PARA QUE SIRVE EL HTML5?
HTML5
es una colección de estándares para el diseño y desarrollo de páginas web. Esta
colección representa la manera en que se presenta la información en el
explorador de internet y la manera de interactuar con ella. HTML5 está siendo
desarrollado por Ian Hickson de Google Inc. y David Hyatt de Apple Inc. junto
con todas las personas que participan en Web Hypertext Application Technology
Working Group.
HTML5 nos permite una mayor interacción entre
nuestras páginas web y contenido media (video,
audio, entre otros) así como una
mayor facilidad a la hora de codificar nuestro diseño básico. Esta nueva
versión se basó en el diseño más común de las páginas web alrededor del mundo
para llegar a un estándar de etiquetas que realicen las mismas tareas de manera
más rápida y eficiente, he aquí algunos ejemplos:
- Un nuevo diseño para páginas web, reflejado en las etiquetas<header>, <footer>, <nav>, <section>,<article> las cuales están destinadas a remplazar la necesidad de tener una <div> para cada parte de la página, y en cambio, tener etiquetas específicas para ello.
- La nueva etiqueta <video> para insertar un reproductor de video, mejorando el reproductor antiguo utilizado por la etiqueta <embed> y evitándonos la pena de insertar el código de <object>, así como eliminar la necesidad del Flash Player para reproducir videos (lo que nos lleva a un ahorro en la cantidad de memoria utilizada).
- Una nueva tag <audio> para insertar audio en nuestro sitio web, remplazando la vieja etiqueta <embed> con las mismas cualidades de la etiqueta anterior.
- Una etiqueta <canvas> para manejo de gráficos en internet, sea para dibujar vectores o hacer animaciones.
Suscribirse a:
Entradas (Atom)