Muchas veces se me ha tachado de crítico en estos aspectos, y debo admitir que mi formación de diseñador gráfico es la misma que me hace señalar este tipo de errores, desde que estuve como estudiante en mi universidad observe muchos casos en los que las tareas implicaban muchísimos bocetos o  ilustraciones, suficientes como para no dormir una semana, entonces siempre me parecieron excesivas, y ahora que ha pasado el tiempo y tuve la oportunidad de impartir algunas materias como docente, me doy cuenta que lo siguen haciendo, como diseñadores muchos están enfrascados en pensar que un alumno aprende más entre más trabaje, muchos dirán que deben organizar sus horarios y así descansarán lo debido, pero la realidad no es esa, debemos ser sinceros muchos de los docentes son los causantes de estrés y enfermedades en los alumnos, a veces exigen más cantidad de calidad, metodología de la que difiero personalmente.

No tengo nada en contra de formar ilustradores de hecho yo aprendí mucho ilustrando en esos años en la universidad pero no estoy a favor de dejar fuera temas que son de gran importancia actualmente, como lo es el diseño enfocado a los medios actuales como la web y los dispositivos móviles.

Si hacemos memoria de todas las laminas de tempera y papeles que pintamos a mano en un mundo donde la ilustración digital es la más comercial, no veo la razón de porque en la carrera de Licenciatura en Diseño Gráfico de El Salvador deban de existir 4 ciclos en los cuales solo se trabaja en papel, y a la vez se le exige al estudiante que sea capaz de cumplir con la entrega de todas las piezas de una campaña, sin saber utilizar todas las herramientas y los recursos, se te enseña a ilustrar y se te exige diseñar material publicitario, el proceso de aprendizaje esta al revés, es erróneo y debo decir que lo cometen la mayoría de las universidades, antes les dejan este tipo de tarea y años después les enseñan las herramientas para elaborarla, por ejemplo les dejan tareas de hacer diseños de sitios web muy pocas veces, y antes no les han enseñado como hacerlas, muchos no saben ni de que tamaño o resolución trabajarlos porque tampoco el docente las conoce.
Algo típico es que curse una materia y luego quede la sensación de que hubieron cosas que no te quedaron claras, años después te das cuenta que aquellas cosas que no viste ahora las enseñan, algunos si las enseñan y a otros no, ¿quién controla lo que se imparte en las materias? porque algunos ciclos es de una manera y en otros es de otra, es la misma materia pero con cambiar de ciclo podría cambiar todo el programa de la materia, y con cambiar de universidad hasta la materia completa, y con ello las tareas cada docente las deja a su criterio, pero aun en estos días dejan tareas que nada tienen que ver muchas veces con la materia y hasta con la carrera.
Es tiempo de reformar la carrera, y cambiar las mentalidades, estamos viviendo una era digital y pareciera que aún trabajamos con piedras y cinceles, muchos dirán esta metodología a funcionado por años, pero hay que aceptar que los alumnos no están siendo preparados para las actuales plazas de trabajo, ni para lo que es en realidad el trabajo en equipo depurar materias, cambiar de ideas, dejar de usar tanto papel, y aprender a utilizar tablets, porque pintar solo en papel si en sus trabajos utilizarán tablets, material que las universidades deberían adquirir, preocuparse más por el aprendizaje de los programas actuales, pues los preparan más para impresión que para trabajos multimedia, evitar que una materia parezca lo mismo que la otra, las materias parecen repetirse haces lo mismo en una que en la siguiente, abstracciones y métodos de impresión es lo que más se repite a lo largo de las materias, y al lenguaje CSS por ejemplo solo se ve en una, Adobe Flash y action script solo se ve en una (que ya no se usa tanto), sobre estas temáticas se ve muy poco, no vamos a alcanzar la calidad adecuada pintando 100 laminas de tempera ni un circulo cromático del tamaño de un pliego de cartón ilustración, para alcanzar la educación ideal del diseñador se necesitará que quienes están a cargo de esta carrera decidan cambiar estas deficiencias, dejar a un lado las tareas excesivas y de gran cantidad de papel.

Realicé el rediseño para de Ella de Grupo Dutriz, participé en la elaboración de los PSD para tres páginas que son portada, sección y blog, la programación del sitio fue algo realizado en equipo de trabajo.

Portada

Sección

Blog

Puede ser colocado en cualquier página de nuestro template (index.php, single.php, page.php), lo importante es que hará ver diferente cada categoría.

La función es:

<div id="<?php $category = get_the_category();
echo $category[0]->category_nicename;?>">

La función está diciendo que el nombre de la categoría es el ID del div, en ese caso dependiendo de la categoría el estilo será distinto.

Por lo tanto nuestro CSS deberá asignar una ID con el mismo nombre que la categoría, claro esta que tomará el nombre slug y por lo tanto si nuestra categoría tiene dos palabras o tres como nombre las tomará sin espacio y con un guión medio en lugar de este, tampoco aceptara las mayúsculas, por ejemplo si el ID se llamara portfolio, la aplicación sería la siguiente:

<div id="<?php $category = get_the_category();
echo $category[0]->category_nicename;?>">
<li>
<h2><a href="<?php the permalink();?>" title="<?php the_title();?>"><?php the_title();?></a></h2>
<?php the_content('Leer Más');?>
</li>
</div>

Este mismo código sería interpretado por nuestro navegador de esta manera:

<div id="portfolio">
<li>
<h2><a href="titulo">titulo</a></h2>
<p>Texto</p>
</li>
</div>

Y el CSS tendría que ser escrito de esta manera para afectarlo:

#portfolio {background: #121212;}
#portfolio {list-style: none;}

