Joomla vs Dreamweaver

**MooDiE** · 22-12-2010

Pronto, pronto habrá reto.

Yuhu. Yo en cuanto acabe un diseño en Adobe Photoshop de una nueva web, me pongo con ese formulario. A ver si acabara hoy todo el trabajo de diseño.

**Pit [reloaded]** · 22-12-2010

En cuanto acabe un diseño en Adobe Photoshop de una nueva web.

Tengo enlaces y documentación guardada sobre eso, aunque por no dispersarme, hasta que no programe con más soltura no las miraré pero me sorprende, creo que tengo un buen nivel de Photoshop, pero las webs que hice abocetaba directamente en Dreamweaver ya me contareis sobre partir desde pohotoshop posdata: ayer entregué el último curro fuerte que me quedaba por despejar, creo que ahora voy a poder disponer de unas semanas con todo el día para estudiar.

**MooDiE** · 22-12-2010

Para bocetar webs se usa un programa de mockups (muchos de Windows usan visio de Microsoft, omnigrafle para Mac), luego también he visto que usan Illustrator, Adobe Photoshop o el software de Adobe específico para esa tarea que es Fireworks.

Diseño se suele hacer con Adobe Photoshop, existen plantillas para diseñar con Adobe Photoshop, http://960.gs, bájate el descargable de esta web y aparte de algunos css ya definidos por defecto, encontraras un.psd o.ai, en fin, hay muchos para que puedas empezar a bocetar las web y diseñarlas con la anchura que ahora se usa (960px). Los psd no son más que las guías verticales formado columnas para que puedas distribuir el contenido correctamente.

**Pit [reloaded]** · 07-01-2011

Por si pasáis por aquí, Modie o kashir, un par de cosas, a las 04.49 de la madrugada estudiando (y mañana tengo curro, con dos clientes apretando).
1: estoy ya maquetando (obligándome a teclear código, a pelo) y parto de tu.center-Layout:
/*Modie rules*/
.center-Layout {
Width:960px;
Margin:0 auto;
Overflow: hidden;
//border:1px solid red;
}.

Un par de cosas, por que partes del overflow:hidden, si parece más práctico dejarlo en auto?
El borde rojo, cuando pasas el puntero. ¿puedes comentarme esa forma de escribirlo con // pues no encuentro documentación en http://www.librosweb.es sobre eso?

**Pit [reloaded]** · 07-01-2011

2, y ésta que va a ser un ladrillo, lo siento, pero me despista este problema. En www.librosweb.es en la documentación, en las unidades relativas se advierte de lo siguiente:
por otra parte, uno de los problemas habituales cuando se utilizan unidades relativas es el problema del texto cada vez se ve más pequeño o el texto cada vez se ve más grande.
el siguiente ejemplo muestra el primer caso:
div { font-size: 0.9em; }
div>
p>texto 1</p>
div>
p>texto 2</p>
div>
p>texto 3</p>
/div>
/div>
/div>
y efectivamente así ocurre si:
<.doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/lose, dtd>
<html>
<head>
<meta http-equiv=content-type content=text/html, charset=utf-8>
<title>pruebas unidades relativas</title>
<style>
div { font-size:9em; }
</style>
</head>
<body>.
<div>
<p>malditas unidades relativas</p>
<div>
<p>malditas unidades relativas</p>
<div>
<p>malditas unidades relativas</p>
</div>
</div>
</div>
</body>
</html>.
sin embargo, enredando, veo el problema desaparece si:
.doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/lose, dtd>
html>
head>
meta http-equiv=content-type content=text/html, charset=utf-8>
title>pruebas unidades relativas</title>
style>
div#prueba1 { font-size:9em; }
/style>
/head>
body>.

Div id=prueba1>
p>malditas unidades relativas</p>
div>
p>malditas unidades relativas</p>
div>
p>malditas unidades relativas</p>
/div>
/div>
/div>.
/body>
/html>.
aunque si combino los dos casos, el problema vuelve a aparecer:
.doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/lose, dtd>
html>
head>
meta http-equiv=content-type content=text/html, charset=utf-8>
title>pruebas unidades relativas</title>
style>
div { font-size:9em; }
div#prueba1 { font-size:9em; }
/style>
/head>
body>.

