css | SitioAparte

tutoriales html5 y css3

con la llegada de los nuevos estándares html5 y css3, todas aquellas personas que nos dedicamos a este cuento del diseño web, nos hemos tenido que poner al día con estos estándares y todas las nuevas opciones que traen, como las sombras de elementos, esquinas redondeadas, fuentes propias, eso hablando de css3 y los nuevos elementos que trae html5 como header, footer, section, nav, etc…

si bien no es difícil aprender a usar estos nuevos estándares, porque la verdad solo trae funcionalidades que nos facilitan mucho la vida, lo mas complicado es aprender a diferenciarlos y saberlos implementar por eso hoy voy a colocar algunos de los tutoriales que se encuentran en la web.

HTML 5 Tutorial

continuar »

0 29 Jul css, diseño, tutoriales, web twit face

Útiles paginas web para diseñadores

Aquí dejo una lista de enlaces que pueden ser útiles para quien trabaja con diseño.

- Trucos para pasar de un archivo PSD a HTML: line25.com
- Cómo pasar de un boceto a un tema en Wordpress: spoongraphics.co.uk
- Tutoriales de CSS3 y técnicas de creación de botones: speckyboy.com
- Excelentes diseños web oscuros: webdesignledger.com
- Cientos de trucos para quien trabaja con CSS: css-tricks.com
- 17 extensiones de Google Chrome para webdesigners: designm.ag

Espero que los aprovechen.

0 19 Feb css, diseño, inspiracion, tutoriales, web, wordpress twit face

Rediseño (otra vez)

Hola a todos, no he tenido mucho tiempo para escribir , irónicamente ahora que no estoy trabajando parece que ya no tengo tiempo para nada, pero estoy en el proceso de crear una empresa que se llama irrelevantSoft y eso me tiene bastante ocupado.

Bueno ahora si vamos a comenzar esto, la vez pasada les había dicho que iba a inventar el nuevo diseño a medida que lo fuera realizando, pero hoy por casualidad termine en el sitio de Woo Themes y encontré creado por Tim van Damme; y recorde al go que vi en CSS Tricks donde dice que una buena manera de mejorar en este cuento del diseño web es buscar un sitio web que nos guste y tratar de copiar el diseño lo mas parecido posible, y eso es lo que voy a hacer.
continuar »

2 10 Oct css, diseño, tutoriales twit face

Rediseño – parte 1

Como les habia comentado, voy a cambiar el diseño del sitio, e intentarcrear un tutorial basico sobre como hacerlo, espero que les guste. Bueno normalmente deberia empezar a crear una imagen en algun programa como Photoshop o Fireworks para tener una idea de como se vera el diseño una vez terminado y para tener una guia de que es lo que se quiere hacer; en este caso no lo voy a hacer. Voy a ir contruyendo el sitio poco a poco y despues ver que tal queda. Para empezar, y ya que uso Wordpress , creamos dentro una carpeta con el nombre del tema ( para el caso la llame SitioAparte), dentro de la carpeta wp-content/themes. estructura-carpetas Dentro de la carpeta dle tema se crean el archivo index.php y style.css ( son los archivos necesarios para que Wordpress reconozca el tema), ademas de las carpetas para las imagenes y los archivos java que se vayan a utilizar. Abrimos el archivo index.php con cualquier editor de texto o el de su preferencia y comenzamos con las primera lineas y las mas importarntes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es" lang="es-es" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="palabras, clave" />
<meta content="descripcion" name="description"/>
<meta content="titulo" name="DC.Title"/>
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?>
» Blog Archive <?php } ?> <?php wp_title(); ?></title>
<link rel="alternate" type="application/rss+xml"
title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback"
href="<?php bloginfo('pingback_url'); ?>" />
<link rel="stylesheet"
href="<?php bloginfo('stylesheet_directory'); ?>/style.css" type="text/css" />
<link rel="shortcut icon"
href="<?php bloginfo('stylesheet_directory'); ?>/imagenes/favicon.gif" />
<meta http-equiv="Content-Language" content="es" />
</head>
<body>
</body>
</html>

0 9 Ago css, diseño twit face

Tutoriales sobre Diseño Web

Esta vez quiero mostrarles algunos de los mejores tutoriales (a mi parecer) sobre diseño web; estos incluyen manejo de aplicaciones, ilustraciones, CSS entre otras cosas.

Tutoriales de Adobe Fireworks por Smashing Magazine

Varios tutoriales y descargas para Fireworks.

continuar »

1 10 May css, diseño, tutoriales, web twit face

css naked day

Leyendo anieto2k me entero que el CSS Naked Day se llevara a cabo el 9 de abril, para aquellos que no sepan que es esto aca les va una pequeña explicacion.

El CSS Naked Day es el dia en que todas los sitios web (los que quieran) desactivan toda las hojas de estilo dejando lo mas importante, el contenido.

Para participar solo necesitan usar esta funcion en php


<?php
function is_naked_day($d) {
  $start = date('U', mktime(-12, 0, 0, 04, $d, date('Y')));
  $end = date('U', mktime(36, 0, 0, 04, $d, date('Y')));
  $z = date('Z') * -1;
  $now = time() + $z;
  if ( $now >= $start && $now <= $end ) {
    return true;
  }
  return false;
}
?>

y se usa insertando esta funcion entre las etiquetas HEAD


<?php
if ( is_naked_day(9) ) {
  echo '';
} else {
  echo '<link rel="stylesheet" type="text/css" href="styles.css" />';
}
?>

Y si no quieren modificar sus temas de wordpress pueden usar este plugin creado por Aja's

0 2 Mar css twit face

rediseño SitioAparte parte 1

Voy a comenzar el rediseño de SitioAparte y me gustaria colocar todo el proceso de el nuevo diseño a manera de tutorial, guia o como lo quieran llamar, tambien me gustaria que si alguien sabe alguna mejor manera de hacerlo o algun consejo o aclaracion o algun tipo de ayuda sera bienvenida.

continuar »