Jump to content
  • Sky
  • Blueberry
  • Slate
  • Blackcurrant
  • Watermelon
  • Strawberry
  • Orange
  • Banana
  • Apple
  • Emerald
  • Chocolate
  • Charcoal

Recommended Posts

"El diseño web adaptable o adaptativo, conocido por las siglas RWD (del inglés, Responsive Web Design) es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla."

segun wikipedia http://es.wikipedia.org/wiki/Dise%C3%B1o_web_adaptable

 

bien empecemos de lo basico al usar el tamaño % y em estamos logrando el inicio de responsive fue lo primero que existio tanto el % que toma el un determinado % de la pantalla como em el tamaño del objeto del dispositivo.

 

Bien tomemos un ejemplo "theme v4 - archivo estilo.css linea 138"

#maincontainer{
	background:#005DAB;
	width:980px;
	height:auto; 
	margin:0 auto;
	position:relative;
}

el contenedor principal tiene: un tipo de fondo azul, un ancho de 984px; un alto automatico; se centrara entre 0 arribiba y abajo 0 y der y izq centro, posicion relativa.

lo que nos intereza por el momento es el ancho, para esta esplicación:

tiene un ancho de 984 pixeles basicamente anque mires la pagina desde un pc, tablet o celular la etiqueta que llame a este id #maincontainer va a tener el mismo tamaño y si la pantalla es muy pequeña se va a esvordar.

 

es decir que la pagina se mirara perfectamente en una pantalla de 1280x600 0 1124x768 pero cualquier dimension de ahi para abajo la pantalla quedaria pequeña, claro que podras ver la pagina completa en el celular pero tendras que hacer zoom para ver algunas partes del texto o imagenes, lo cual hace incomoda la navegacíon.

 

es ahi donde nace la media screen del css que lo que hace es medir la pantalla y si es igual al tamaño preestablecido cambiara automaticamente el codigo de la hoja de estilo por defecto por uno que permita ver mejor la pagina en un determinado tamaño:

Ejemplo:

#maincontainer{
/* codigo normal a cualquier pantalla */
	background:#005DAB;
	width:984px;
	height:auto; 
	margin:0 auto;
	position:relative;
}
/*si y solo si la pantalla tiene 980px de ancho todos los codigos entro de mis {} les aplicare los cambios que me digan
@media only screen and (max-width: 980px){

#maincontainer{
/* no papu ya la pantalla es muy pequeña no tiene ni 981px cambiemos estos valores y descartemos cualquier otro */
    width:90%;
}

}

el codigo original #maincontainer dice que el contenedor debe ser de 984px ancho sin importar la pantalla, pero en el media screen al llegar a los 980px de ancho de pantalla dice que le vale mierda los 984px y aplicara sus valores propios que esten dentro de sus { } tomando los nuevo valores y aplicandolos, no es necesario escribir todo el codigo, solo los valores que se necesitan alterar.

 

con el mismo ejemplo:

#maincontainer{

	background:#005DAB;
	width:984px;
	height:auto; 
	margin:0 auto;
	position:relative;
}
@media only screen and (max-width: 980px){

#maincontainer{
    width:90%;
}

}

@media only screen and (max-width: 700px){

#maincontainer{
/* quiero que a la pantalla 700px el color de fondo del contenedor sea rojo */
    width:90%;
    background:red;
}

}

@media only screen and (max-width: 500px){

#maincontainer{
/* no me gusto el rojo quiero que sea naranja */
    width:90%;
    background:orange;
}

}

@media only screen and (max-width: 128px){

#maincontainer{
/* pero como ahora soy más experto doy color naranja pero en codigo  */
    width:90%;
    background: #FF5A00;
}

}

@media only screen and (max-width: 50px){

#maincontainer{
/* quien carajos tiene una pantalla de 50px ni Puka idea mejor oculto todo y dejo de joder */
    visibility: hidden;
}

}

escribo esto a la ligera porque es muy de noche, espero que sea de utilidad.

  • Like 6

Share this post


Link to post
Share on other sites

