The Joomla! Forum™

Cansado de ver libros y libros de diseño y sus "dificiles" teorias, decidi abrir este post para que todos podamos colaborar, y cada uno pase algun tip practico, rapido y usable (muy 2.0 no?) para que podamos mejorar el diseño de nuestras paginas... el tema ya comenzo en otro post, y atrevido puso la primera nota:

Atrevidoweb wrote: Un tip práctico, yo loutilizo para cuando tengo que componer música y aprender algunas cuestiones específicas de diferentes estilos:

Busca un sitio que te parezca muy bueno en diseño y cópialo (como entrenamiento,... )
Una vez que sepas como está hecho, haz uno igual pero tuyo. Mantén el estilo.
Una vez que logres esto revisa todo lo que aprendiste y piensa que mejorar o cambiar... y así
si encuentras otro que te gusta mucho repite el procedimiento....

Yo no aporto porque como dije antes, soy mas que duro para diseñar, definitivamente no es lo mio. Quizas con un poco de ayuda algun dia pueda lograr algo un poco mas lindo...
A postear se ha dicho, sin verguenza de nada, todo sirve!!!

una excelente idea.

Bueno, me he topado con este texto leyendo en http://www.desarrolloweb.com y la verdad es que ma parecio bastante interesante. No es sobre diseño en si, sino sobre usabilidad, pero esta muy bien explicado. Tomense el tiempo de leerlo, no tiene desperdicio.


Extraído de DesarrolloWeb:

Si lo piensas demasiado rápido la web del concesionario de coches de la esquina no parece que pueda servir para nada. Nadie compra un coche por Internet y para informarse sobre los modelos es más común ir a la web de la gran marca.

Así cuando el responsable del concesionario de la esquina quiere que le hagamos una web, parece que la máxima es una web "como sea, pero bonita para que quede contento". Con semejantes premisas, el camino al desastre parece seguro.

Crear una web que no sirve para nada no tiene ningún sentido, por tanto nuestra tarea principal es convertir la web de esta empresa en algo de utilidad para los clientes y que aporte beneficios al empresario. Es cuestión de pensar en situaciones donde tenga sentido que la web ayude tanto a la empresa como a los clientes.

En el caso del concesionario es probable que alguien pueda estar buscando un concesionario de esa marca en las cercanias del lugar donde vive, normalmente utilizará Google y escribira algo como "marca + localización", por ejemplo "Renault en Getafe". Por tanto algo tan sencillo como incluir muy visible y en el título de la homepage la situación del concesionario y la marca puede ayudar mucho. Del mismo modo un mapa en la homepage que explique la situación exacta y como llegar de diversas maneras (metro, autobus, coche...) puede hacer que lleguen clientes al concesionario que de otro modo nunca se hubieran acercado.

Si vamos más allá se puede pensar, por ejemplo, en un sistema de envio de e-mails o SMS a los clientes para recodarles revisiones periódicas; cambios de aceite, filtros o neumáticos que la gente suele olvidar con el consiguiente riesgo para ellos y perdida de ingresos para el concesionario.

Estar un par de horas en el concesionario observando, unas preguntas al responsable del negocio, a los trabajadores o simplemente tratar de ponerse en el lugar de un cliente nos puede dar muchas ideas sencillas e interesantes.

En este tipo de negocios donde lo importante es la parte offline, la parte online no tiene sentido que sea planteada como un sustituto o una replica del negocio (vender coches), sino como un apoyo, un complemento para las partes donde el negocio físico tenga problemas (olvido de revisiones periódicas).

Un pequeño tip q tengo, mas q tip es lo q estoy haciendo ahora, para cambiar mi templeate, me baso en el templeate del mismo joomla y abro el archivo index.php y ahi con mi dreamweaver en modo de diseño con las dos pantallas la de codigo como la de  diseño, muedo los modulos como se me da la gana eso si teniendo en cuenta los div de los modulos, siempre van a encontrar el outer y el inner ejemp:
 
osea armen como quieran su pagina y solo mueven los codigos en el lugar q ustedes quieran, no es necesario programar solo hacerse un a idea de como quieren estructurar la pagina, no sera recontra facil la primera vez, pero si ayuda bastante a personlizar como tu quieras tu pagina, lo unico q no he podido hacer es cambiar el color del fondo, por mas q me he metido al css y a todos los index. php q tiene el bgcolor=#ffffff y los he cambiado hasta ahora no funciona, si por ahi alguien tiene una idea me ayudarian bastante.
Espero q les sirva de algo mi pequeña experiencia en joomla
besos cheti

