Foros del Web » Creando para Internet » Diseño web »

Hacer un sitio web responsivo sin usar frameworks

Estas en el tema de Hacer un sitio web responsivo sin usar frameworks en el foro de Diseño web en Foros del Web. Hola, estoy trabajando en varios sitios web y me gustaría hacerlos responsivos, el tema es que me parece que usar boostrap para solo añadir responsividad ...
  #1 (permalink)  
Antiguo 15/04/2015, 18:51
Avatar de Hyemin  
Fecha de Ingreso: agosto-2014
Mensajes: 147
Antigüedad: 9 años, 8 meses
Puntos: 0
Hacer un sitio web responsivo sin usar frameworks

Hola, estoy trabajando en varios sitios web y me gustaría hacerlos responsivos, el tema es que me parece que usar boostrap para solo añadir responsividad es meter demasiado codigo ajeno.

Saben si hay agun tutotial por ahi o manual o videocurso que trate sobre responsividad "a mano"?

Gracias
  #2 (permalink)  
Antiguo 15/04/2015, 20:26
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 10 años, 7 meses
Puntos: 145
Respuesta: Hacer un sitio web responsivo sin usar frameworks

Lo más recomendable es utilizar las media queries que proporciona CSS. Y aplicar bien los estilos, obviamente.
__________________
¿Te sirvió la respuesta? Deja un +1
  #3 (permalink)  
Antiguo 16/04/2015, 20:16
Avatar de desco6  
Fecha de Ingreso: diciembre-2014
Ubicación: Vivo aquí
Mensajes: 206
Antigüedad: 9 años, 3 meses
Puntos: 4
Respuesta: Hacer un sitio web responsivo sin usar frameworks

Puedes usar

<center> </center>

Ye quitas de todo los problemas del mundo.

Calidad VS comodismos

el dilema mas importante del mundo
  #4 (permalink)  
Antiguo 16/04/2015, 21:21
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 10 años, 7 meses
Puntos: 145
Respuesta: Hacer un sitio web responsivo sin usar frameworks

Cita:
Iniciado por desco6 Ver Mensaje
Puedes usar

<center> </center>

Ye quitas de todo los problemas del mundo.

Calidad VS comodismos

el dilema mas importante del mundo
Si se usan divs, se puede poner align="center".
__________________
¿Te sirvió la respuesta? Deja un +1
  #5 (permalink)  
Antiguo 16/04/2015, 22:32
 
Fecha de Ingreso: abril-2015
Ubicación: Bogotá D.C - Colombia
Mensajes: 106
Antigüedad: 9 años
Puntos: 11
Respuesta: Hacer un sitio web responsivo sin usar frameworks

Pues mira inicialmente te quiero felicitar por que decidir no hacer uso de frameworks es una buena iniciativa, para aprender más, hacer sistemas de calidad, hacer las cosas por tú mismo. y sobre todo
hacer una página que no tenga código que jamas vas a usar, pues esa es la desventaja de un framework, habrá muchas cosas que no necesitarás y se cargarán innecesariamente en tu site..

generalmente hacer una página responsive solo consta de una buena maquetación, en realidad no es usar un center y ya!, de hecho hoy en día un buen maquetador nisiquiera las usa al igual que los <br/> para saltar elementos, las <tables> para mostrar contenido, pues su uso se ha dejado extrictamente para cuando deseas mostrar listas de datos o cosas así, aunque ya algunos prefieren usar <div> <span> u otras etiquetas demás, o <iframes> para recargar contenido a no ser que sea de otro dominio.

La manera mas flexible y fácil de usar es:

@media() de CSS

con esta aplicas los estilos en relación al tamaño de la pantalla de un dispositivo..
Claramente también existirá la posibilidad de que necesites usar javascritp para algunas cosas aunque con css puedes lograr casi todo lo más necesario, puedes ocultar o mostrar cosas cuando lo desees usando @media,

