CSS Orientado a Objetos

Siempre escuchamos o leemos sobre las "buenas practicas" o hacer tu web "reciclable", después de haber leído muchos (pero muchos) tutoriales .. se mantenia la pregunta... pero.. ¿cómo? Me refiero a que estaba en busca de un proceso mas metódico de trabajo...

Así fue como me tope con este concepto de CSS Orientado a Objetos (OOCSSS Object Oriented Css), que básicamente intenta separar los contenedores de los contenidos, y sus estructuras de la parte estética o skin. El objetivo es generar un código mas rápido, eficiente y fácil de actualizar. - Lo que me fue muy provechoso, sobre todo, para proyectos mobile -




El siguiente slideshare resume las pautas del OOCSS

Object Oriented CSS from Nicole Sullivan

Por ultimo alguno consejos para implementar esta práctica:

1. Evitar el selector descendente (ej. no usar .sidebar h3)

2. Evitar usar IDs como ganchos de estilos

3. Evitar vincular clases a elementos de la hoja de estilo (ej. no usar div. header ó h1.title)

4. Según casos muy excepcionales, evitar el uso de !important

5.  Usar CSS Lint para chekear el codigo

6. Usar CSS grids

Fuentes de Consulta:

http://oocss.org/

http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
https://github.com/stubbornella/oocss/wiki/FAQ
https://github.com/stubbornella/oocss/wiki

HTML5 Cross browser Polyfills

Desde el siguiente enlace se puede acceder a una coleccion de polyfills y fallbacks para implementar en proyectos web cross browser. empachense!

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Importantes Actualizaciones para los Registros en Nic Ar

Ante el desarrollo del nuevo sistema de registros, nic.ar  está convocando  a través de las redes sociales a sus usuarios a realizar las actualizaciones correspondientes, 

si tu Entidad Registrante tiene un nombre de fantasía o no tiene asociado un número de DNI/CUIT, podes ingresar a la siguiente url para enterarte como realizar los cambio:

http://punto.ar/novedades/actualiza-tus-datos-2.php

Tipografías para Disléxicos, Accesibilidad en la Web

Las personas con dislexia necesitan interpretar de manera distinta las tipografías para lograr la mayor legibilidad posible, por ejemplo, pueden distraerse si los párrafos son muy extensos o pueden confundir fácilmente letras o palabras si el diseño de las tipografías es geométrico.  Polulando por la web me encontré con varios entusiastas y diseñadores cuyas tipografías, justamente están pensadas para abarcar esta problemática.

Por ejemplo: OpenDyslexic es una nueva tipografía creada para incrementar la interpretación de los lectores disléxicos  y es Open Source, les dejo en enlace para que investiguen y descarguen:
http://dyslexicfonts.com/


Ademas.. algunos consejos que se pueden aplicar si tu proyecto esta pensado para personas que padezcan algún grado de dislexia:

1. Tamaño del texto: El tamaño mínimo de la fuente recomendado para disléxicos es de 12pt.
2. Escalado del texto: Es posible que en una web se quiera poner una fuente menor de 12pt, en ese caso, es necesario utilizar unidades de medida de escalado simple, tales como porcentaje o em.
3. Estilo de fuente: Usa fuentes redondeadas, más suaves para el ojo, las tipografías sans serif , que no lleva ningún tipo de terminación, es recomendada para la dislexia.
4. Mayúsculas: Evita el empleo de mayúsculas, un texto en mayúsculas puede dificultar la lectura.
5. Fondo: Un fondo oscuro puede resultar bastante más agradable para la vista que un blanco luminoso. Igualmente es preferible un fondo plano, sin patrones.
6. Espaciado: Es importante conservar un buen espacio entre párrafos.
7. Justificación: Hay que evitar justificar a la derecha pues entonces se tiende a crear espacios entre las palabras.
8. Evitar las cursivas.
9. Párrafos cortos.
10. Usar listas para remarcar puntos.
11. Estilo de escritura: Usa palabras cortas donde sea posible y escribe de manera sencilla.
12. Navegación: Asegúrate de que la navegación de la web sea simple y uniforme en todo el site.
13. Texto con movimiento: Gifts, flash y demás son un problema para los disléxicos.
14. Columnas: Cuanto mayor es el tamaño de las columnas, mayor la dificultad para los disléxicos.
15. Imágenes: Utiliza imágenes que faciliten la comprensión.
16. Estructura del documento: Cuanto más estructurado un documento más comprensible.
17. Abreviaciones: Siempre hay que expandir la primera aparición de cualquier abreviación en una página. Utilizar para mayor comprensión las etiquetas.

fuentes de consulta:

http://donserifa.com/tipografia/la-tipografia-dyslexie-ha-sido-creada/

http://www.utwente.nl/en/

http://dyslexicfonts.com/

http://redespecialuruguaya.blogspot.com.ar/2010/05/accesibidad-web-para-personas.html

Page Speed, Analiza el tiempo de carga de tu sitio Web

Acabo de descubrir esta herramienta de Google Developers, que además te brinda las sugerencias necesarias para optimizar tu sitio, no sólo para desktop sino también para mobile.

Es muy sencillo de usar, ingresas la URL de tu sitio, y te devuelve el resumen del reporte, indicando todo el detalle con la ruta de los archivos, acciones y porcentajes correspondientes de optimización.

