Experimentando con selectores CSS en una tabla

Los selectores CSS permiten identificar el elemento al cual se pretenden aplicar propiedades diferenciadas.

Experimentando, o jugando, con las posibilidades de los selectores CSS, he comprobado que se puede aplicar formato a cualquier parte de una tabla sin necesidad de utilizar etiquetas diferenciadas, clases o identificadores.

Es decir, que partiendo de una tabla que solo tienen etiquetas <tr> y <td>, se pueden utilizar selectores para identificar las siguientes partes de la tabla:

Selector de tabla completa: table

Selectores de Filas

• Todas las filas: tr
• La tercera fila: tr:nth-child(3)
• Primera fila: tr:nth-child(1) o también tr:first-child
• Última fila: tr:nth-last-child(1) o también tr:last-child
• Filas Pares: tr:nth-child(even) o también tr:nth-child(2n)
• Filas Impares: tr:nth-child(odd) o también tr:nth-child(2n-1)

Selectores de Columnas

• Todas las columnas:  td
• La tercera columna:  td:nth-child(3)
• Primera columna:  td:nth-child(1) o también td:first-child
• Última columna:  td:nth-last-child(1) o también td:last-child
• Columnas Pares:  td:nth-child(even) o también td:nth-child(2n)
• Columnas Impares:  td:nth-child(odd) o también td:nth-child(2n-1)

Selectores de Celdas

• Fila 4ª, celda 6ª:  tr:nth-child(4) td:nth-child(6)
• Celdas vacías:  td:empty
• Celda según su contenido:  td:contains('texto')
  No se puede utilizar directamente en CSS, ya que la especificación de la pseudoclase :contains() fue abandonada por la W3C.
  Sin embargo, sí se puede aplicar a través de JQuery. Por ejemplo, para poner en color rojo los números negativos:

      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script>$( "td:contains('-')" ).css( "color", "red" );</script>

Aquí se puede ver la demo: http://codepen.io/lmrichart/pen/MKaNwg

Aquí se puede ver la demo: MKaNwg de Luis Miguel Richart (@lmrichart) on CodePen.

Os animo a experimentar con los selectores. Descubriréis que tienen muchísimas más posibilidades de las que puede parecer.

Tecnologías web más populares

En muchas ocasiones los alumnos que se inician en el Desarrollo de aplicaciones con tecnologías web me preguntan qué tecnologias deben aprender. Quieren saber cuales son los lenguajes más utilizados, los gestores de contenidos, las librerias...
Mi recomendación es comenzar por las tecnologías más populares, aquellas que se utilizan mayoritariamente. A partir de ahí se puede profundizar o especializar en alguna tecnología minoritaria o  en la dirección que a uno más le atraiga.
Utilizando las estadísticas que proporciona w3techs.com he elaborado el siguiente informe.
Observaciones:
- Los porcentajes están referidos con respecto al total de los sitios de todo el mundo.
- Estos datos no son excluyentes. Es decir que un sitio puede estar utilizando simultaneamente dos tecnologías: por ejemplo JavaScript y Flash.

Lenguajes de cliente

Sin duda el gran ganador es JavaScript, presente en el 88% de los sitios mundiales, impulsado por su facilidad de uso y las nuevas posibilidades de las APIs de HTML5.  Muy por detrás queda Flash (12%) que aun se sigue utilizando como base para reproductores de video y banners, pero que prácticamente ha desaparecido como sistemas de navegación y de interfaz.

Lenguajes de servidor

El 82% de los sitios de todo el mundo utilizan PHP, un 12% utilizan ASP y solo un 2% utiliza JAVA.
PHP tiene las ventajas de ser un lenguaje opensource, con miles de aplicaciones desarrolladas y una extensa desimantación y soporte. A menos que la aplicación requiera explícitamente .NET, sin duda el lenguaje de servidor más utilizado es PHP.

Bases de datos

No he encontrado unas cifras fiables del uso de los diferentes tipos de bases de datos, pero sin duda la más utilizada es MySQL seguida de lejos por Microsoft SQL Server (normalmente con ASP) y marginalmente PostgreSQL.

Servidores Web

Apache sigue siendo el tipo de servidor web mas popular con un 56%. Nginx le esta comiendo el terreno alcanzando un 23%. Por último los servidores de Microsoft se utilizan en el 13% de los sitios web.

Gestores de contenidos CMS

El 24% de los sitios del mundo esta creado con Wordpress, un 3% con Joomla, un 2% con Drupal y solo un 0,5% con Prestashop. Sin duda Wordpress es hoy día la herramienta preferida para gestionar contenidos online.

Librerias de JavaScript

Para efectos avanzados la libreria de Jquery es la más utilizada, presente en un 61% de los sitios a nivel mundial. Por detras, con exito menor, estan Bootstrap en 6% de los sitios, MooTools en un 4% y Prototype en un 2%.

Desarrollo de aplicaciones con tecnologías web

Asi pues, el curso ideal de Desarrollo de aplicaciones con tecnologías web deberia constar de aquellas tecnologias más populares, es decir:
- Lenguaje de marcas:  HTML + CSS
- Lenguaje de guión: Javascript
- Lenguaje de servidor: PHP + MySQL
- Gestores de contenido: Wordpress

Estas son las tecnologias web que es imprescindible aprender.
Como herramientas extras, recomiendo continuar por Jquery y Prestashop.
A partir de ahí, el universo es infinito.