EJEMPLO: a continuación te doy un html sencillo con un texto que cambia de color según sea el tamaño de la ventana, así que correlo, redimenciona el tamaño del navegador y observa los cambios... Éxitos! :D

<html>
<head>
<title>
Responsive preview
</title>
<style>
span.text{
font-family: sans-serif;
color: #000;
font-size: 30px;
}
@media(max-width: 1200px){
span.text{
color: red;
}
}
@media(max-width: 800px){
span.text{
color: green;
}
}
@media(max-width: 350px){
span.text{
color: blue;
font-size: 20px; /** Generalmente tambien debes ajustar muchas veces el texto a tamaños más pequeños. */
}
}
</style>
</head>

<body>
<span class="text">Responsive Preview</span>
</body>
</html>
  #6 (permalink)  
Antiguo 18/04/2015, 02:05
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Hacer un sitio web responsivo sin usar frameworks

La etiqueta center y el atributo align llevan 16 años que no se recomienda su uso, además de estar ya obsoletos ambos.
__________________
(:
  #7 (permalink)  
Antiguo 18/04/2015, 04:06
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 7 meses
Puntos: 578
Respuesta: Hacer un sitio web responsivo sin usar frameworks

A parte, no tiene ningún sentido usar CSS3 con HTML4
  #8 (permalink)  
Antiguo 18/04/2015, 14:28
Avatar de desco6  
Fecha de Ingreso: diciembre-2014
Ubicación: Vivo aquí
Mensajes: 206
Antigüedad: 9 años, 3 meses
Puntos: 4
Respuesta: Hacer un sitio web responsivo sin usar frameworks

Cita:
Iniciado por pzin Ver Mensaje
La etiqueta center y el atributo align llevan 16 años que no se recomienda su uso, además de estar ya obsoletos ambos.
El comentario era solo como un chiste...
  #9 (permalink)  
Antiguo 20/04/2015, 00:02
(Desactivado)
 
Fecha de Ingreso: abril-2015
Ubicación: España
Mensajes: 616
Antigüedad: 9 años
Puntos: 74
Respuesta: Hacer un sitio web responsivo sin usar frameworks

yo aprendí responsive design en un par de días sin usar ningún libro, sólo a base de ir probando. Te hago un resumen de lo que tienes que hacer:

1) Le pones esto en el <head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

2) Las imágenes les pones style="max-width:100%"

3) Los <div> les pones un porcentaje, por ejemplo style="width:100%"

4) Usa media queries para ocultar elementos según las dimensiones de pantalla. Por ejemplo:

Código CSS:
Ver original
  1. @media all and (max-width: 900px)
  2.     {
  3.          #div7 { display: none; }  
  4.     }
  #10 (permalink)  
Antiguo 20/04/2015, 09:10
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 16 años
Puntos: 1329
Respuesta: Hacer un sitio web responsivo sin usar frameworks

Obviamente no aprendiste, por que ocultar elementos es de las peores prácticas para responsive design.

Saludos
__________________
Grupo Telegram Docker en Español
  #11 (permalink)  
Antiguo 20/04/2015, 16:16
Avatar de Hyemin  
Fecha de Ingreso: agosto-2014
Mensajes: 147
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Hacer un sitio web responsivo sin usar frameworks

Cita:
Iniciado por superweb360 Ver Mensaje
yo aprendí responsive design en un par de días sin usar ningún libro, sólo a base de ir probando. Te hago un resumen de lo que tienes que hacer:

1) Le pones esto en el <head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

2) Las imágenes les pones style="max-width:100%"

3) Los <div> les pones un porcentaje, por ejemplo style="width:100%"

4) Usa media queries para ocultar elementos según las dimensiones de pantalla. Por ejemplo:

Código CSS:
Ver original
  1. @media all and (max-width: 900px)
  2.     {
  3.          #div7 { display: none; }  
  4.     }