"El diseño web adaptable o adaptativo, conocido por las siglas RWD (del inglés, Responsive Web Design) es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla."

segun wikipedia http://es.wikipedia.org/wiki/Dise%C3%B1o_web_adaptable

 

bien empecemos de lo basico al usar el tamaño % y em estamos logrando el inicio de responsive fue lo primero que existio tanto el % que toma el un determinado % de la pantalla como em el tamaño del objeto del dispositivo.

 

Bien tomemos un ejemplo "theme v4 - archivo estilo.css linea 138"

#maincontainer{
	background:#005DAB;
	width:980px;
	height:auto; 
	margin:0 auto;
	position:relative;
}

el contenedor principal tiene: un tipo de fondo azul, un ancho de 984px; un alto automatico; se centrara entre 0 arribiba y abajo 0 y der y izq centro, posicion relativa.

lo que nos intereza por el momento es el ancho, para esta esplicación:

tiene un ancho de 984 pixeles basicamente anque mires la pagina desde un pc, tablet o celular la etiqueta que llame a este id #maincontainer va a tener el mismo tamaño y si la pantalla es muy pequeña se va a esvordar.

 

es decir que la pagina se mirara perfectamente en una pantalla de 1280x600 0 1124x768 pero cualquier dimension de ahi para abajo la pantalla quedaria pequeña, claro que podras ver la pagina completa en el celular pero tendras que hacer zoom para ver algunas partes del texto o imagenes, lo cual hace incomoda la navegacíon.

 

es ahi donde nace la media screen del css que lo que hace es medir la pantalla y si es igual al tamaño preestablecido cambiara automaticamente el codigo de la hoja de estilo por defecto por uno que permita ver mejor la pagina en un determinado tamaño:

Ejemplo:

#maincontainer{
/* codigo normal a cualquier pantalla */
	background:#005DAB;
	width:984px;
	height:auto; 
	margin:0 auto;
	position:relative;
}
/*si y solo si la pantalla tiene 980px de ancho todos los codigos entro de mis {} les aplicare los cambios que me digan
@media only screen and (max-width: 980px){

#maincontainer{
/* no papu ya la pantalla es muy pequeña no tiene ni 981px cambiemos estos valores y descartemos cualquier otro */
    width:90%;
}

}

el codigo original #maincontainer dice que el contenedor debe ser de 984px ancho sin importar la pantalla, pero en el media screen al llegar a los 980px de ancho de pantalla dice que le vale mierda los 984px y aplicara sus valores propios que esten dentro de sus { } tomando los nuevo valores y aplicandolos, no es necesario escribir todo el codigo, solo los valores que se necesitan alterar.

 

con el mismo ejemplo:

#maincontainer{

	background:#005DAB;
	width:984px;
	height:auto; 
	margin:0 auto;
	position:relative;
}
@media only screen and (max-width: 980px){

#maincontainer{
    width:90%;
}

}

@media only screen and (max-width: 700px){

#maincontainer{
/* quiero que a la pantalla 700px el color de fondo del contenedor sea rojo */
    width:90%;
    background:red;
}

}

@media only screen and (max-width: 500px){

#maincontainer{
/* no me gusto el rojo quiero que sea naranja */
    width:90%;
    background:orange;
}

}

@media only screen and (max-width: 128px){

#maincontainer{
/* pero como ahora soy más experto doy color naranja pero en codigo  */
    width:90%;
    background: #FF5A00;
}

}

@media only screen and (max-width: 50px){

#maincontainer{
/* quien carajos tiene una pantalla de 50px ni Puka idea mejor oculto todo y dejo de joder */
    visibility: hidden;
}

}

escribo esto a la ligera porque es muy de noche, espero que sea de utilidad.

 

Gracias, voy a probarlo papu.. +1

Share this post


Link to post
Share on other sites

"El diseño web adaptable o adaptativo, conocido por las siglas RWD (del inglés, Responsive Web Design) es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla."

segun wikipedia http://es.wikipedia.org/wiki/Diseño_web_adaptable

 

