El post que buscas se encuentra eliminado, pero este también te puede interesar

Diseño Web: Responsive Designe

Anuncios

Bueno, este es mi primer post, y os dare a conocer algo que de por sí sera necesario dentro de poco tiempo, y dicho tema se llama "responsive Design", ahí que entender que este tutorial es algo "avanzado", seguramente para entender esto necesitaras una base de html, y bien CSS.

Explicación de resposive design segun Wikipedia:


El diseño web adaptativo o adaptable (en inglés, Responsive Web Design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.1

El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart, una publicación en línea especializada en diseño y desarrollo web.


Explicación segun "yo":

Bueno, simplemente les puedo decir, que es un diseño orientado a todos los dispositivos, sea un celular, o bien un televisor LCD, en el cual el tamaño de la web que hagas se adaptara depente de las caracteristicas de el dispositivo en el cual accedas a ella... Y a lo que se orienta esté tema, es simplemente dar una introducción de la "programación" mediante "queries", en CSS.


Empezando:

Bueno primero empezare con algo, que de por si es necesario conocer, y estó seria el Codigo HTML, en el cual creare 2 "cajas", con el las etiquetas DIV. Y también dentro de está introducire la etiquéta "<style>", que seria para introducirle estilos a la web, dentro de dicha etiqueta, es que se efectuara el "Responsive Design".

<html>
<head>
<title>1: Responsive Designe</title>
<style type="text/css">

* {
margin:0;
}

div {
background-color:yellow;
border: 3px solid orange;
float:left;
width:50%
}

</style>
<head>
<title>1: Responsive Designe</title>
<meta charset="utf-8" />
<style type="text/css">

body {
font-family:georgia;
font-weight:bold;
margin:0 auto;
}

div {
float:left;
padding:10px 0;
width:50%
}

</style>
</head>
<body>
<div id="caja1">
Está es la caja 1.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="caja2">
Está es la caja 2.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>


Como pueden ver en el codigo anterior, le quito el margen a todos los elementos de la pagina para no tener problemas con las longitudes, despues procedo a crear unos estilos para la etiqueta DIV, en el cual le aplico un tamaño, un "left" para que se alineen a la izquierda, y ademas unos rasgos como lo son un color de fondo, para identificarlos mejor y algo de texto para lograr algo así (y varias cosas más, que deporsi deberian saver, igual no duden en preguntar lo que no entiendan...):

Diseño Web: Responsive Designe


Bueno, eso seria mas o menos lo que queria mostrar. Ahora si, la idea es lograr adaptar esto es los otros dispositivos, y que no se vea así en todos, entonces al codigo abria que agregarle esto:


<html>
<head>
<title>1: Responsive Designe</title>
<style type="text/css">

body {
font-family:georgia;
font-weight:bold;
margin:0 auto;
}

div {
float:left;
padding:10px 0;
width:50%
}

@media screen and (max-width:600px) {
div {
width:100%;
}
}


</style>
<head>
<title>1: Responsive Designe</title>
<meta charset="utf-8" />
<style type="text/css">

body {
margin:0;
color:white;
}


div {
background-color:black;
border:5px solid orange;
float:left;
width:49%
}

</style>
</head>
<body>
<div id="caja1">
Está es la caja 1.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="caja2">
Está es la caja 2.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>


Como ven, sale una nueva parte del codigo, la cual se encarga de ejecutar lo de adentro, desde que se cumpla la función dada en este caso: (max-width:800px)
Lo que hace está parte de codigo, es "decir" que mientras el tamaño maximo sea igual a 800px, se ejecutara lo que este dentro de esta "función", en este caso, lo que hara es poner los dos "DIVS" que anteriormente median el 50% del navegador, los aumentara al 100%, osea que ya no seran dos columnas en una fila, si no dos filas diferentes, algo así::

Diseño Web


Bueno, eso es todo por hoy, seguro se hizo algo largo el post, por lo poco que se trata de enseñar, peor igual mente mientras menos dudas queden sueltas, más facil podran interactuar todos con esto.

-Seguramente pueden haber varios orrores ortograficos, ya que de por si no "checke" bien el escrito ademas de que "todo" fue escrito por mí persona, igualmente algo grave seguro os lo aclarare.
Responsive design

- No se como caera mi post en la comunidad, ya que de por sí es mi primer post, igual estoy abierto a criticas constructivas, y de seguro las tendre en cuenta para mi proximo post.

Anuncios

2 comentarios - Diseño Web: Responsive Designe

@dafrapinc
Muchas gracias por compartir, hay muy poca info en español sobre este tema, yo ya estoy maquetando una web usando el metodo sensible, ni bien lo tengo lo comparto saludos!
@igormarquez
muchas gracias, muy bueno para integrarse al tema