Tips rapidos y practicos para diseñar paginas

Cuestiones relacionadas con las plantillas y el diseño en general (CSS, html...). Todas las versiones de Joomla.

Moderators: hefesto, carcam

Locked
mbavio
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Sun Sep 11, 2005 1:10 am

Tips rapidos y practicos para diseñar paginas

Post by mbavio » Thu Feb 09, 2006 7:01 pm

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!!!

User avatar
blues
Joomla! Explorer
Joomla! Explorer
Posts: 490
Joined: Fri Aug 19, 2005 3:14 pm
Location: Palafrugell (Girona)

Re: Tips rapidos y practicos para diseñar paginas

Post by blues » Fri Feb 10, 2006 6:38 am

una excelente idea.
Josep M.

mbavio
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Sun Sep 11, 2005 1:10 am

Consejo de usabilidad

Post by mbavio » Fri Feb 10, 2006 7:20 pm

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).

User avatar
cheti
Joomla! Apprentice
Joomla! Apprentice
Posts: 34
Joined: Thu Feb 09, 2006 9:24 pm
Location: Lima - Perú

Re: Tips rapidos y practicos para diseñar paginas

Post by cheti » Tue Feb 28, 2006 11:02 pm

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

demux
Joomla! Apprentice
Joomla! Apprentice
Posts: 40
Joined: Sat Jun 30, 2007 10:53 pm

Re: Tips rapidos y practicos para diseñar paginas

Post by demux » Thu Jul 05, 2007 11:40 am

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

demux
Joomla! Apprentice
Joomla! Apprentice
Posts: 40
Joined: Sat Jun 30, 2007 10:53 pm

Re: Tips rapidos y practicos para diseñar paginas

Post by demux » Thu Jul 05, 2007 11:44 am

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

User avatar
RC
Joomla! Intern
Joomla! Intern
Posts: 60
Joined: Mon Apr 17, 2006 9:15 pm
Location: Chile

Re: Tips rapidos y practicos para diseñar paginas

Post by RC » Sun Jul 22, 2007 12:26 pm

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.

User avatar
Esteban Soler
Joomla! Explorer
Joomla! Explorer
Posts: 339
Joined: Tue May 29, 2007 6:31 pm
Location: Mar del Plata (Argentina)
Contact:

Re: Tips rapidos y practicos para diseñar paginas

Post by Esteban Soler » Tue Aug 26, 2008 12:05 am

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

mbavio
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Sun Sep 11, 2005 1:10 am

Re: Tips rapidos y practicos para diseñar paginas

Post by mbavio » Tue Aug 26, 2008 12:35 am

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

User avatar
psantamaria
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 208
Joined: Tue Aug 26, 2008 8:14 pm
Location: Brisbane, Australia
Contact:

Re: Tips rapidos y practicos para diseñar paginas

Post by psantamaria » Tue Nov 18, 2008 2:27 pm

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.

mbavio
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Sun Sep 11, 2005 1:10 am

Re: Tips rapidos y practicos para diseñar paginas

Post by mbavio » Tue Nov 18, 2008 6:46 pm

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

Saludos!

meriely_arias
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Tue Feb 16, 2010 5:45 am

Re: Tips rapidos y practicos para diseñar paginas

Post by meriely_arias » Tue Feb 16, 2010 5:53 am

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

User avatar
Esteban Soler
Joomla! Explorer
Joomla! Explorer
Posts: 339
Joined: Tue May 29, 2007 6:31 pm
Location: Mar del Plata (Argentina)
Contact:

Re: Tips rapidos y practicos para diseñar paginas

Post by Esteban Soler » Tue Feb 16, 2010 12:33 pm

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

meriely_arias
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Tue Feb 16, 2010 5:45 am

Re: Tips rapidos y practicos para diseñar paginas

Post by meriely_arias » Tue Feb 16, 2010 3:36 pm

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

User avatar
Esteban Soler
Joomla! Explorer
Joomla! Explorer
Posts: 339
Joined: Tue May 29, 2007 6:31 pm
Location: Mar del Plata (Argentina)
Contact:

Re: Tips rapidos y practicos para diseñar paginas

Post by Esteban Soler » Tue Feb 16, 2010 3:59 pm

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

jcorvera
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sun Nov 01, 2009 8:27 am

Re: Tips rapidos y practicos para diseñar paginas

Post by jcorvera » Sat Apr 10, 2010 2:55 am

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


Locked

Return to “Plantillas (templates) y diseño”