https://developers.google.com/speed/pagespeed/insights

más de 30 Herramientas CSS, aplicaciones web Online

Seteos Generales

CSS3 Generator
http://css3generator.com/

Colorzilla
http://www.colorzilla.com/gradient-editor/

CSS3 Maker
http://www.css3maker.com/

CSS-Generator.com
http://www.css-generator.com/create.php

CSS3, please
http://css3please.com/

Drawter
http://drawter.com/

CSSMate
http://cssmate.com/csseditor.html

Online CSS Editor
http://www.cssportal.com/online-css-editor/

YAML Builder
http://builder.yaml.de/

Little Boxes
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

CSS3 Generator
http://www.css3.me/

Layouts

CSS Layout Generator
http://csslayoutgenerator.com/

CSS frame Generator
http://lab.xms.pl/css-generator/

Online Css Template Generator
http://www.guidefordesign.com/css_generator.php

Tableless Code Generator for column layout
http://www.maketemplate.com/csstemplate/

CSS Layout Generator
https://www.pageblox.com/generate

CSS Layout Generator
http://www.cssportal.com/layout-generator/


Layouts Flexibles

CSS Flexbox Please!
http://demo.agektmr.com/flexbox/


Menus

CSS Menu Make
http://cssmenumaker.com

CSS Menu Builder
http://www.cssmenubuilder.com/home


Textos

CSS Type Set
http://csstypeset.com/

Formularios


Form Style Generator
http://www.formstylegenerator.com/

Optimizar Codigo

CSS3 compressor
http://www.csscompressor.com/

Clean CSS

http://www.cleancss.com/

Sprites

CSS Sprite Generator
http://csssprites.com/

Sprite Creator
http://www.floweringmind.com/sprite-creator/

CSS Sprite Generator
http://spritegen.website-performance.org/

CSS Sprites Generator
http://css-sprit.es/

SpriteMe

http://spriteme.org/

Transformaciones

http://matthewlein.com/ceaser/


Otros

CSS3 Warp
http://csswarp.eleqtriq.com/

CSS Icons
http://nicolasgallagher.com/pure-css-gui-icons/demo/#non

y de yapa.. especificaciones oficiales : http://www.w3.org/TR/CSS/

Proteger peliculas Flash para que funcionen solamente en tu web

tanto tiempo sin postear... ^^

en fin.. hoy encontre esta data q me parece sumamente útil.. ahí va:

Si no quieres que una pelicula de Flash tuya pueda reproducirse fuera de tu web, tenemos un truco para prohibir la reproducción de un SWF fuera de tu sitio.

Primero elige la dirección URL dónde va a estar colgado tu SWF. Hecho esto, escribe en las acciones del 1er frame de tu SWF lo que viene a continuación:

Código :

var url = "http://tuweb/tuflash.swf";
if(_url != url){
_root.onEnterFrame = function(){
unloadMovie(this)
}
}

De este modo, si el SWF no es abierto desde tu web (Por ejemplo si lo bajan al PC y lo ejecutan desde ahi o si algun otro sitio lo linkea como propio), entonces la pelicula se descargará de memoria y no funcionará.

También puedes poner:

Código :

if(_url != "http://tuweb/tuflash.swf"){
    _root.onEnterFrame = function(){
        loadMovie("http://tuweb/flash_alternativo.swf")

    }
}

Y se cargará la película que tu quieras.

Puedes poner una película con un mensaje parecido a:
"Ésta animación solo se puede ver desde la web. Entra en http://www.lawebdelswf.com"

Aquí el ejemplo:
http://nestorrente.iespana.es/foroCLAB/protegida.swf

Si guardáis la animación en vuestro ordenador, comprobaréis que aparecerá esto:
http://nestorrente.iespana.es/foroCLAB/protector.swf
Y se descargará la otra.

Es la forma más sencilla que conozco para proteger películas flash


fuente: http://www.cristalab.com/tutoriales/proteger-swf-de-flash-para-que-funcionen-solo-en-tu-web-c28047l/

Medidas Standar de Banners Web

Viene medio pobre este post.. jajaja, pero encontré esto y siempre viene bien tenerlo a mano.

Banner en Flash Transparente sobre contenido HTML

Todos sabemos y vemos en dintintas paginas esos banners en flash animados molestos en medio de la ventana, a los que les das cerrar y desaparecen.. bueno.. la cuestión es que necesitaba uno de esos..

.. he aqui cómo:



1. Tenemos el diseño de nuestro Banner (SIN FONDO), y creamos nuestro boton [x cerrar]

seleccionas el BOTON presionas f9 para que se abra el panel de acciones y le adjudicamos la siguiente accion:



LO QUE HACE ESTA FUNCION ES LLAMAR A UN JAVA Y OCULTAR EL banner



2. ESTA ES LA FUNCION JAVA PARA OCULTAR EL DIV: esto lo colocas en el html entre head





3. EN EL CODIGO HTML dentro del body va:





4. listo eso es todo tienes un animacion flash transparante sobre el html y con un boton que va a cerrar la animacion.


(no puedo encontrar el enlace de dónde saqué esto.. dentro del foro de cristalab,créditos a ellos!!)

DESCARGAR EJEMPLO .RAR (HTML+SWF+FLA) Haciendo Click Aquí





................................................................................