Entradas etiquetadas ‘CSS’
Oracle Forms Look and Feel Project
Un proyecto muy interesante que nos permite modernizar visualmente nuestras aplicaciones Forms mediante hojas de estilo CSS externas.
El proyecto o librería esta basado en PL/SQL, Java Beans, PJCs y CSS.
Web:Oracle_Forms_Look_and_Feel_project
Drag & Drop html divs
Interesante post de Antonio Lupetti donde nos muestra como hacer mediante mootools , el efecto de coger y arrastrar “Drag & Drop” cajas “divs ” html, tipo Netvibes o igoogle.
Enlace: http://woork.blogspot.com
Skins en ADF. Todo lo que quisiste saber
La manera de personalizar nuestras aplicaciones en ADF es mediante el uso de Skins.
Para poder crear nuestro propio Skin primero deberemos registrarlo en la aplicación, register skin
Los skins hacen uso de “Selectores” para poder sobrescribir los estilos de los componentes de ADF Faces.
Aquí podéis encontrar la lista completa de selectores ADF: skin-selectors
Por otro lado existen algunos componentes que tienes trozos de textos que se pueden configurar mediante el uso de una resource bundle propio.
Gracias a esta técnica podemos cambiar textos como el famoso “Seleccionar” de las tablas en ADF sin hacer uso de Javascript.
Más información:
- Crear un Skin propio: create skins
- Selectores ADF Faces:skin-selectors
- Palabras clave usadas por los componentes de ADF Faces, Resource bundle Skin: resourcekeys
Reseteo de etiquetas CSS
Los que desarrollamos aplicaciones web, siempre tenemos que tener en cuenta el tema de los navegadores. Nuestra aplicación debe verse igual, o por lo menos sin cambios muy bruscos en todos ellos.
Para conseguir esto, una de las técnicas se basa en resetear ciertas etiquetas antes de definirlas en nuestro css.
El grupo de desarrolladores de yahoo nos proporciona una de estas hojas de estilo de reset: yui-reset
Utilidades II
Safari:Apple ha liberdo su navegador para Windows. La verdad es que es una delicia. Sobretodo teniendo en cuenta la cantidad de recursos que consume Firefox, en mi opinión cada vez esta peor.
Atención al menú de Desarrollo que viene incluido en safari,toda una alternativa al magnifico Firebug.
Multiple IE : Poder tener varias versiónes de Internet Explorer en una sola maquina.
ForWebDesigners: mas de 400 recursos webs para desarrolladores, organizados por categorías.
Utilidades I
Empezamos el año con un pequeño surtido de utilidades:
Notepad++: una buena alternativa al producto comercial Ultraedit.
Editor muy completo y funcional, con un arranque muy rápido, quizá es lo que le falta a Jedit. Se distribuye bajo licencia GPL.
DebugBar: el Firebug para I.E, editor on-line para poder debugar el html,css, javascript,etc…
BrowserShots:Esta web nos ofrece la posibilidad de ver una captura de una web determinada en todos los navegadores y sistemas operativos. Una verdadera delicia para los diseñadores exigentes.
Espero que les sean de utilidad
LibrosWeb
In This site you will find books of Symfony,Ajax,XHTML,JavaScript y CSS.
Hace ya bastante tiempo que conozco esta web, aquí estan publicados bajo licencia CC “Reconocimiento – Sin obra derivada – No comercial” unos cuantos libros que siempre pueden ir bien tenerlos a mano, a modo de consulta. La web también da la opción de descargase cualquiera de los libros en formato pdf.
Actualmente hay cinco libros: Symfony, Ajax, XHTML, JavaScript y CSS. Este ultimo es el único que consulto y en mi opinión es uno de los mejores libros que he encontrado de introducción a CSS
Bueno les dejo el enlace: LibrosWeb
Elementos multi-class
Cuando se trabaja en CSS , normalmente, se crean propiedades específicas para definir las características de un objeto. Por ejemplo el color, tamaño y tipo de letra que va a tener tu página. Muchas veces se necesita aplicar una pequeña variación a esta clase y por lo tanto la duplicamos para ajustarla a las necesidades.
Un aspecto interesante en CSS es que se pueden definir Multi-Class.
El CSS:
.roja {color : #FF0000;}
.negrita {font-weight: bold;}
.cursiva {font-style:italic;}
.grande{font-size : 24px;}
.pequeña {font-size : 9px;}
El HTML:
<p class="negrita roja">Texto negrita Rojo</p> <p class="cursiva roja">Texto cursiva Rojo</p> <p class="negrita roja grande">Texto negrita Rojo Grande</p> <p class="negrita roja pequeña">Texto negrita Rojo Pequeño</p>
Resultado:
Para ver el resultado podéis crearos un html y pegar el código anterior o visitar Optimize CSS with multi-class elements donde se puede ver un ejemplo práctico de la utilización de elementos multi-class.