Cita:
Iniciado por jhonjaider1000 Ver Mensaje
Pues mira inicialmente te quiero felicitar por que decidir no hacer uso de frameworks es una buena iniciativa, para aprender más, hacer sistemas de calidad, hacer las cosas por tú mismo. y sobre todo
hacer una página que no tenga código que jamas vas a usar, pues esa es la desventaja de un framework, habrá muchas cosas que no necesitarás y se cargarán innecesariamente en tu site..

generalmente hacer una página responsive solo consta de una buena maquetación, en realidad no es usar un center y ya!, de hecho hoy en día un buen maquetador nisiquiera las usa al igual que los <br/> para saltar elementos, las <tables> para mostrar contenido, pues su uso se ha dejado extrictamente para cuando deseas mostrar listas de datos o cosas así, aunque ya algunos prefieren usar <div> <span> u otras etiquetas demás, o <iframes> para recargar contenido a no ser que sea de otro dominio.

La manera mas flexible y fácil de usar es:

@media() de CSS

con esta aplicas los estilos en relación al tamaño de la pantalla de un dispositivo..
Claramente también existirá la posibilidad de que necesites usar javascritp para algunas cosas aunque con css puedes lograr casi todo lo más necesario, puedes ocultar o mostrar cosas cuando lo desees usando @media,

EJEMPLO: a continuación te doy un html sencillo con un texto que cambia de color según sea el tamaño de la ventana, así que correlo, redimenciona el tamaño del navegador y observa los cambios... Éxitos! :D

<html>
<head>
<title>
Responsive preview
</title>
<style>
span.text{
font-family: sans-serif;
color: #000;
font-size: 30px;
}
@media(max-width: 1200px){
span.text{
color: red;
}
}
@media(max-width: 800px){
span.text{
color: green;
}
}
@media(max-width: 350px){
span.text{
color: blue;
font-size: 20px; /** Generalmente tambien debes ajustar muchas veces el texto a tamaños más pequeños. */
}
}
</style>
</head>


<body>
<span class="text">Responsive Preview</span>
</body>
</html>



Gracias a todos por las respuestas, hoy logre hacer responsive una parte de mi sitio pero aun hay muchas cosas que corregir y estoy tratando de arreglarlas a prueba/error

Utilice <meta name="viewport" content="width=device-width, initial-scale=1"> y a las imagenes les pase el style="max-width: 100%"

Por ahora los divs contenedores de los articulos se me deforman y no se ajustan bien a la pantalla y por mas que pongo en un div el adsense tambien me ocupa demasiado espacio y me deforma la pagina.

Si alguien quiere echarle un vistazo al codigo que estoy usando mi sitio esta en http://attackphase.net

Cualquier consejo me sirve, si veo que no puedo entonces voy a tener que usar mas mediaquerys y "deformar" el sitio a algo mas plano.
  #12 (permalink)  
Antiguo 20/04/2015, 22:13
(Desactivado)
 
Fecha de Ingreso: abril-2015
Ubicación: España
Mensajes: 616
Antigüedad: 9 años
Puntos: 74
Respuesta: Hacer un sitio web responsivo sin usar frameworks

ese baner de adsense lo tienes que ocultar cuando la pantalla sea pequeña
  #13 (permalink)  
Antiguo 22/04/2015, 12:40
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 16 años
Puntos: 1329
Respuesta: Hacer un sitio web responsivo sin usar frameworks

Duro y dale con eso. Si ocultas publicidad incluso te pueden banear de Adsense.
__________________
Grupo Telegram Docker en Español
  #14 (permalink)  
Antiguo 23/04/2015, 09:22
 
Fecha de Ingreso: agosto-2012
Ubicación: M.
Mensajes: 2.031
Antigüedad: 11 años, 7 meses
Puntos: 52
Respuesta: Hacer un sitio web responsivo sin usar frameworks

Cita:
Iniciado por Carlangueitor Ver Mensaje
Duro y dale con eso. Si ocultas publicidad incluso te pueden banear de Adsense.
Entonces se podria hacer mas chica la publicidad supongo(nunca he usado adsence)