Debo decir además que le hice una consulta a Source autor del blog de dinvaders, sobre como sería si en un dado caso lo que yo deseo es mostrar un contenido diferente en una categoría y no un estilo diferente, por ejemplo un sidebar diferente o mostrar la foto del autor solo en una categoría específica, y la diferencia entre la función anterior y esta es un condicionante:

<?php if (in_category('ejemplo') { ;?>
<!-- contenido que quieres que aparezca en la categoria -->
<?php } else { ;?>
<?php } ;?>

Si se desea que se muestre en varias categorías:

<?php if (in_category(array('ejemplo-1', 'ejemplo-2', 'ejemplo-3')) ) { ;?>
<!-- contenido que quieres que aparezca en las categorias -->
<?php } else { ;?>
<?php } ;?>

Lo único a suplantar es el espacio donde dice ejemplo, es prácticamente automático.

Y en el caso de mostrar un avatar pues la diferencia es solo intercambiar la función por la del avatar:

<?php if (in_category('ejemplo')) { ;?>
<?php echo get_avatar( get_the_author_meta('user_email'), 60); ?>
<?php } else { ;?>
<?php } ;?>

En caso de no funcionar in_category se intercambia por is_category.

Fuente: Diferentes estilos css por categoría

CSS Text Wrapper, encontré en la red esta herramienta que podría ser muy útil en el caso que tuviésemos que contornear un texto en html a una forma que no sea vertical, para esos casos podría ser esto una excelente opción. Dejo un ejemplo de como funciona y agrego el video del tutorial. Aún está en fase beta pero es una idea que va por buen camino.

]]> http://jc-designer.com/2010/07/contornear-parrafos-en-formas-con-css/feed/ 1 http://jc-designer.com/2010/07/border-radius-bordes-redondeados-con-css/ http://jc-designer.com/2010/07/border-radius-bordes-redondeados-con-css/#comments Mon, 05 Jul 2010 16:55:51 +0000 jcdesigner http://jc-designer.com/?p=778 Los bordes redondeados en css son otra labor que anteriormente realizabamos con photoshop, pero ahora con esta nueva propiedad de css podemos realizarlo con unas líneas de código, y al igual que con otras variantes del css la ventaja sera el editarlo, pues antes se debía regresar a photoshop y guarnar nuevamente el trozo de imágen que utilizamos, ahora esto ya no es más así, explicaré de forma breve como es que se utiliza.

Border-radius

Si hay algo que nos ahorrará esta propiedad es tiempo, el mantenimiento y edición de un sitio que utiliza esquinas redondeadas con el css3 se ha vuelto mucho mas facil, gracias a la w3c contamos ahora con esta nueva opción, el codigo podemos escribirlo de la siguiente forma: para mozilla firefox -moz-border-radius, para safari y google chrome -webkit-border-radius, ejemplo el siguiente div:

Utiliza las siguientes líneas de código:

estilo. {
padding: 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 10px 10px 10px 10px;
background-color: #FFFF99;
border: 1px solid #FFCC00;
}

De la mimsa manera podemos hacer diferentes variantes entre cada una de las cuadro esquinas:

estilo{
-moz-border-radius-topleft:  10px;
-webkit-border-top-left-radius:10px;
border: 1px solid #000;
padding: 5px 5px 5px 15px;
}

estilo{
border: 1px solid #000;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-right:10px;
padding: 5px 5px 5px 15px;
}

border: 1px solid #000;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
padding: 5px 5px 5px 15px;

estilo{
border: 1px solid #000;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
padding: 5px 5px 5px 15px;
}

estilo{
border: 1px solid #000;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
padding: 5px 5px 5px 15px;
}

estilo{
border: 1px solid #000
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
padding: 5px 5px 5px 15px;
}

Parte de las innovaciones que trae  CSS3 son los efectos de sombra, esto nos ahorrará mucho trabajo del que se hacía con photoshop al tener que estar cortando imágenes con el efecto de sombra ya aplicado, de ahora en adelante solo bastará con escribir unas lineas de css y ya podremos hacer el mismo efecto, pero al igual que muchas cosas nuevas que aparecen este solo es compatible con los últimos navegadores.

Las dos variantes de drop shadow son una dedicada a texto que es text-shadow, y para los divs y párrafos utilizaremos box-shadow, ambos con uso similar pero con sus diferencias.

Text-shadow

Esta propiedad de css3 es utilizada del la siguiente manera:

.texto-sombra{
font:bold 24px Arial, Helvetica, sans-serif;
color:#FF9900;
text-shadow: 2px 2px 2px #000;
}

Resultado del css

La propiedad text-shadow como su nombre lo dice solamente afecta al texto, no puede afectar a cajas o divs, los dos primeros atributos son para el deplazamiento vertical y horizontal, el tercero es el radio del desenfoque y el último el color de la sombra.

Ejemplo con texto seleccionable:

Text shadow

El siguiente es box-shadow que afecta a las cajas sea párrafos y divs:

Box-shadow

La utilizamos de la siguiente forma:

font:bold 36px Arial, Helvetica, sans-serif;
color:#fff;
background:#FF9900;
padding:20px;
width:250px;
-moz-box-shadow: 3px  3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;

Aplicandolo en directamente en el html editable el resultado sería el siguiente:

box shadow

La utilización al igual que en el en anterior, las dos variantes del principio son para desplazamiento vertical y horizontal, el tercero es para el radio de la sombra y el último es para el color de la sombra. La propiedad -moz es para Firefox, -webkit es para Safari y Chrome, y la final es para los navegadores que ya admiten la propiedad.

Este ejemplo también puede mezclarse con la otra propiedad nueva que es border-radius:

box shadow