Autor Tema: Diseño web by Alan++ (clase 06)  (Leído 951 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado Alan++
  • [L0] Ladrón de espacio en la BD
  • Mensajes: 19
    Ingreso: Abril de 2014
  • Sexo: Masculino
  • ar
  • ¿donde estoy?
    • Ver Perfil
Diseño web by Alan++ (clase 06)
« on: 15 Julio de 2014, 05:25 pm »
Ya vamos mediando los primeros minutos de este partido y aunque a groso modo aun haya mucha mas oscuridad que claridad llegamos al "punto de no retorno", es decir, desde aqui y hacia adelante no hay vuelta, lo que continue va a marcar un camino y aquellos quienes desde un principio no se sintieron felices con las primeras 5 clases no creo que deban seguir leyendo, "la cerveza fria, la tele fuerte y los gays... locas! locas!"... aca vamos

Todo lo que hemos estado hablando desde el primer capitulo es conceptual, muchos incriminaran a la "conceptuabilidad" como una herramienta sin fin, sin motivo y, algo aun peor, sin utilidad

Lo cierto es que lo conceptual nos sirve para comprender en profundidad lo que estamos haciendo, un "top" en css puede aplicarse en muchas ocasiones e inclusive repetidamente, utilizarlo no es complejo, pero... ¿es siempre lo mismo?... ahi es donde entra lo conceptual que si bien no va a cambiar el funcionamiento o no de una etiqueta si nos va a explicar porque funciona o deja de funcionar y lo que es aun mejor, el porque hay un porque

El concepto mas complejo y simple en los diseños webs es quizas el mas evidente y poco visible... siempre trabajamos con cuadrados (incluyo rectangulos implicitamente)

"Siempre trabajamos con cuadrados, siempre trabajamos con cuadrados, siempre trabajamos con cuadrados"

Repetir una y otra vez hasta aceptarlo y posteriormente con el fin de tratar de resolver problemas

El comprender que siempre trabajamos con cuadrados es quizas el primer dolor de cabeza importante, todas las etiquetas que hagamos, dandole un ancho o alto, una forma o color, un contenido o no, siempre son cuadrados... y cuando digo siempre es SIEMPRE

¿Porque es importante esto?

En primer lugar la maquetacion, una de las areas mas importante de una web, se basa en este principio y simplifica cualquier problema solamente pensando "siempre trabajamos con cuadrados"

En muchas ocasiones algo no va a posicionarse exactamente donde yo lo deseo, sea centrarlo, ponerlo a una distancia o solo dar un espacio, cuando esto ocurre solamente pueden haber 5 causas posibles:

1) El cuadro, porque "siempre trabajamos con cuadrados", esta mal definido o de forma inadecuada

2) Lo que esta por encima, porque "siempre trabajamos con cuadrados", afecta a mi cuadro

3) Lo que esta por la izquierda, porque "siempre trabajamos con cuadrados", afecta a mi cuadro

4) Lo que esta por la derecha, porque "siempre trabajamos con cuadrados", afecta a mi cuadro

5) Y finalmente, y muy raramente sucede,  lo que esta por debajo, porque "siempre trabajamos con cuadrados", afecta a mi cuadro

Se dan cuenta!, de pasar a pensar porque puñetera razon el cuadro no hace lo que queremos empezamos a deducir a partir de estas reglas simples porque algo no funciona... si el codigo css no se abusa de la bondad de sus relaciones solo con observar y ajustar estos 5 tendriamos una respuesta sencilla

Una vez ponemos en practica esto sucesivamente los errores se reducen solo al punto 1, el definir de manera adecuada un "cuadrado" nos da como resultado reducir la posibilidad de que afecte a alguno que este a cualquiera de sus cuatro lados (punto 2, 3, 4 y 5) y aqui al final de cuentas el unico problema es que definamos correctamente el cuadrado que trabajamos porque... "siempre trabajamos con cuadrados"

Dejando un poco de lado la "conceptuabilidad" es facil hacer unos ejemplos sencillos

Por comodidad y porque es uno de los mas requeridos voy a optar por hablar de un objeto que deseo centrar

Digamos que tenemos un cuadro cualquiera... porque "siempre trabajamos con cuadrados"... sea una imagen, un texto, un boton, etc

Si estoy trabajando con posiciones absolutas (llamese position:absolute o position:fixed) lo mejor es conocer el ancho (y alto para fixed) del cuadro con el que estamos trabajando, esto es importante porque a partir de ahi podemos ubicarlas en la posicion 50% y restarle la mitad del ancho (en fixed podria hacer lo mismo con el alto para centrarla completamente)

De esta forma si hablaramos de un cuadro de 300px, para centrarla deberia asignarle un "left:50%;" y a continuacion un "margin-left:-150px;", podria hacerse algo similar para centrarla en alto

Por otra parte centrar un objeto en medidas no absolutas resulta en ocasiones mas sencillo, con un "margin:0 auto;" el objeto simplemente deja el mismo marguen en ambos lados

Finalmente si a ustedes como a mi le gustan los retos lo mas complejo suele ser centrarlas de forma "sensible", es decir, que se ajuste al ancho de la resolucion con la que es observada la web, en este caso lo mas normal es utilizar "float:" y centrarla depende en gran medida del tamaño que posea, si el cuadro mide un 40% del ancho del contenedor lo normal seria utilizar un "margin:0 30%;", con esto decimos que a cada lado va a tener un 30% de margin

30 + 40 + 30 =100

Por estas razones suele ser tan sencillo hacer una pagina cuando se tiene experiencia y a su vez ser tan complejo cuando no se la tiene... es inevitable que alguien explique aquello que se considera implicito... ¿lo es?

Para finalizar y como les habia dicho desde un comienzo a partir de aca no hay vuelta atras, a cada paso vamos a ir mezclando lo conceptual con lo practico hasta que no haya diferencia

Espero poder seguir avanzando a una velocidad decente

No lo olviden... "siempre trabajamos con cuadrados"
No podemos matar el tiempo sin herir la eternidad