Div>
p>malditas unidades relativas</p>
div>
p>malditas unidades relativas</p>
div>
p>malditas unidades relativas</p>
/div>
/div>
/div>.

Div id=prueba1>
p>malditas unidades relativas</p>
div>
p>malditas unidades relativas</p>
div>
p>malditas unidades relativas</p>
/div>
/div>
/div>.
/body>
/html>.
no entiendo muy bien.

En el primer caso uso: div { font-size:9em; }
y aparece el problema.
si no uso ese css y en su lugar uso div#prueba1 { font-size:9em; }
el problema desaparece.
pero si uso los dos:
div { font-size:9em; } y div#prueba1 { font-size:9em; }
y en el segundo div le aplico el id=prueba1
el problema se reproduce en los dos.

En la documentación, en la colisión de estilos se decía:

cuanto más específico sea un selector, más importancia tiene su regla asociada.
a igual especificidad, se considera la última regla indicada.

por lo que no entiendo por qué en el tercer caso me ignora div#prueba1 { font-size:9em; } que en teoría es más específico.
o a lo peor me he liado y tengo una gran empanada Mental .

**Pit [reloaded]** · 07-01-2011

Bah, paso, la relatividad de la relatividad el 0.9em no tiene arreglo podía haber empleado el tiempo en algo más productivo.

**MooDiE** · 07-01-2011

Bah, paso, la relatividad de la relatividad el 0.9em no tiene arreglo. Podía haber empleado el tiempo en algo más productivo.

Voy a tener que reemplazar el código css de un sitio entero solo por usar la unidad de medida em, cada día veo menos gente que usa este tipo de medida, este sitio en cuestión en resoluciones muy específicas de monitor provoca una estructuración del sitio que no es la esperada, px de toda la vida.

**Pit [reloaded]** · 07-01-2011

Está claro, sí pero tenía que probarlo para desencantarme de los puñeteros me y ex.
2 o 3 horas de madrugada he estado con eso, y ahora muerto de sueño tengo que estar trabajando.

**MooDiE** · 07-01-2011

Por si pasáis por aquí, Modie o kashir, un par de cosas, a las 04.49 de la madrugada estudiando (y mañana tengo curro, con dos clientes apretando).

Leí el mensaje a las 5:15 de la madrugada, parece ser que, se programa mejor a las tantas.

1: estoy ya maquetando (obligándome a teclear código, a pelo) y parto de tu.center-Layout:
/*Modie rules*/.

Center-Layout {.
Width:960px.

Margin:0 auto.

Overflow: hidden.
//border:1px solid red.
}.

Un par de cosas, por que partes del overflow:hidden, si parece más práctico dejarlo en auto?
El borde rojo, cuando pasas el puntero. ¿puedes comentarme esa forma de escribirlo con // pues no encuentro documentación en http://www.librosweb.es sobre eso?

Lo de overflow es para que la capa coja altura si tiene elementos flotantes en su interior (float) no hay diferencia de usarlo con hidden o auto, a efectos prácticos es la misma siempre y cuando no se le defina altura a esta capa y no se vea bloqueada. Si está en auto y la capa no puede crecer a lo largo aparecerá el scroll. Teniendo en cuenta eso es cuestión de gustos.

Lo de la doble barra al lado de border en programación es un comentario de línea. A diferencia del comentario de párrafo (/*comentario de párrafo*/) que hasta que no se cierre el comentario no acaba, con // el comentario solo afecta a una línea. Lo uso para activar/desactivar el borde de los elementos mientras voy maquetando y cuando lo paso a producción elimino esa líneas completas con una búsqueda.

Si el sueño no me traicionó creo haber leído algo de porque estaba en el Margin el 0 y el auto. Cuando se ponen dos valores el primero es el margen superior e inferior y el segundo derecho e izquierdo. De este modo el margen superior/inferior vale 0 y el derecho/izquierdo se centraría automáticamente.

Por cierto, no me olvido del formulario de contacto, pero últimamente no doy a basto, en cuanto acabe este trabajo buscaré un hueco y lo monto.

**MooDiE** · 07-01-2011

Está claro, sí. Pero tenía que probarlo para desencantarme de los puñeteros me y ex.
2 o 3 horas de madrugada he estado con eso, y ahora muerto de sueño tengo que estar trabajando.