bien empecemos de lo basico al usar el tamaño % y em estamos logrando el inicio de responsive fue lo primero que existio tanto el % que toma el un determinado % de la pantalla como em el tamaño del objeto del dispositivo.

 

Bien tomemos un ejemplo "theme v4 - archivo estilo.css linea 138"

#maincontainer{
	background:#005DAB;
	width:980px;
	height:auto; 
	margin:0 auto;
	position:relative;
}
el contenedor principal tiene: un tipo de fondo azul, un ancho de 984px; un alto automatico; se centrara entre 0 arribiba y abajo 0 y der y izq centro, posicion relativa.

lo que nos intereza por el momento es el ancho, para esta esplicación:

tiene un ancho de 984 pixeles basicamente anque mires la pagina desde un pc, tablet o celular la etiqueta que llame a este id #maincontainer va a tener el mismo tamaño y si la pantalla es muy pequeña se va a esvordar.

 

es decir que la pagina se mirara perfectamente en una pantalla de 1280x600 0 1124x768 pero cualquier dimension de ahi para abajo la pantalla quedaria pequeña, claro que podras ver la pagina completa en el celular pero tendras que hacer zoom para ver algunas partes del texto o imagenes, lo cual hace incomoda la navegacíon.

 

es ahi donde nace la media screen del css que lo que hace es medir la pantalla y si es igual al tamaño preestablecido cambiara automaticamente el codigo de la hoja de estilo por defecto por uno que permita ver mejor la pagina en un determinado tamaño:

Ejemplo:

#maincontainer{
/* codigo normal a cualquier pantalla */
	background:#005DAB;
	width:984px;
	height:auto; 
	margin:0 auto;
	position:relative;
}
/*si y solo si la pantalla tiene 980px de ancho todos los codigos entro de mis {} les aplicare los cambios que me digan
@media only screen and (max-width: 980px){

#maincontainer{
/* no papu ya la pantalla es muy pequeña no tiene ni 981px cambiemos estos valores y descartemos cualquier otro */
    width:90%;
}

}
el codigo original #maincontainer dice que el contenedor debe ser de 984px ancho sin importar la pantalla, pero en el media screen al llegar a los 980px de ancho de pantalla dice que le vale mierda los 984px y aplicara sus valores propios que esten dentro de sus { } tomando los nuevo valores y aplicandolos, no es necesario escribir todo el codigo, solo los valores que se necesitan alterar.

 

con el mismo ejemplo:

#maincontainer{

	background:#005DAB;
	width:984px;
	height:auto; 
	margin:0 auto;
	position:relative;
}
@media only screen and (max-width: 980px){

#maincontainer{
    width:90%;
}

}

@media only screen and (max-width: 700px){

#maincontainer{
/* quiero que a la pantalla 700px el color de fondo del contenedor sea rojo */
    width:90%;
    background:red;
}

}

@media only screen and (max-width: 500px){

#maincontainer{
/* no me gusto el rojo quiero que sea naranja */
    width:90%;
    background:orange;
}

}

@media only screen and (max-width: 128px){

#maincontainer{
/* pero como ahora soy más experto doy color naranja pero en codigo  */
    width:90%;
    background: #FF5A00;
}

}

@media only screen and (max-width: 50px){

#maincontainer{
/* quien carajos tiene una pantalla de 50px ni Puka idea mejor oculto todo y dejo de joder */
    visibility: hidden;
}

}
escribo esto a la ligera porque es muy de noche, espero que sea de utilidad.
wow enserio que me sorprendió tu respuesta, mas que ayudarlo. Terminaste casi casi haciendo un tutorial :). De lujo. +1

Share this post


Link to post
Share on other sites

se me olvidaba decir que en su pagina deben pegar el siguiente codigo en cualquier parte del head (antes del </head>)

<meta content='width=device-width, initial-scale=1, user-scalable=no' name='viewport'/>

ya que si no funciona los cambios del @media only screen con esta linea se soluciona :P

si quieren que el usuario haga zoom cambien:

user-scalable=no

por este:

user-scalable=yes
  • Like 1

Share this post


Link to post
Share on other sites
On 14/1/2015 at 10:37, TatoCocoy dijo:

 

wow enserio que me sorprendió tu respuesta, mas que ayudarlo. Terminaste casi casi haciendo un tutorial :). De lujo. +1

Hola, muy bueno lo que pusiste, soy nuevo y al poner ese código solo la parte de abajo se me hace responsive, lo que aparece arriba, identificarme y las publicaciones quedan estáticas, que estoy haciendo mal?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Miguel92
      Pedido: [Mod] Imagen de cabecera en comunidades
      Por: @fellomix
       
      Una segunda forma de poder hacerlo!
       
      1 -  Ejecutar esta consulta
      ALTER TABLE `c_comunidades` ADD `c_headercom` VARCHAR(255) NOT NULL AFTER `c_nombre_corto`; 2 -  Buscar en c.comunidades.php en la función nueva_comunidad()
                      'fecha' => time(),                 'nombre' => $tsCore->setSecure($tsCore->parseBadWords($_POST['nombre']), true),                 'ncorto' => $tsCore->setSeo($tsCore->setSecure($_POST['ncorto'], true)),
      y debajo agregamos
                      'headercom' => $tsCore->setSecure($tsCore->parseBadWords($_POST['headercom']), true),
      un poco más abajo buscamos
                  // Insertamos             if(db_exec(array(__FILE__, __LINE__), 'query', 'INSERT INTO c_comunidades (c_autor, c_nombre, c_nombre_corto,
      y le agregamos a lado 
                   c_headercom,
      un poquito más abajo de
                      VALUES (                     \''.$tsUser->uid.'\',                     \''.$dato['nombre'].'\',                     \''.$dato['ncorto'].'\',
      agregamos
                          \''.$dato['headercom'].'\',
      Luego buscamos la función editar_comunidad($comid)
                          'pais' => $tsCore->setSecure($_POST['pais']),                         'desc' => $tsCore->setSecure($_POST['descripcion']),                     'color' => $tsCore->setSecure($_POST['back_color']),
      y debajo pegamos
                          'headercom' => $tsCore->setSecure($_POST['headercom']),
      más abajo buscamos 
                          c_acceso = \''.(int)$dato['acceso'].'\',                     c_permisos = \''.$dato['permisos'].'\',
      y debajo pegamos
       
                         c_headercom = \''.$dato['headercom'].'\',             
      3 - Después buscamos en c.crear_left.tpl
          <div class="item_form clearfix">         <label>Categoría</label>         <select name="categoria" id="ShowCats" class="required" onChange="com.subcat()" tabindex="3">             <option value="0">Selecciona una categoría</option>             {foreach from=$tsCats item=c}             <option value="{$c.cid}" {if $tsDato.c_categoria == $c.cid}selected="selected"{/if}>{$c.c_nombre}</option>             {/foreach}         </select>     </div>
      y debajo o arriba pegamos (se me olvido quitar los required, ya que no es obligatorio)
          <div class="item_form clearfix">         <label>Cabecera!</label>         <input type="text" name="headercom" tabindex="10" maxlength="180" size="60" class="required input_text https" placeholder="URL de portada (debe tener https://)" pattern="https://.*" value="{$tsDato.c_headercom}">         <small class="mg-lt">Solo admitirá los https!</small>     </div> 4 - Después buscamos c.com_info.tpl [línea 24 y 25]
      <div class="ver_com_info">     <div class="vci_left floatL">
      y la reemplazamos por
      <div class="ver_com_info" style="background-image: url({$tsCom.c_headercom});">     <div class="opacity">     <div class="vci_left floatL">
      luego debajo de la línea 61 agregaremos un 
          </div> 5 -  Por último agregaremos esto a comunidades.css
      .ver_com_info {     padding: 0; } .headercom {      background-position: center center;     background-size: cover;     background-repeat: no-repeat; } .opacity {     padding: 20px 8px;     background-color: rgba(255,255,255,.6); }  
    • By Miguel92
      Bueno dice N°2 porque a la N°1 la tengo que adaptar a la default ya que tenia class de bootstrap!
       

      si no se ve clic
       
      1) Crean un archivo llamado panel.js y agregan esto dentro
       
      2) En extras.css agregan esto
       
      3) Ahora crearemos un archivo llamado head_usuario.tpl y lo colocaremos en sections y dentro agregaremos
      la parte del st-panel-footer la pueden sacar no hay problema
       
      4) Ahora en la misma carpeta sections buscamos main_footer.tpl y agregaremos esto arriba de </body>
      {include file='sections/head_usuario.tpl'} <script src="{$tsConfig.js}/panel.js" type="text/javascript"></script>  
      5) Para los iconos descarguen esto → ICONOS FUENTES  ← y lo descomprimen en css
       
      6) Busquen en main_header.tpl y debajo de
      <link href="{$tsConfig.tema.t_url}/extras.css" rel="stylesheet" type="text/css" /> colocan
      <link rel="stylesheet" href="{$tsConfig.css}/iconfont.css">  
      y eso sería todo
       
      En el caso que haya error avísenme!
      Esta es la N°1
       
      si no se ve clic
      Ver panel N°2 ir a Demo32.hol.es
      Usuario: Demo
      Pass: demouser
    • By Aportando
      Hola estimados usuarios, antes que nada me presento, mi web es web.aportando.net
      En esta ocasión los molesto debido a que necesito integrar un chat cbox en mi web PHPost risus, y no tengo ni idea de como hacerlo.
       
      Por lo que tengo entendido se pueden integrar:
      - Nombre de usuario
      - Img de perfil o avatar
      - Enlace al perfil
       
      El chat yo lo quiero tener en toda la web, (fixed en la esquina a la derecha de la web, y que lo vean solo usuarios registrados)
       
      Desde ya muchas gracias, tambien necesitaría que me ayuden a personalizar el chat si es posible, cualquier code me es útil, tengo muy poca creatividad y no soy un muy buen diseñador ni mucho menos.
    • By Rhuan
      Hola, este complemento podría considerarse en realidad una "plantilla" para el anterior RChat que publiqué ya que la mayor parte del funcionamiento es el mismo.
       
      Para instalar este chat no es necesario tener el anterior RChat y si lo tienes también puedes instalarlo sin problemas, los archivos se sobrescribirán.
       
       
      Actualización
      06/03/2015 a las 18:00 - Descarga actualizada: se ha corregido un fallo en el instalador que evita que aparezca el icono de los emoticonos. 08/03/2015 a las 22:10 - Descarga actualizada: se añadió seguridad adicional para evitar el flood. 09/03/2015 a las 23:15 - Descarga actualizada: ahora se muestran todos los emoticonos y se pueden agregar desde el chat.  
      Más capturas

        Caja de emoticonos abierta.
       

      Lista de moderación.
       

      Eliminar mensajes (onmouseover).
       

      Suspender usuario (onmouseover).
       
       
      Características
      Color de nick aleatorio como en grupos de WhatsApp. Suspender usuario por nick y por mensaje. Ver/editar/eliminar usuarios suspendidos. Borrar mensajes individualmente o todos de un usuario. Agrupar mensajes seguidos del mismo usuario. Mensajes propios diferenciados (alineado a la derecha en verde) BBCodes: [b], [i], [u], [br], [url], [color]. Imágenes y URLs automáticas. Censuras globales. Emoticonos globales a través de censuras. Antiflood, suspende durante 2 horas. El antiflood no afecta al staff. Diseño separado para funcionar con cualquier plantilla. Agregar emoticonos desde el chat. Selector de emoticonos.  
      Descarga
       
      Para Risus 1.2 o superior: rchat_whatsapp_1.2.zip
       
       
      Instrucciones
       
      Subir el directorio "install" a la raíz y acceder desde el navegador a http://www.tuweb.com/install/index.php
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Patrocinador



  • ×