INVESTIGACION DE CSS3

CSS
1 2 3 (1996) (1998) (2012)
CSS Nivel 1 1. 2. 3. 4. 5. 6. 7. 8. 9. Implementar las clases, auge del CSS. Las hojas de estilo se combinan. Agrupacin de listas. Herencia. Clase como selector. ID como selector. Selectores contextuales. Comentarios. Las pseudo-clases y pseudo-elementos

Propiedades 1. 2. 3. 4. 5. 6. 7. Notacin para los valores de propiedad. Propiedades de fuentes. Color y propiedades de fondo. Las propiedades del texto. Propiedades de cuadro. Clasificacin de las propiedades. Trat bsicamente los estilos de texto, bordes, fuentes.

Internet Explorer 6 o versiones superiores, Firefox 3.0 o superior, Chrome 2 o superior, Safari 3.1 o superior, y Opera 9.2 o superior. Son las siguientes propiedades compatibles: Propiedades CSS con compatibilidad en todos los navegadores: 1. color 2. direction 3. font-family 4. font-size 5. font-style 6. font-weight 7. list-style-position 8. table-layout 9. text-indent 10. word-wrap

Propiedades CSS que NO tienen compatibilidad en todos los navegadores: 1. background 2. background-attachment 3. background-color 4. background-image 5. background-repeat 6. background-position 7. border 8. border-collapse 9. border-color 10. border-style 11. border-width

12. clear 13. cursor 14. display 15. float 16. font 17. font-variant 18. height 19. left 20. right 21. bottom 22. top 23. letter-spacing 24. line-height 25. list-style 26. list-style-image 27. list-style-type 28. margin 29. overflow 30. padding 31. page-break-after 32. page-break-before 33. position 34. text-align 35. text-decoration 36. text-transform 37. vertical-align

38. visibility 39. white-space 40. width 41. word-spacing 42. z-index Esto lo veo correctamente en Chrome, en FireFox pero no as en IE el cual me alineado a la izquierda.

CSS Nivel 2 Principios de diseo: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. Compatibilidad hacia adelante y atrs, Complementario a documentos estructurados. Vendor, la plataforma y la independencia de dispositivos. Mantenibilidad. La simplicidad. Rendimiento de la red. Flexibilidad. Riqueza. Enlaces alternativos de idiomas. Accesibilidad.

