Generadores de CSS

Aquí dejo una pequeña recopilación de generadores de CSS, para tenerlos más a mano en el uso diario.

CSS3 Generator (border radius, sombra de caja, sombra de texto, rgba, font face, columnas múltiples, box resize, box sizing, outline, transición, transformación, flexbox, degradado): http://css3generator.com/

Escala de grises: http://labs.voronianski.com/css3-grayscale/

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

Border Radius: http://border-radius.com/

Formas:
https://coveloping.com/tools/css-shapes-generator
http://www.samuelrossille.com/css-shape/#1142AAy21z-17z-17z11z0

Solucionar problemas con Internet Explorer antigüo

Muchas veces tenemos problemas para visualizar correctamente nuestra página web en Explorer, o en sus versiones antiguas. Aquí tenemos unos cuantos recursos que nos ayudarán a corregir los problemas de visualización que hayamos detectado:

Si no lee etiquetas HTML5:

<!– [if lt IE 9]> <script type=»text/javascript»> document.createElement(«nav»); document.createElement(«header»); document.createElement(«main»); document.createElement(«footer»); document.createElement(«section»); document.createElement(«article»); document.createElement(«aside»); </script> <![endif]–>

CSS para Internet Explorer

Muchas veces nuestra página web se ve perfecta hasta que PAM! la abres en Explorer y te quieres morir. Para arreglar esas cosas que sólo se «desmontan» en nuestro querido IE podemos fácilmente asignar a nuestra página un css que únicamente se aplique en el caso de que el explorador sea Internet Explorer de X versión (los Explorer más nuevos cada vex se comportan mejor, pero no se puede descartar, por ejemplo, una versión 9).
Por ejemplo, yo quiero afectar a la versión 9 de IE y anteriores:

Curso de HTML y CSS (para IDEP)

Anatomía de una etiqueta

Dando por entendido que html es un lenguaje de marcado, en el que el contenido que ha de ser modificado visualmente ha de estar encerrado en una etiqueta, lo siguiente es hacer una «disección» de la etiqueta, a través de la cual podremos ver las distintas maneras que tenemos de apuntar a ella para darle formato.

Este es un texto de ejemplo en el que solamente <div id=»destacado» class=»botón destacado»>esta parte está encerrada en una etiqueta</div> y el resto no.

Inspector de elementos

Los inspectores de elementos nos permiten señalar las etiquetas que estructuran nuestro contenido directamente en la ventana del navegador, mostrándonos qué parte del css es la responsable de dar formato a dicho contenido, y modificar (añadir, quitar y modificar propiedades, o «reglas» completas) para cambiar su visualización a tiempo real (sin tener que ir al editor de código a modificar nuestro css, y luego recargar la página para ver cambios).

Firefox trae un depurador propio integrado, y puede incluir Firebug, solo con descargarlo del enlace getfirebug.com

Nociones básicas de HTML (para IDEP)

Hemos visto que el html es un lenguaje de marcado, en el cual podemos «etiquetar» nuestra información en distintos trozos, permitiéndonos luego, asignarle una apariencia a los elementos encerrados en una etiqueta.

Un ejemplo (abstracto y ficticio) seria el siguiente:

«Este es un párrafo ordinario, solo esto se ve <rojo>rojo.</rojo>El resto… se ve normal.»

En un ejemplo de este tipo, las características que conforman la apariencia del texto marcado por la etiqueta «rojo» se definiría en un documento a parte (vinculado al documento html) en el que las propiedades se enumerarían de la siguiente manera:

CSS, flotación a la derecha

Los contenedores de la web, se representan de distinta manera en función del tipo de etiqueta utilizada para estructurar contenido.

Por defecto, la mayoría de contenedores no «obedecen» las ordenes de ancho, alto y posición.

Una forma sencilla de «setear» el comportamiento de todas las etiquetas de la pagina para hacer que todas se adapten al tamaño de lo que tienen dentro o representen correctamente un ancho y un alto es hacer que «floten» unas al lado de las otras (siempre que quepan).

También podemos decirles a todas que salten de linea, los que nos ayudará a acomodar de una manera mas sencilla el contenido de la web.

Ver una web como si fuese una app

Una vez desarrollada la demo de nuestra app en Html, Muse o Dreamweaver, intentaremos simular el comportamiento de un app nativa.
Para esto, subiremos la web a un servidor (que bien puede ser dropbox) y luego haremos lo siguiente:
Ocultaremos la barra de direcciones y los botones de navegación de safari en un iphone/ipad/android.
Para hacerlo, añadiremos un javascript siguiendo las instruciones de esta página:

https://gist.github.com/nateps/1172490

Una vez incluido el javascrip, añadiremos una linea extra al html de nuestra página, para definir el icono con el que queremos que nuestra web-app se inicie.

Ver nuestra web local en un teléfono u otro dispositivo

1. Buscar la dirección IP de nuestro ordenador.
– En PC: Centro de Redes>Conexión de red inalámbrica
– En Mac: ir a Aplicaciones>Utilidades>Utilidad de Red

2. En el WordPress, ir a Ajustes > Generales > Dirección de WordPress (URL) y Dirección del sitio (URL).
Substituir “localhost” por nuestra IP (dejando el :8888). Por ejemplo:
http://localhost:8888/verdi –> http://192.168.254.189:8888/verdi

3. En qualquier dispositivo (móvil, tablet o ordenador) en el que pongamos esta dirección vamos a ver nuestra web.

Depurar webs para dispositivos móviles y tablets

Mediante emulación en el ordenador

Developer Tools para Chrome

1. Abrir Google Chrome.
2. Menú > Herramientas > Herramientas para desarrolladores
3. Asegurarnos en Settings que esté activada la opción “Show ‘Emulation’ view in console drawer.”
4. Apretar Esc para abrir la consola de DevTools.
5. Seleccionar “Emulation” y escoger el dispositivo que queramos visualizar.
6. Hacer click en “Emulate”.
7. Refrescar la página (es importante hacer esto porque aunque veamos que la medida ha cambiado hasta que no refresquemos no visualizaremos la versión móvil, si la hay).