Archivos de categoría: Diseño Web

Crear una vCard con Sass y Compass

Diseño Web

Teniendo que crear un diseño de una web para mi hermana me he puesto a buscar ideas por la web (un gran defecto que tengo porque miro y miro y miro y al final pierdo un huevo de tiempo en hacerlo lo mejor posible pero bueno)

La verdad que al final los favores dan más problemas que otra cosa que a mi me gusta la programación jaja pero bueno nunca viene mal aprender cosas nuevas así que me he propuesto aprender un poco de estos lenguajes raros para hacer css :D

Aquí aprovecharé para mostrar un tutorial que he encontrado por ahí de como crear una vCard para nuestra página web que he visto por el blog de hongkiat

Para no perder tiempo escribiendo (más bien copiando cosas de otros sitios) sobre sass y compass os dejaré un par de enlaces de referencia:

Presentación de Sass y Compass

Curso de Sass y Compass

Sass para aplicar en proyectos CSS y HTML5

Sass

Compass

 

Yo creo con los tres primeros enlaces queda más que comprendido lo que es esto de Sass y Compass. Los otros dos son enlaces de sus páginas en inglés.

 

Como bien pone en el artículo original la planificación en todo proyecto (no solo en sass) es primordial (algo que por cierto yo no suelo hacer y luego la acabo liando a ver cuando aprendo …)

Lo que primero debemos hacer es un wireframe de lo que queremos, en este caso será algo así:

vCard Wireframe

 

 

En este enlace podéis ver 10 herramientas gratuitas para realizar wireframes online.

Leer más »

Compatibilidad de navegadores para CSS3, HTML5

CSS3, Diseño Web, HTML5

Nuevas características de HTML5 y CSS3 entre otras, van apareciendo con el inconveniente de que no funcionan en todos los navegadores.

Una web donde podemos encontrar tablas con las distintas compatibilidades por navegadores es Can I Use  tanto en versiones antiguas como en versiones futuras.

Los navegadores que compara son:

  • IE (Sí, acepta al internet explorer como navegador)
  • Firefox
  • Chrome
  • Safari
  • Opera
  • iOS
  • Safari
  •  Opera Mini
  • Opera Mobile
  • Android Browser

Una buena web de consulta para nuestros desarrollos web.

Cómo usar shortcodes en WordPress para crear cajas de texto

Diseño Web, Wordpress

Buscando una cosilla sobre los shortcodes llegue a un artículo muy interesante de elwebmaster para crear cajas de texto. Lo pego tal cual:

Si utilizamos WordPress para desarrollar nuestro sitio web, los shortcodes pueden resultarnos muy útiles. En esta nota veremosqué son, cómo sacarles provecho y en tan sólo unos pocos pasos, los utilizaremos paracrear unas atractivas cajas de texto.

Fuente original del artículoOur Tuts
Traducción realizada por
 elWebmaster.com

¿Pero qué es un shortcode? Como el nombre lo indica, un shortcode es una manera simple y elegante de mostrar complicados códigos utilizando sólo una palabra. Por ejemplo, imagina que quieres insertar un info-box dentro de un post. Tendrías que crear div-classes tras div-classes para finalmente lograrlo. Pero un shortcode te da la posibilidad de hacerlo, sólo añadiendo, por ejemplo:

Leer más »

Tema personalizado para SyntaxHighlighter Evolved

Diseño Web, Wordpress

El plugin que uso para insertar código en el blog, actualmente, es el SyntaxHighlighter Evolved y tiene varios temas predefinidos pero si no nos gusta ninguno podemos crear nuestro propio tema como podemos ver en la web del autor.

Para ello es tan simple como crear en nuestro archivo functions.php de nuestro tema el siguiente código

[php]
wp_register_style(
‘syntaxhighlighter-theme-nombredenuestrotema’,
‘rutadelarchivo.css’,
array( ‘syntaxhighlighter-core’ ),
‘1.2.3’
);
add_filter( ‘syntaxhighlighter_themes’, ‘nombredelafuncionquequeramos’ );

function nombredelafuncionquequeramos( $themes ) {
$themes[‘nombredenuestrotema’] = ‘El nombre de nuestro tema';

return $themes;
}
[/php]

En mi caso he copiado el css del tema por defecto del plugin y lo copiado en la raiz de mi directorio de mi tema de wordpress y lo renombre a shThemeMemorias.css y el código me quedó así:

[php]
wp_register_style(
‘syntaxhighlighter-theme-memorias’,
get_template_directory_uri().’/shThemeMemorias.css’,
array( ‘syntaxhighlighter-core’ ),
‘1.2.3’
);
add_filter( ‘syntaxhighlighter_themes’, ‘addThemeSyntaxhighlighter’ );

function addThemeSyntaxhighlighter( $themes ) {
$themes[‘memorias’] = ‘Memorias';

return $themes;
}
[/php]

Y wuala! ya puedo quitar el borde verde de los numeros xDD del tema por defecto sin riesgo de que al actualizar el plugin en un futuro (que habrá que hacerlo que parece que no funciona con la version 3.3 de wordpress) sobrescribamos nuestras modificaciones.

Ocultar/Mostrar capa con jQuery en wordpress

Diseño Web, Wordpress

A medida que iba escribiendo la serie de la API de betfair me estaba dando cuenta que la capa que mostraba las partes de la serie del plugin de Organize Series se iba a largando demasiado. Lo mejor sería el poder mostrar solo x partes más otro enlace al listado total pero por no tocar código. Decidí crear simplemente una capa que se expandiera al pulsar un botón.

El primer paso sería cargar la librería jquery (tanto para una web normal como una hecha con wordpress)

[html]<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>[/html]

teniendo en cuento la versión del jquery y si es con wordpress podríamos leer esta web donde nos hablan de 5 trucos para usar jQuery con WordPress

Leer más »

Usar fuentes embebidas en nuestras webs

Diseño Web

Para darle un toque más de libreta al blog he pensado en ciertas zonas usar un tipo de letra manuscrita como ya había echo en alguna otra web… anteriormente usaba un plugin llamado TTF Titles que convertía texto en una imagen png pero era usar imagenes inecesarias, otra solución que se me ocurrió fue usar fuentes de google con el plugin WP Google Fonts (que comentaré al final del artículo) pero se puede fácilmente por css con @font-face.

Solo tenemos que tener la fuente ttf  (para internet explorer haría falta exportar la fuente a este formato que se puede hacer desde tt2eot por ejemplo) en nuestra web. Bueno todo depende de lo que se use… en mi caso al estar usando wordpress pues en el directorio fuentes de nuestro tema y añadir al fichero de estilos:

Leer más »