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.

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

Para ampliar la imagen haga clic sobre ella

Hace tiempo que uso el sitio de wordle.net para crear excelentes nubes de tags, se me ocurrió colocar el feed rss de mi blog y este fue el resultado, al parecer las palabras que mas escribo son tutorial y css, asi como también grafico, imágen exploración cosnsultar, website, y muchas que estan realcionadas con lo que trabajo, y por otra parte también están las que mas escribo sin darme cuenta, como puden, realicé, viajes, no lo habría notado de ninguana forma antes.

Hace días publique este mismo website en imágen y swf, ahora realicé la versión HTML y CSS, combiné 2 tutoriales de js para hacer efectos similares a los del flash pero usando html, para verlo haga clic en la imágen.

Versión HMTL

Los JS utilizados:

Para la creación del menú utilicé un tutorial del sitio de Net tuts que realiza ese efecto de menu a apartir de unos js y un poco de css, pueden consultar el tutorial y ver como funciona.

El efecto de las fotos es un slide JS creado con el tutorial de CSS Global pueden consultar el tutorial ambos sitios son buenisimos referentes de CSS y trucos diferentes.

Versión anterior

La versión anterior que publiqué estaba hecha en flash y puede verla haciendo clic aquí.

Cuando estudié diseño gráfico, se me formó para trabajar específicamente en papel, se me enseño a trabajar a 300 dpi para que las imágenes no quedaran “pixeleadas”, pero cuando trabaje por primera vez en Web y me dijeron que una foto debía pesar 10 ó 15 kb, fue como si me hubiesen puesto el mundo al revés, estando acostumbrado a crear documentos PSD de unos 30 a 50 megas, el sólo pensar que debían pesar kb fue una frustración y creo que la mayoría de los diseñadores llega a experimentarlo.

Hay una diferencia alta en diseñar para Web a diseñar en papel, aunque los fundamentos se mantienen, la diferencias de formatos resolución son sólo una parte, muchos comienzan y se preguntan porque en Web no se ve tan bien lo que si se ve bien en papel, la razones son varias, pero lo que más provoca este efecto de “shock”, en que caemos cuando comenzamos a ser diseñadores Web, es el hecho de que no se nos educó para ser diseñadores de este tipo, de hecho si recuerdo el pénsum de mi universidad había hasta una materia llamada “técnicas de impresión”, y otras llamadas “taller de proceso gráfico” y “taller de proyecto gráfico”, muy parecidas las 3 y aunque todas evocaran a proyectos de diseño, en ninguna se incluyó el diseño Web como tal, lo más cercano a la multimedia que elaboramos fue una presentación flash o algo por el estilo.

Comparativa diseñador anterior con el diseñador actual

La educación que se recibe actualmente en la universidad respecto a la Web es mínima, a tal grado que al salir la mayoría teme aplicar en plazas de diseño Web, o simplemente no tiene el conocimiento para optar por ella.  Recuerdo que cuando comencé a buscar trabajo aún estaba cursando materias de la universidad, pensaba en optar por una plaza que fuese tuviese que ver con editorial o ilustración, y odiaba lo que tuviese que ver con la Web, debido a mi desconocimiento acerca del desarrollo Web, pero al buscar trabajo gracias al conocimiento de flash que adquirí de uno de los mas grandes maestros del Web (google), pude tomar una plaza en la que me dieron la oportunidad de aprender, aprendí trabajando y me di cuenta que todo esto podría ser aprendido estudiando en la universidad, pero lamentablemente los pénsum aun no están a la vanguardia.

Ninguna universidad del país esta formando en realidad para Web a los diseñadores, el medio crece a pasos agigantados y la mayoría a un sigue aprendiendo todos los métodos de impresión (que no es que esté mal), haciendo a un lado esta área del diseño, los docentes de las universidades deberían actualizar sus planes en sus materias, e incluir este tipo de proyectos, pero es difícil que un catedrático califique algo que desconoce, cobre todo cuando el ser crítico nos caracteriza.