Propiedades 1. Utilizar imgenes de fondo para poder crear los bordes, o usar Javascript. 2. Se usa la propiedad background para definir el fondo de la imagen. 3. Se utiliza la propiedad border-radius para definir los bordes, con un color de fondo (#c3d0d4). 4. Es la segunda versin de la normativa, que ya incluy toda la parte de posicionamiento de cajas. Internet Explorer versiones 4 y 5 interpretan a la perfeccin las CSS. Desde la versin 3 el navegador de Microsoft implementa las hojas de estilo y gran parte de las recomendaciones del W3C relativas a estos instrumentos son ya caracterstica de MS.

Netscape soporta plenamente una tecnologa alternativa a las CSS, las hojas de estilo Javascript. Netscape 3 es totalmente incompatible con las especificaciones de CSS1 y CSS2, mientras la versin 4 de este navegador soporta slo en parte las hojas de estilo. Una compatibilidad casi absoluta es la que se refiere a la colocacin dinmica, mientras existen ciertas dificultades de visualizacin con las especificaciones del background y del color de fondo, atributos mrgenes y alineacin, atributos de estilo para el texto y efectos en el texto y enlaces. No soporta ni siquiera parcialmente: los controles del cursor, los efectos de transicin, los filtros en las imgenes y los efectos en los formularios. Para mayor informacin al respecto, visita la seccin especfica de HTMLpoint.

CSS Nivel 3 1. Permite muchas ms opciones de personalizacin de imgenes ya incluidas en CSS, usando la propiedad border-radius, sin necesidad de crear el efecto de dicha imagen en Photoshop, lo que facilita y nos ahorra trabajo, a la vez que la web carga mejor (ya que no existen imgenes). 2. Nada de imgenes, ms ligero. 3. Manejo de reas Rectangulares. 4. Multiplicidad de Imgenes en Fondos. 5. Existen algunas otras novedades para facilitar la maquetacin, como efectos sobre el texto (en particular sombreado y manejo del texto excedente), colores y administracin de opacidad y transparencia.

Propiedades: Bordes border-color border-image border-radius box-shadow Fondos background-origin background-clip

background-size hacer capas con mltiples imgenes de fondo Color colores HSL colores HSLA colores RGBA Opacidad Texto text-shadow text-overflow Rotura de palabras largas Web Fonts Interfaz box-sizing resize outline nav-top, nav-right, nav-bottom, nav-left Selectores Selectores por atributos Modelo de caja bsico overflow-x, overflow-y Degradados CSS3 Degradados lineales Degradados radiales Degradados lineales de repeticin Degradados radiales de repeticin

Otros media queries creacin de mltiples columnas de texto propiedades orientadas a discurso o lectura automtica de pginas web animaciones CSS3 Es casi imposible que los estilos CSS sen incompatibles con los navegadores. Todo navegador es actualizado y por obvias razones son compatibles con todos los estilos SCC. Prefixr hace compatible tu CSS con todos los navegadores

CSS1: fue la primera especificacin que desarroll el World Wide Web Consortium (W3C). Las hojas de estilo CSS1 describen el formato del texto y de los componentes de una pgina (fuente, color, tamao, etc.).

CSS2: permite ubicar elementos de XHTML en diferentes capas o layers, cuyo posicionamiento no tiene que seguir el flujo HTML (plantea el modelo de cajas donde cada bloque se define como una caja que se coloca en un lugar concreto). CSS2 incluye a CSS1 (salvo pequeos detalles).

CSS3: an est en desarrollo por el W3C y los navegadores apenas son capaces de entenderlo.

Los navegadores modernos implementan CSS1 bastante bien. En CSS2, sin embargo, existen diferencias de interpretacin segn marcas y versiones (una pgina se mostrar diferente en un navegador Internet Explorer y en un navegador Firefox). De CSS3 ya ni hablamos (por ahora no encontraremos mucho soporte para esta versin).

HTML5 es un buzz o una marca nueva en el desarrollo web, y es que si recuerdas todo lo que paso cuando salio la web 2.0 sabes mas o menos de que hablo. Pues bien, es la era de las verdaderas aplicaciones web, un cambio de paradigma total. La adopcin de HTML5 en dispositivos mviles ha hecho que este, HTML5 crezca muy rpido, con esto y el empuje que Google Chrome le a dado a esta revisin del lenguaje la WC3 Consorcio que dictamina el estndar ha avanzado a pasos agigantados. La comunidad ha hecho lo suyo haciendo Hacks para poder implementar HTML5 en exploradores que no lo soportan nativamente heroes de la web como BoilerTemplate y Modernizer. Las empresas han hecho lo suyo, Chrome ha hecho actualizaciones para su explorador casi cada ves que sale algo nuevo en el estadar, Internet Explorer 9 Es un excelente producto y cumple con el estandar bastante bien, Fire Fox Como es costumbre ha hecho lo suyo, y Safari, apoya la muerte de Flash a como de lugar. Hay mucha emocin a lado de HTML5 pero hay que decirlo, HTML5 es solo una marca esta constituida por varias tecnologias como lo son Css3, JavaScript, y bueno HTML5. entonces queda claro? HTML5 es una marca, que compone a todas estas tecnologas entre las que esta HTML5. En fin Esta ultmima revision trata de ser lo que en su tiempo intento la web 2.0, y nos va a dar la posibilidad de desarrollar aplicaciones completamente en web, Fabuloso!

Que compone HTML5?

Semantica.
La semantica es darle significado a la estructura de la pagina web, en HTML5 se aaden nuevas etiquetas que son mas descriptivas de la funcin que representan.

Almacenamiento Off Line.

Gracias a esta capacidad podrn desarrollarse aplicaciones que corran de manera local, sin necesidad de instalar Base de Datos.

Acceso a Dispositivos
Se ha iniciado con Geolocalizacion integrada, y es que es bastante facil implementarlo, pero se tienen planes de hacer grabaciones a microfonos o camaras tanto de PCs como Dispositivos Moviles.

Conectividad HTML5
Una comunicacion mas eficiente ayudara a Chats, mejor experiencia de Gaming en linea etc. Web Sockets and Server-Sent Events mejoran la transmicion de datos entre el cliente y el servidor.

Multimedia
Audio y Video Nativo en HTML5, olvidate de plug ins, ademas se usan los procesadores graficos directamente.

Animacin y efectos 3D
Entre SVG, Canvas, WebGL y CSS3 3D, tendremos animaciones y efectos nativos.

Desempeo e Integracin
Haz tus aplicaciones web mas rpidas usando varias tecnologas como Web Workers y XMLHttpRequest.

Css3
Css3 otorga un amplia gamma de estilos y efectos sin sacrificar la semantica, Cosas como bordes redondeados, dobles backgrounds, fondos degradados, animaciones y uso de fuentes hacen que CSS3 y HTML5 mejoren la web. Tutorial HTML5, Css3 Espaol Sabiendo esto www.tumaestroweb.com Comenzara un tutorial completo para que aprendas HTML5 en espaol, a continuacion las ligas al curso.

Programa HTML como un maestro Zen (Tutorial de HTML5 en espaol 1a parte) Estructura basica de una pagina web en html5 (Tutorial de HTML5 en espaol 2a parte)

Nuevas Etiquetas de HTML5 Ejemplos de una Pagina con codigo HTML5 Inputs en HTML5 Video y audio HTML5 Web Storage Geolocalizacion Css3 o Bordes Redondeados o Dobles Fondos o Fondos degradados o Sombras o Animaciones o Fuentes Usando HTML5 en exploradores viejos

Fuente: http://www.w3.org/TR/CSS1/#basic-concepts http://www.w3.org/TR/CSS2/intro.html http://www.cssblog.es/diferencia-entre-bordes-redondeados-con-css2-y-css3/ http://www.lawebera.es/maquetacion-web/tips-maquetacion-web-css-css3.php http://www.desarrolloweb.com/articulos/introduccion-css3.html http://www.desarrolloweb.com/de_interes/propiedades-css-compatibilidad-navegadores4350.html http://www.forosdelweb.com/f53/aporte-css-compatible-para-todos-navegadores-889104/ http://foros.cristalab.com/css-compatible-con-navegadores-chrome-firefox-ie-t104388/ http://es.softuses.com/172058 http://www.htmlpoint.com/guida/problemi/html_01.htm http://www.puntogeek.com/2011/08/12/prefixr-hace-compatible-tu-css-con-todos-losnavegadores/ http://mx.answers.yahoo.com/question/index?qid=20110614161301AADB5fu

http://techtastico.com/post/compatibilidad-css3-navegadores/ http://www.loretahur.net/AprendiendoCSS/versiones-de-css/ http://www.tumaestroweb.com/html5/tutorial-css3-html5-javascript-jquery-espanol/

Esta es las propiedades del css3 y su compatibilidad en los navegadores http://www.findmebyip.com/litmus/

Para test http://www.taringa.net/posts/info/8475532/HTML5-CSS3-Tabla-de-compatibilidad-denavegadores.html http://css3test.com/ http://www.maestrosdelweb.com/editorial/css-3-las-nuevas-propiedades/ http://www.desarrolloweb.com/manuales/css3.html http://www.w3schools.com/css3/default.asp http://jigsaw.w3.org/cssvalidator/validator?profile=css3&uri=http%3A%2F%2Fwww.google.hn%2Furl%3Fsa%3Dt%26rc t%3Dj%26q%3D%26esrc%3Ds%26source%3Dweb%26cd%3D5%26cad%3Drja%26ved%3D0CGA QFjAE%26url%3Dhttp%253A%252F%252Fjigsaw.w3.org%252Fcssvalidator%252Fcheck%252Freferer%252F%253Fprofile%253Dcss3%26ei%3DbssjUZP8IoK29gT ChYHwCg%26usg%3DAFQjCNERAWo0He9ImVvDLSv-bqyDTSVeg%26sig2%3DC6qzebZjE5JKfo2gbOKTMg%26bvm%3Dbv.42553238%2Cd.eWU http://www.graphicmania.net/first-drafts-of-css4-and-history-of-css/ http://www.css3.info/ http://webgenio.com/2012/08/14-increibles-efectos-de-texto-con-css3/ http://www.htmlcinco.com/selectores-css3-en-internet-explorer-6-7-y-8/#more-309