Bueno yo creo que mas que mediaquery se necesita necesariamente del javascript
ya que el mediaquery css solo verifica la resolucion de pantalla pero no verifica que tamaño de pantalla es.

no es lo mismo una tablet que un celular, creo que al celular se le deben ocultar elementos y solo mostrar los mas importantes ya que es mas pequeño y a la tablet le caben mas ya que su tamaño es mucho mas grande y se veria mejor el contenido sin hacer zoom, y la unica manera de saber que dispositivo es, es con javascript.
__________________
a veces creemos que es algo básico pero al profundizar nos damos cuenta que estábamos tocando solo la cola de la culebra
  #15 (permalink)  
Antiguo 23/04/2015, 09:26
 
Fecha de Ingreso: agosto-2012
Ubicación: M.
Mensajes: 2.031
Antigüedad: 11 años, 7 meses
Puntos: 52
Respuesta: Hacer un sitio web responsivo sin usar frameworks

En conclusion primero debes verificar que dispositivo es y cual es su tamaño fisico y despues verificar su resolucion y en base a esto ocultar, mostrar y modificar el tamaño y acomodo de los elementos
__________________
a veces creemos que es algo básico pero al profundizar nos damos cuenta que estábamos tocando solo la cola de la culebra
  #16 (permalink)  
Antiguo 23/04/2015, 10:12
Avatar de Hyemin  
Fecha de Ingreso: agosto-2014
Mensajes: 147
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Hacer un sitio web responsivo sin usar frameworks

Cita:
Iniciado por Carlangueitor Ver Mensaje
Duro y dale con eso. Si ocultas publicidad incluso te pueden banear de Adsense.
Lo de la publicidad lo consegui usando banners responsivos del propio adsense, todavia me queda mucho por hacer y me estoy volviendo loco jaja.

Voy a estudiar si no me sirve hacer un sitio estilo m.misitio.com para redirigir ahi a los moviles como hace facebook.

Por ahi lei que los SE te penalizan por que lo consideran duplicidad de contenido pero al menos es una opcion super simple de conseguirlo.
  #17 (permalink)  
Antiguo 23/04/2015, 10:34
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Hacer un sitio web responsivo sin usar frameworks

Es más simple ajustar el contenido a muchas pantallas que crear dis sitios webs diferentes. Además con undiseño responsivo puedes adaptar una web a cualquier pantalla, si haces una redirección ajustar a dos tipos de pantalla.

Y sí, ocultar contenido es mala praxis. A mí me suele frustrar mucho que me oculten contenido, porque tengo que cambiar de dispositivo. Pero al final acabo no volviendo a entrar.
__________________
(:
  #18 (permalink)  
Antiguo 24/03/2017, 20:43
 
Fecha de Ingreso: julio-2012
Ubicación: Colombia
Mensajes: 5
Antigüedad: 11 años, 9 meses
Puntos: 1
Respuesta: Hacer un sitio web responsivo sin usar frameworks

Lo unico que debes hacer es agregar la etiqueta meta: <meta name="viewport" content="width=device-width, initial-scale=1">, para que puedas usar los @media y darle formato a los elementos en CSS. Se usa @media screen and (max-width: 780px) {} para cada tamaño de pantalla, debes usar diferentes atributos en cada @media para hacerla responsiva.
Puedes ver este articulo en mas detalle para ver el uso de @media: [URL="http://internetedadinero.com/web-responsive-html5css3/"]http://internetedadinero.com/web-responsive-html5css3/[/URL]
Te dejo otros con ejemplos de HTML5 y CSS3:
[URL="http://internetedadinero.com/cuadro-interactivo-html5-css3-js/"]http://internetedadinero.com/cuadro-interactivo-html5-css3-js/[/URL]
[URL="http://internetedadinero.com/hacer-una-calculadora-en-html/"]http://internetedadinero.com/hacer-una-calculadora-en-html/[/URL]

Etiquetas: frameworks, usar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 15:35.