Body Line
Color
Influence
Pin Up | GGA
Angels & Demons
Nicolás Flores
Diseñador Multimedial
- Diseño de sitios web
- Webs autogestionables
- Optimización y rediseño
Playroad
Diseño y maquetacion por Estudio 46.
Finalización del sistema de administración para el catálogo del sitio, que permite altas, bajas y modificaciones de productos y upload de fotos. Desarrollo del carrito de compras.
- PHP/MySQL | jQuery
- Dineromail
OD Real Estate
Diseño y maquetacion por Estudio 46.
Desarrollo de un sistema de administración para el catálogo del sitio, que permite altas, bajas y modificaciones de propiedades y noticias, upload de fotos, y un sistema de propiedades destacadas.
- PHP/MySQL | jQuery
- CMS propio
- Montado en Smarty
Bien Cortado
Se rediseño el logo y se desarrollo el sitio web desde cero.
- PHP | jQuery
- Maquetacion y SEO
Tercer Ojo
Se terminó el desarrollo del sitio full flash de la empresa. Además se agregó la sección "Novedades", y se optimizó el sitio para que sea correctamente indexado por buscadores.
- AS 3
- Información a través de XMLs
- SEO aplicado a Flash
Coramina Lenceria
Diseño por Pixelate Creativos.
Desarrollo de un sistema de administración para el catálogo del sitio, que permite altas, bajas y modificaciones de los productos y upload de fotos.
- PHP/MySQL | jQuery
- CMS propio
- Maquetación | SEO
Arte Digital
- Body Line -
Body Line 1 | 2006
Body Line 2 | 2006
Body Line 3 | 2006
Body Line 4 | 2006
Body Line 5 | 2007
- Color -
Rojo | 2005
Naranja | 2005
Amarillo | 2005
Verde | 2005
Celeste | 2005
Azul | 2005
Violeta | 2005
- Influence -
Bob Marley | 2005
Jim Morrison | 2005
John Lennon | 2005
Mick Jagger | 2005
- Pin Up | GGA -
Metamorphosis | 2004
One | 2005
Y | 2006
Web | 2006
Twisted | 2007
NN | 2010
- Angels & Demons -
Angel's Touch | 2004
Divine Temptation | 2004
Lilith | 2005
Black and White | 2005
Sin | 2007
- Personal -
SRV | 2003
Maya | 2004
Ave Fénix | 2004
SL - LD | 2006
Diego Maradona | 2005
Jack Skellington | 2005
El blog del Turu
especialidad de la casa
« ir al inicio
CSS y Javascript
25 de January de 2010 | 9:22 pm
En lo que a diseño web se refiere, este año los desarrolladores y maquetadores lo empezamos teniendo en mente HTML5 y CSS3. Uno piensa en la etiqueta <video> por ejemplo, y no puede más que gustarle eso. Después seguís soñando, y lo imaginás con jQuery. Genial. Por último, te acordás que la gente usa internet explorer, y te querés matar.
La curva de aprendizaje del usuario común en verdad no la conozco. Es muy fácil para mí y cualquier geek, imaginar que los usuarios de internet leen e investigan. Nada más lejos de la verdad. A los usuarios de internet, hoy en día lo único que les importa es Facebook, como hace tres años atrás le importaban Fotolog y MySpace, y más atrás aún, revisar su cuenta de email de Yahoo.
Como me gusta leer sobre maquetación, me encuentro con algún truco de CSS. El post está bueno, salvo con que no sirve para ie. Entonces, se usan un par de librerías en javascript que al cargarlas, “corrigen” lo que está mal en el navegador favorito por todos.
Y si directamente no hacemos nada para que se vea bien en IE?
Guía de maquetación HTML para e-mails marketing
17 de April de 2009 | 6:46 pm
En el tiempo en que llevo trabajando en Interactive, aprendí que algo a lo que hay que prestarle un poco más de atención en la etapa de test es a los e-mails marketing. Debido a la ausencia de estándares, y que corporativamente se utilizan clientes de email como lotus o outlook pero el público en general utiliza webmails, uno se ve obligado a reducir las piezas html a una serie de reglas para performar correctamente en todos los medios.
Como no suelo encontrar guías en la web sobre este tema, comparto la que uso diariamente. Agreguen o corrijan lo que crean necesario:
- Resolución de imágenes para web: 72 dpi.
- Evitar usar imágenes menores a 14px de alto y 8px de ancho.
- No usar hojas de estilos externas, ni estilos embebidos en el head.
- No usar javascript.
- No usar div para maquetar, usar tablas y no más de dos anidadas.
- Evitar usar degradés como fondo donde haya un cuerpo de texto. De esta manera se puede setear el color de fondo sólido como propiedad del td.
- Evitar la imágenes como fondo de un td.
- Utilizar etiqueta alt en todas las imágenes.
- Setear altura y ancho en tablas y tds.
- Setear alineaciones verticales y horizontales, aún cuando sean las default (middle y left).
- Para setear márgenes con presición, usar spacer.gif, archivo gif transparente de 15×15 pixeles seteándole ancho y alto a necesidad.
- Usar entidades htmls. Adjunto las más comunes:
- á, é, í, ó, ú = á, é, í, ó, ú.
- Á, É, Í, Ó, Ú = Á, É, Í, Ó, Ú.
- ñ, Ñ = ñ, Ñ
- TM = ™
- (R) = ®
- (C) = ©
- Comillas simples = ‘
- Comillas dobles = “
- & = &
- Ojo al utilizar superscript “<sup></sup>”, en textos multilínea agregará márgenes.
- No usar etiqueta <p>.
- Colocar textos entre <font></font>. La forma correcta de formatear un texto sería:
<font face=”arial, helvetica, sans-serif” size=”1″ color=”#666666″ style=”font: normal 10px arial, helvetica, sans-serif; color:#666666;”>Lorem ipsum dolor sit amet</font>
De esta forma se asegura que el texto tenga el formato deseado, ya sea por “style”, o por los antiguos parámetros. Lotus usará face=”arial, helvetica, sans-serif” size=”1″ color=”#666666″, los webmails style=”font: normal 10px arial, helvetica, sans-serif; color:#666666;”.
La equivalencia en tamaños de tipografía sería:
- 10-11 = size 1
- 12-13 = size 2
- 14+ = size 3
Notar el retraso importante que se tiene en materia de email. No conozco a nivel mundial la eficacia que tiene un email marketing. Sí sé la eficacia que tienen en los sitios que maneja la agencia, porcentaje alto cuando el email se convierte en una pieza de comunicación y deja de ser un “correo no deseado”.
Más sobre eficacia de email marketing en Dossiernet.
Curso de HTML
11 de December de 2007 | 7:26 pm
Cumpliendo promesas, inauguro los tutoriales para aprender diseño web desde cero.
A quién le puede interesar?
- A quienes no sepan absolutamente nada de diseño web pero que se mueren por hacer páginas.
- A los que saben algo, pero quieren aprender más, quizás queriendo volverse profesionales de la web.
- A los que se dedican a diseño web… les extrañará ver la cantidad de cosas que no saben aún
.
A estos últimos les digo que si bien mis palabras pueden sonar soberbias, la idea es más bien que se lo tomen como un desafío profesional, tal vez personal.
O si prefieren destruirme, los invito a que encuentren los miles de errores que seguro existen y me los hagan saber, así añado sus correcciones para ir perfeccionando las técnicas de todos (no olviden de dónde aprendieron lo que saben, y que está bueno devolver algo de lo mismo).
Introducción
Antes de entrar de lleno en el armado y diseño de páginas web, hagamos una breve reseña de aquellos conceptos que a lo largo del curso se van a ir mencionando, y que pasarán a formar parte de un lenguaje común:
- WWW (World Wide Web): es el sistema propio de internet. Concebido como un sistema de información por hipertexto. Esto quiere decir que los elementos mostrados en pantalla (texto o imágenes) pueden vincularse entre sí o hacia otras fuentes de información. Es un sistema global y público, por lo que puede accederse desde diversas plataformas en cualquier parte del mundo.
- Navegador: Es el programa con el que “navegaremos” un documento. Es aquel que se interactua con el servidor, devolviendo las peticiones solicitadas.
- Servidor: aloja los documentos que componen un sitio web. Mediante el protocolo HTTP se comunica con el navegador.
- HTTP: siglas para “Hyper Text Transfer Protocol” (protocolo de transferencia de hipertexto). Es el protocolo de comunicación de la world wide web, el lenguaje en común, entre todos los actores.
- URL: siglas para “Uniform Resource Locator” (localizador uniforme de recursos), es la dirección que localiza una información dentro de internet.
- HTML: siglas para “Hyper Text Market Language” (lenguage de marcado para hipertexto). Es el lenguaje en el que se estructuran los documentos que serán leidos por servidores y navegadores.
Lenguaje HTML
El lenguaje que interpretan los navegadores web es el html. Por lo que para hacer una página web necesitamos conocerlo.
Un documento html es un archivo de texto. La diferencia entre un archivo .txt y uno .html radica en las etiquetas presentes en este último. Las etiquetas sirven para orientar al navegador en la forma de estructurar el contenido (títulos, subtítulos, párrafos, listas, etc). En este punto profundizaremos más adelante. Por ahora debemos tener presente que para crear un archivo .htm o .html sólo nos hace falta un editor de texto, desde un simple bloc de notas a alguno más complejo. Recomiendo el Notepad++, aparte de ser el bloc de notas que todos conocemos, trae incorporados otros lenguajes de programación que nos permite una mejor visualización por medio de colores, aparte de ser gratuito y Open Source.
En un futuro veremos que el principal problema que econtraremos es la falta de compromiso de algunas empresas de software al momento de diseñar navegadores que respondan a los estándares divulgados para la correcta interpretación del lenguaje empleado en un documento html. Esto implica un trabajo extra del diseñador al no sólo diseñar una página, sino a corroborar la correcta interpretación de la misma por diferentes navegadores.
¿Lenguaje de marcado? ¿etiquetas?
La base de la sintaxis de este código es la etiqueta. Por ejemplo:
<etiqueta>texto de prueba</etiqueta>
La primera etiqueta activa una orden que afecta a nuestro contenido, siendo la segunda etiqueta con el signo “/” por delante la que pone fin a la misma.
Veamos un ejemplo práctico. Para obtener un texto con negrita, la etiqueta es <b>. Por lo que si queremos lograr:
texto de prueba
El código html será:
texto de <b>prueba</b>
Nuestra primera página
Un documento html cuenta con una estructura a respetar para la correcta visualización por parte de los navegadores. Una estructura básica es:
- <html>
- <head>
- <title>Título de la página</title>
- </head>
- <body>
- Contenido de la página (textos e imágenes)
- ………..
- ………..
- </body>
- </html>
Lo que vemos es que todo el documento está contenido en la etiqueta <html>, luego contamos con un encabezado, y finalmente un cuerpo. Con esto en mente, crearemos nuestra primera página. Si en un editor de texto escribimos el siguiente código:
- <html>
- <head>
- <title>Curso de HTML</title>
- </head>
- <body>
- Hola mundo!
- </body>
- </html>
Lo guardamos como ejemplo_1.htm y lo abrimos en nuestro navegador:
Ya empezamos a escribir en lenguaje html.
Algunas consideraciones en el manejo de archivos:
- Utilizar siempre minúsculas en los nombres de los archivos.
- Los espaciados entre palabras pueden crear problemas. En vez de nombrar “ejemplo 1.htm”, es preferible “ejemplo_1.htm”.
- Se pueden usar las extensines .htm o .html, ambas son válidas. Por una cuestión de orden, se recomienda usar sólo una de ellas en nuestros sitios.
- Al nombrar el archivo jamás usar tildes ni caracteres especiales, como “ñ”.
Pueden ver el ejemplo_1.htm.
Esta obra está bajo una licencia de Creative Commons.
HTML
13 de November de 2007 | 11:17 am
En poco tiempo se estarán cumpliendo dos años de este sitio online. Tiempo en el que creo haber cambiado el diseño total unas tres veces más o menos. Algo normal para un diseñador, nunca conforme.
De esto hablaré en un futuro, hoy quiero decir que pronto estaré publicando una serie de tutoriales para aprender diseño web desde cero. Se entendió? CERO. Si no saben nada de diseñar páginas web, este es el lugar indicado para empezar.
Estoy dictando un curso de armado de páginas web, por lo que me vi obligado a crear tutoriales y guías, y como no olvido de qué manera aprendí el 90% de lo que sé, los compartiré. Espero encontrar a otros diseñadores que puedan corregir y sugerir soluciones alternativas a las que planteo. Se sabe, subís una página hoy y mañana está vieja.
Están avisados, principiantes y no principiantes, pueden esperar encontrar un espacio en este sitio para aprender e intercambiar conocimientos de diseño web.
Rediseño y diseño
30 de October de 2006 | 4:36 pm
Estoy evaluando un cambio en el diseño del sitio. En contra de mi voluntad, voy a tener que hacer algo con la versión en Flash. Si bien me gusta, no sólo por el diseño, sino porque también es igual de funcional que la html (las opciones de comentario e interacción están allí, incluido el blog), veo que aquellos que acceden no les gusta esperar… lo cual es un comportamiento interesante, teniendo las dos opciones eligen la que tarda más (¿sabrán que significa flash?).
En fin, por ahora el cambio que evaluo es que desde un comienzo se pueda entrar a la version html, y link de por medio puedas ver la versión swf.
Eso por un lado, por otro, me alegra participar en un nuevo proyecto, la realización de la tapa de un libro. Por ahora no voy a dar más detalles, pero seguramente se verá alguna vista previa por acá, más allá de que la versión final estará disponible en la galería.