Ahora siguiendo un poco lo de diseño web, se me ocurrió justo cuando estaba leyendo algo sobre svg, algunas pequeñas cosas uno debe tomar en cuenta a la hora de hacer su propia pagina web ademas de como llevarla a cabo para que las demás personas puedan ver la idea tenemos en nuestra mente.

Uno mas experimentado tomara muchas mas variables para optimizar a lo que se apunta ya sea diseño, ganar dinero, simpleza, etc. Sin embargo, para los menos experimentados que desean entrar a este mundo del diseño web ya sea por hobby o capas una apuesta a futuro para ganar unos billetes... Luego de meditarlo un poco logre deducirlo a 3 variables, a modo columna vertebral, el cual luego tiene sus propias ramas internas que salen por si solo luego de leer un poco incluso de practicar un poco y ver como se mueve la situación (luego de un tiempo uno puede predecir un poco las influencias y movimientos puede generar nuestra creación, ademas de saber donde mejorar, reparar o eliminar)

Lo primero que uno debe pensar sin dudas es el "redimiendo" pero no es solo en cuanto en diseño del mismo, ya que uno debe pensar que deben conectarse desde distintos dispositivos (Smartphone, tablet, Ordenadores, etc.) el cual se le denomina diseño responsive [Mas abajo lo explicare]. Sino también esto abarca al propio Hosting que utilizaremos debemos tratar de no buscar uno muy barato y con grandes características ya que finalmente llegan a fallar o te lo cancelan, a la larga es perder el dinero que uno invierte, como el dicho lo dice "lo barato cuesta caro" por eso siempre deben tomarse el tiempo de preguntar recomendaciones de personas cercanas tengan un plan o algo y en lo posible ir a empresas algo "conocidas" en el ámbito, ya que las que suelen ser muy nuevas al mercado sobre venden para luego quedarse con el dinero, en pocas palabras, es una manera estafa.

Una vez que logramos establecernos firmemente en la red toca hacer lo que a mi criterio es mas complejo de evaluar con esto nos referimos al "contenido" de la página web que debe estar ordenado, de tal forma que sea agradable y claro la lectura del visitante de lo que exponemos. Algo sin dudas demuestra la seriedad de una pagina es la forma de redacción y sentido poseen los textos, por ejemplo tenemos una pagina de autos (www.SoloAutos.com) pero escribimos entradas de como hacer una tarta, es algo ilógico ¿verdad? ademas una correcta coherencia generara visitas sobre temática.

Por ultimo, algo que no deben faltar para cautivar al posible lector/usuario es la "originalidad" ya sea a nivel diseño, programación, contenido entre otras cosas. Por que al ser monótona o una copia mas del montón esta no podrá prosperar y levantar vuelo. Este es un tema complejo ya que lleva su tiempo y dedicación no todos estan dispuesto a dar pero déjame comentar lo que recibes al ver la pasión que le pusiste es realmente muy buena y sin dudas ver como florece tu idea.


Genial una vez orientado la cosa ahora les daré paso a unas pequeñas ayudas (machetes/borradores) para poder sacar adelante nuestro primer diseño responsive. Pero ¿Que es el diseño responsive? ¿Para que sirve?

Un diseño responsive básicamente es adaptar la web a las diferentes resoluciones de pantallas, el cual siempre es el que causa mas de una bronca contra el ordenador, ya que a nivel CSS el ancho que ocupamos con los Pixeles es fijo al momento de querer adaptar a otra medida nos queda demasiado grande. Aquí es donde aparece el mágico porcentaje %, el cual es mas flexible ya que toma un valor en referencia al tamaño del dispositivo se este visualizando el contenido. Diran ¿Cual es el problema entonces? esto funcionaria de una forma realmente buena si normalmente usáramos el % pero en muchos casos por errores o mal aprendizaje por parte de sus maestros usan valores fijos en pixeles, que siento algo realistas hoy en día donde abundan mucho smartphones y demás dispositivos no mas grandes que la palma es simplemente mirar un poco tu entorno y usar tu sentido común pero bueno no muchos lo poseen o utilizan esta bella destreza o no... que tenemos los seres humanos
normalmente es donde cometemos el mayor error del ser humano al usar pixeles definidos y no porcentajes , entonces, ¿cómo realizaremos un diseño web adaptable a resoluciones de pantalla?, un par de trucos de mi parte para vosotros !!

• Siempre utilizar "float: left o right" en vez de posicionar un objeto a "x" pixeles. Con esto mantendremos la proporción y por mas diferente sea la resolución tomara un valor equitativo
• En lo posible trata de no usar un ancho definido a no ser que sean imágenes, ejemplo width: 30px; en su lugar se debe poner width: 30%; con esto nos aseguramos siempre este en un lugar, valga la redundancia, proporcional a la pantalla
• Lo referente a padding (margenes dentro de un div) y los margin (margenes fuera de un div) para posicionar objetos conjunto a lo que es el float.
• Jamas usar algo con position: absolute; ya que no permitirá hacer un diseño responsive, utiliza las otras variables que existen
• Optimizar el uso de overflow: hidden; o clear: both; para arreglar pequeñas diferentes en los float y que no haya algo fuera de lugar estéticamente.
• Darle un uso considerable al alto de un contenedor para optimizar este, como por ejemplo min-height: 10%;
• Claramente con un menor espacio para poder mostrar el contenido algunas cosas deben salir para poder visualizarlo correctamente, el cual lo hacemos mediante @media(condición){cambios a realizar} pero tener en cuenta siempre tratando de sacar los contenidos son muy grandes de mostrar en pequeños espacios y de esta manera optimizar los tiempos de carga (En otras palabras hacerlo amigable para los dispositivos)
• Algo utilizo últimamente es meta viewport que nos permite definir el ancho, alto y escala del área usada por el navegador para mostrar contenido. El cual debe ir entre el head de esta manera: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

Con estos 8 pasos, aunque hay algunas cosas mas puntuales, ya podrían hacer una pagina responsive sin ningún tipo de problema... Aunque para agregar algo mas, por un amigo justo me los paso xD, cuando uno utiliza una propiedad en esta puede ser medida de varias formas, como por ejemplo px, em, pt y %, siempre nos encontramos con estás "diferencias" por así decir y ocupar en un texto es lo más evidente con el font-size o dentro de la misma propiedad font englobando todo en una sola propiedad (con esto me refiero de tener font-family, font-size, font-weight, etc.). Por eso a continuación les dejo una pequeña tabla el cual da la conversación o equivalencia, se las dejo por que me pareció muy sencillo y sobre todo de utilidad.




Bueno esto es todo por ahora espero les guste mucho y ante todo ya saben si tiene alguna duda o sugerencia no duden en comentarlo


Saludos Familia!