cheti yo abro el index.php y sale todo en blanco la parte del diseño.  no puedo ver ninguna odificacion asi.

ah no ya entiendo a que te referías jaja....


Es por ser newbie.

Te referías al index.php del template que estamos utilizando. :P

demux wrote: cheti yo abro el index.php y sale todo en blanco la parte del diseño.  no puedo ver ninguna odificacion asi.

para que veas el diseño tienes que vincular  la css al index desde dreamweaver.

saludos.

este es un topico interesante, creo que hay que tener en cuenta la funcion que va a tener el sitio, el publico al que apunta y que cosas son importantes en el layout del sitio desde el punto de vista del posicionamiento
en general encargo a un diseñador que haga el diseño del sitio (como imagenes) y luego yo hago el mockup html y css
el editor que utilizo para trabajar es un plugin de eclipse que se llama aptana, ya que no me gustan los programas tipo wyswyg (com dreamweaver) y no me gusta usar software privativo

en el caso de los templates para joomla 1.5 empiezo el trabajo de la siguiente manera
copio el codigo del template beez a una nueva carpeta, con el ombre del template que quiero poner yo
borro las hojas css y las imagenes,
copio las imagenes que voy a usar en el template para armar el layout de acuerdo al diseño
modifico el archivo xml para que refleje los cambios en archivos y demas, aunque lo unico realmente importante es que se modifique el nombre del template para que sea igual al de la carpeta
luego borro todo el html del index.php (del template) y escribo el mio
generalmente algunos divs con el código de las zonas que quiero mostrar y poco mas
luego cargo una hoja de estilo que se llama reset.css (la tome de las YUI, pero no es exactamente la original, la retoque a mi gusto)
creo otra hoja de estilos que aplique el diseó como tal (el markup html NO deberia tener aspectos relacionado con el layout de pantalla, pero a veces no puede evitarse) , luego de un rato de retocar css y probar en cuanto browser pueda (por lo general, firefox3 , firefox2 , ie6 , ie7, safari, opera y alguno otro de la familia gecko) queda casi listo el teplate
por lo general hace falta hacer algunos retoques en los archivos de la carpeta html que está dentro del template

saludos
Esteban

Wow, me ha llegado una notificacion por este post, cuanta agua ha pasado debajo del puente entre el dia que lo inicie y hoy! Ya no uso mas Joomla, mi obsesion por tener el control me llevo primero a usar PHP puro, y hoy en dia utilizo un framework llamado CakePHP, que me permite jugar con mis reglas, pero rapidamente poder contruir webs.

Con respecto al motivo original de este post, a los que les interese les cuento que estoy por comenzar con un blog dedicado 100% al arte de diseñar sitios web, desde la mismisima concepcion del proyecto, hasta el armado utilizando estandares como son xhtml y css. La wb todavia no este publica, pero en cuanto lo haga, avisare por aqui si alguno se encuentra interesado.

Saludos,
mbavio

Recomiendo la herramienta firebug.

Yo he realizado diferentes plantillas para joomla y siempre es muy útil utilizar firebug. Está disponible para utilizarlo con mozilla firefox.
Es una herramienta de diseño que permite explorar las páginas y saber que estilos aplican para determinado elemento dentro de la página.
Además es gratis, les recomiendo que lo usen.

Como prometi, he comenzado un blog donde escribire acerca del arte de crear sitios web. La direccion es http://mbavio.com.ar

Saludos!

Como vinculo mi css con el index.php de modo que pueda modificar mi template usando dreamweaver? es posible hacerlo en mac?
Gracias!

no sabría decirte, no uso ese tipo de programas.
una opción sería que guardes una version completa de un html de una pagina de joomla y modifiques eso con el dreamweaver, y luego apliques los cambios al template, aunque en realidad me parece mas trabajo

Esteban

Gracias Esteban, lamentablemente como diseñadora sin experiencia en programación, se hace súper complicada cualquier pequeña modificación gráfica al template.
Meriely

te recomiendo empezar a usar aptana en lugar de dreamweaver, dreamweaver esta bien para maquetar, pero meter lo que sale del dreamweaver en produccion es una mala idea, por lo general es mucho mejor si armas los css a mano o usando alguno de los frameworks que hay para eso, como blueprint o 960gs

Visiten http://www.GeneradorDePlantillas.com para generar sus plantillas únicas, sin necesidad de codificar nada.