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.Cita:
Pronto, pronto habrá reto.
Versión para imprimir
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.Cita:
Pronto, pronto habrá reto.
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.Cita:
En cuanto acabe un diseño en Adobe Photoshop de una nueva web.
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.
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?
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: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.
- cuanto más específico sea un selector, más importancia tiene su regla asociada.
- a igual especificidad, se considera la última regla indicada.
o a lo peor me he liado y tengo una gran empanada Mental .
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.Cita:
Bah, paso, la relatividad de la relatividad el 0.9em no tiene arreglo. Podía haber empleado el tiempo en algo más productivo.
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.
Leí el mensaje a las 5:15 de la madrugada, parece ser que, se programa mejor a las tantas.Cita:
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).
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.Cita:
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 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.
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.Cita:
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.
Si el sitio tiene que ser accesible puedes usar esta propiedad.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/.Cita:
Body {.
Font-size: 62.5%.
}.
No te traicionó, lo busqué y lo encontré, por eso lo borré.Cita:
Si el sueño no me traicionó creo haber leído algo de porque estaba en el Margin el 0 y el auto.
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.
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.
Huy. Había olvidado de contestarte a este tema.Cita:
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.
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.Cita:
<.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>.
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.Cita:
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.
Es un poco lioso, lo sé.
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?