Si éres docente actualmente de esta carrera de diseño gráfico (pero eres diseñador gráfico) podrías hacerte las siguientes preguntas:

La educación que se recibe actualmente en la universidad respecto a la Web es mínima

• ¿Posees conocimiento de las actuales tecnologías de Web 2.0?
• ¿Sabes qué es el SEO?
• ¿Sabes quién creo el Internet?
• ¿Conoces los estándares de la Web?
• ¿Conoces los diferentes navegadores? (o sólo usas el súper anticuado Explorer 6)
• ¿Tienes conocimiento de XHTML y CSS? (Básico)
• ¿Sabes que es JavaScript  y AJAX?
• ¿Tienes conocimiento de herramientas para el desarrollo: Dreamweaver, Flash, Editores de código WYSIWYG, Frameworks (Blueprint) etc.?
• ¿Has diseñado plantillas CMS?

En mi experiencia como diseñador Web, y docente ocasional, me he dado cuenta que la mayoría de los diseñadores desconoce estas herramientas y recursos, es hora de que el docente se levante de su lugar y actualice sus conocimientos, y lo digo como colega que soy de cada uno, de no tomar esta crítica a la actual formación de los docentes como algo que les señala, si no que sirva para comiencen a tomarse más enserio su papel como formadores, pues su labor actual de la enseñanza de los fundamentos del diseño no está de más pero necesita actualizarse, y en mi caso estoy tratando de incluir lo más posible todo esto en las materias que imparto ocasionalmente en las universidades, pero no puedo explicarles todo en una sola materia que es lo que hasta hoy se toma como diseño Web en las universidades del país.

Recomiendo que lean un poco acerca de lo que hablan en el blog de Luís Alarcón acerca del diseñador web, pues al igual que yo el tuvo que aprender trabajando todo este conocimiento, y también recomiendo un post escrito en CSS TRICKS sobre una comparación de diseñar para Web y diseñar para papel.

No desmerito a los docentes de los que recibí mi formación de diseñador, sino al contrario agradezco que compartieran conmigo su conocimiento, pues esas bases son las que actualmente utilizo para diseñar en la Web, y les mando un saludo deseando que cada uno de ellos recuerde que siempre debemos estar actualizados.

Antes que nada agradecer a PSD Themes por su plantilla gratuita que hemos tomado en esta ocasión con fines educativos, bien este tutorial trata sobre la realización de una plantilla creada en  dream weaver, lo que necesita para realizar este pequeño ejercicio de clase es descargar la plantilla de psd themes desde este link, para lo cual antes deberan estar registrados en el blog.

Lo siguiente que debera hacer es seguir los pasos que le son dados en el primer playlist.

El template está formado por 4 páginas, pero solo realizaremos 2 para cortar la dificultad del ejercicio.

Primera Parte

Segunda Parte

Este ejercicio fue realizado como proyecto de clase para la Universidad José Matías Delgado, para la carrera de Licenciatura en Diseño Gráfico

El primero permite crear una hoja de registro sin tener que ir al Dashboard, crea una hoja de registro y de login en su template, el plugin es Theme My Login este plugin permite crear una página de registro, en la que los usuarios de su sitio podrán registrarse o iniciar sesión.

Descarga del plugin.

Descarga desde wordpress.org

El segundo plugin es una aplicación bastante sencilla para colocar un widget de registro en el sidebar, y su nombre es tal cual su función  Sidebar Login

Descarga del plugin

Descarga desde wordpress.org

Una vez instalado puedes insertarlo como widget o escribir el siguiente codigo donde desees mostrarlo.

<?php sidebarlogin(); ?>

Nota: Antes de visualizar estos plugins hay que recordar activar en los settings en Membership a Anyone can register, de lo contrario el link de registro no parecerá.