Zinc Shower

ZincShower es un meeting show para emprendedores, inversores y profesionales de las Industrias Culturales y Creativas (ICC). Un punto de encuentro (meeting) Para presentar (show) propuestas empresariales relacionadas con las ICC A potenciales inversores, promoviendo una red de colaboración y Formación entre los participantes. Todo acompañado de una programación festiva, en un contexto transformador y creativo.

La segunda edición se realizará en "El Matadero" de Madrid 23, 24 y 25 de mayo.



El plazo de presentación de proyectos esta abierto hasta el 17 de marzo. Un jurado de expertos seleccionara 100 proyectos que serán expuestos , discutidos y examinados por numerosos visitantes e inversores potenciales.

Puedes conocer todos los detalles de la convocatoria en http://zincshower.com

Presentaciones con Prezi

Durante los últimos meses he estado impartiendo varios cursos de una aplicación para crear presentaciones: PREZI.



Aunque no llega al detalle y la cantidad de herramientas disponibles en los programas de presentaciones más habituales, PREZI tiene una gran ventaja y es su estilo visual. El contenido se distribuye en un único escritorio y se accede a él mediante cambios de zoom y encuadres.



Como es mucho más fácil verlo que andar contandolo, a continuación os dejo una muestra de uno de los ejercicios realizados en clase.







PREZI es una aplicación online, con licencias gratuitas para estudiantes y usuarios básicos. Aquí os dejo una invitación gratuita para utilizar PREZI.

Actualizado Curso de AutoCAD online

En Vectoraula, hemos actualizado y ampliado (con gran esfuerzo y dedicación) el curso de AutoCAD en 2D y 3D online.

A partir del 4 de noviembre comienza el nuevo curso de AutoCAD 2014 online.

Las inscripciones se pueden realizar en : curso-autocad.com

Comentar que soy el director de dicho curso y atenderemos con mucho gusto cualquier consulta que querais realizar.

Combinaciones de fuentes

En ocasiones es necesario utilizar,  dentro de un mismo párrafo, dos fuentes tipográficas diferentes . Por ejemplo cuando en un párrafo con serif se pretende utilizar una negrita sin serif. O cuando en un párrafo sin serif se utiliza una cursiva con serif.
Así pues, he probado una serie de combinaciones para deducir cuales son las más armoniosas.
Las condiciones previas son:

• Solo utilizar fuentes comunes de los sistemas operativos. Es decir aquellas que la mayoría de los usuarios tienen en sus equipos. Así he partido de las fuentes por defecto de Windows Vista.

•  Dentro de estas, utilizar solo aquellas que están especialmente diseñadas para lectura en pantalla, ya que mi intención es utilizarlas en diseño web o en publicaciones digitales. Así me he quedado con esta lista:
  Serif: Cambria, Constantia y Georgia
  San serif: Calibri, Candara, Corbel, Lucida Sans Unicode, Segoe Ui, Tahoma, Trebuchet MS y Verdana.
  Monoespaciadas: Consolas, Lucida Console y también la Courier New, aunque no es una fuente optimizada para pantalla.

• Utilizar el mismo tamaño de fuente, estilo regular y con interlineado y espaciados por defecto. 

Puedes ver algunas pruebas realizadas comparando el interlineado. En rojo estan aquellas combinaciones que alteran el interlineado y en azul aquellas que lo mantienen.
Estas son algunas comparaciones entre la altura de la x y la altura de las ascendentes.

También he tenido en cuenta otros factores como el interlineado, el ritmo, el grosor y el contraste.
Como resultado, las fuentes que mejor combinan entre ellas son:

Como era de esperar, las combinaciones más armoniosas se producen entre las fuentes Cleartype, entre “Georgia + Trebuchet MS” y la inesperada combinación “Georgia + Consolas”.
Para realizar en los cursos queda la experimentación entre fuentes con compensación de tamaños, interlineados fijos o fuentes web.

Accesibilidad en PDF y ePub

Recientemente he estado impartiendo un curso de publicaciones digitales. Concretamente para un organismo de la administración pública que desea comercializar sus libros, revistas e informes en PDF y ePub.

Una de las partes del curso ha consistido en conocer las especificaciones de accesibilidad a las que deben adaptarse dichas publicaciones digitales.

Todas las administraciones públicas y también las empresas privadas de más de 100 empleados ó 6 Mill. de facturación, están obligadas a cumplir la normativa de accesibilidad en todos los contenidos de sus webs. Principalmente están reguladas por la norma UNE 139803:2012, que fundamentalmente viene a decir, que deben cumplirse las especificaciones WCAG 2.0-AA.

INTECO y el "Observatorio de accesibilidad" son entidades consultores que proporcionan documentación, formación y accesoria, sobre los procedimientos a seguir. Por otro lado AENOR  es la entidad certificadora del cumplimiento de dichas normas.

Los puntos clave para la accesibilidad de los PDF y ePub, son los siguientes:

• Documento independiente del dispositivo.
• Metadatos de identificación, descripción, idioma y clasificación.
• Disponer de sistemas de navegación interna.
• Orden de lectura lógico.
• Etiquetado semántico del contenido.
• Disponer de alternativas de texto para los elementos gráficos.
• Correcto funcionamiento de los hipervínculos.
• Uso adecuado del color.

Se pueden ver estos puntos con un poco más de detalle en la siguiente presentación:

Accesibilidad pdf e pub from Vectoraula