A efectos prácticos, cuando tienes que crear un sitio con imágenes que encajan al píxel es una locura. Aunque siempre habrá donde se use aún sobre todo cuando los sitios tengan que ser accesibles, ya que, con las unidades me se produce un escalado de las fuentes.

Si el sitio tiene que ser accesible puedes usar esta propiedad.

Body {.

Font-size: 62.5%.
}.

Con esto consigues que 1em = 10px y todo será más fácil a la hora de maquetar. Yo uso también esta web para ver las tablas de conversión entre unidades http://pxtoem.com/.

**Pit [reloaded]** · 07-01-2011

Si el sueño no me traicionó creo haber leído algo de porque estaba en el Margin el 0 y el auto.

No te traicionó, lo busqué y lo encontré, por eso lo borré.

**MooDiE** · 07-01-2011

He buscado la información que usé en la web que se descolocaba con las unidades em, en el mensaje anterior te dejo el código que usé para hacer un poco más fácil la reescritura del código css.

**Pit [reloaded]** · 07-01-2011

Este fin de semana, aprovechando que llueve y que he entregado los curros y que hasta el lunes no volverán a forrarme a ostias me machaco el css y pruebo a arrancar con una página sólo con código, sin el arrastrar y soltar del Dreamweaver si puedo con ello, la semana que viene arranco con javascript y Doom.

**MooDiE** · 08-01-2011

Por lo que no entiendo por qué en el tercer caso me ignora div#prueba1 { font-size:9em; } que en teoría es más específico.

O a lo peor me he liado y tengo una gran empanada Mental.

Huy. Había olvidado de contestarte a este tema.

<.doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/lose, dtd>.

Html>.

Head>.
meta http-equiv=content-type content=text/html, charset=utf-8>.
title>pruebas unidades relativas</title>.
style>.

Div { font-size:9em; }.

Div#prueba1 { font-size:9em; }.
/style>.
/head>.
body>.

Div>.

P>malditas unidades relativas</p>.

Div>.

P>malditas unidades relativas</p>.

Div>.

P>malditas unidades relativas</p>.
/div>.
/div>.
/div>.

Div id=prueba1>.

P>malditas unidades relativas</p>.

Div>.

P>malditas unidades relativas</p>.

Div>.

P>malditas unidades relativas</p>.
/div>.
/div>.
/div>.
/body>.
/html>.

En este tercer caso, especificas que div#prueba1 { font-size:9em; } tenga.9em hasta ahí bien, pero como también especificas div { font-size:9em; } entonces si la unidad me se comporta de la siguiente manera.

Si empleas la unidad em para especificar el tamaño de la letra (font-size) entonces el valor de me es relativo al tamaño de letra del elemento padre que lo contiene.

El tamaño de las letras se hará más pequeño, ya que para la primera capa div#prueba1, la segunda capa contenida dentro de div#prueba1 y que no postura un identificador (solo tiene <div></div>) tendrá un 0.9em menor que el tamaño de su elemento padre (en este caso div#prueba1). Y como a su vez dentro de esta div existe otra div (recordamos que todas las divs por css tienen un valor de 0.9em) será 0.9em luego se hará más pequeña.

Es un poco lioso, lo sé.

**Pit [reloaded]** · 08-01-2011

Gracias, tío, al final ya me quedó claro que andar reduciendo o ampliando los me y os ex no da más que problemas. Sobre la anchura de las páginas.

Tú partes de una anchura fija de 960px sin embargo, en la guía de librosweb, es mencionan:
cuando se diseña la estructura de una página web, se debe tomar la decisión de optar por un diseño de anchura fija o un diseño cuya anchura se adapta a la anchura de la ventana del navegador.
sin embargo, la mayoría de las veces sería conveniente una solución intermedia: que la anchura de la página sea variable y se adapte a la anchura de la ventana del navegador, pero respetando ciertos límites. En otras palabras, que la anchura de la página no sea tan como para que no se puedan mostrar correctamente los contenidos y tampoco sea tan ancha como para que las líneas de texto no puedan leerse cómodamente.

Cómo lo ves, mejor fija o variable?

Tema: Joomla vs Dreamweaver

Herramientas

Buscar tema

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Temas similares

Dreamweaver

Adobe Dreamweaver CS 6

Dreamweaver fondo degradado

Sugerencias con Dreamweaver

Redimensionar capas con Dreamweaver