Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Graphixx en 21 Mayo 2014, 01:06 am



Título: [AYUDA] Landing page responsive
Publicado por: Graphixx en 21 Mayo 2014, 01:06 am
Compañeros, tengo una landing page con solamente un logo y dos hipervinculos, como la implemento con responsive?
muchas gracias.


Título: Re: [AYUDA] Landing page responsive
Publicado por: #!drvy en 21 Mayo 2014, 09:40 am
Graphixx ? Eres tu ? xD

Muestra el código o sino mírate algún tutorial de media-queries.

Saludos


Título: Re: [AYUDA] Landing page responsive
Publicado por: Graphixx en 21 Mayo 2014, 10:57 am
Encontre esto pero vaya que es amplio el tema:
http://getbootstrap.com/
manual: http://librosweb.es/bootstrap_3/

Yo diria que si la landing page solo tiene un logo y ya con dos hipervinculos: english/español, de por si ya seria responsive, no ?

Por que el concepto de landing page se mal entiende hoy dia, como es posible que digan que estas son landing pages:
https://www.buylandingpagedesign.com/landing-page-design/beauty-product/
juazzzzz

Y encontre cosas muy locas como esta:
http://arvedui.coralixthemes.com/demos/index-violet.html

Pero por ningun lado un manual de como hacer responsive mi landing page, nisiquiera en ingles, estoy frito. 4am y yo aun buscando el santo grial jajaja.

La mayoria de compañeros que trabajan diseño web me sugirio implementarla con bootstrap, figuro aprender ese framework.


Título: Re: [AYUDA] Landing page responsive
Publicado por: Graphixx en 21 Mayo 2014, 11:18 am
¿Que es Bootstrap?

Últimamente muchos sitios web están basando su diseño en Bootstrap, ¿Qué es Bootstrap? Pues en pocas palabras es el framework de Twitter que permite crear interfaces web con CSS y javascript que adaptan la interfaz dependiendo del tamaño del dispositivo en el que se visualice de forma nativa, es decir, automáticamente se adapta al tamaño de un ordenador o de una Tablet sin que el usuario tenga que hacer nada, esto se denomina diseño adaptativo o Responsive Design y…está de moda.

Aun ofreciendo todas las posibilidades que ofrece Bootstrap a la hora de crear interfaces web, los diseños creados con Bootstrap son simples, limpios e intuitivos, esto les da agilidad a la hora de cargar y al adaptarse a otros dispositivos.

El Framework trae varios elementos con estilos predefinidos fáciles de configurar: Botones, Menus desplegables, Formularios incluyendo todos sus elementos e integración jQuery para ofrecer ventanas y tooltips dinámicos.

En su GitHub oficial puedes encontrar páginas con toda la información necesaria para utilizar Bootstrap en tus propios proyectos web, además también puedes encontrar ejemplos de utilización de este Framework..

Claramente el mejor ejemplo de utilización de Bootstrap es Twitter, pero existen otros sitios que implementan diseños responsive basados en este Framework como por ejemplo estos:

    Breezi: http://breezi.com/
    Stackideas: http://stackideas.com/
    iAcquire: http://www.iacquire.com/
    AudioMack: http://www.audiomack.com/
    LearnDot: http://www.learndot.com/

Existen muchos más sitios creados con Bootstrap, quizás donde más se les nota además de en el diseño responsive es en los botones.

(http://openwebcms.es/imagenes/bootstrap3.png)

Este es un ejemplo de las opciones que tiene Bootstrap, en este caso integrado en una plantilla para WordPress, ya que existen themes que implementan Bootstrap para los diferentes Gestores de Contenido del mercado: http://strappress.com/demo/shortcodes/

Sinceramente me encanta Bootstrap, y posiblemente este blog en unos meses cambie la plantilla a una desarrollada con este Framework para adaptar el diseño a las tecnologías actuales basadas en HTML5 y CSS3.

Si quieres más información acerca de Bootstrap puedes acceder a su GitHub: http://getbootstrap.com/2.3.2/

Fuente:
http://openwebcms.es/2013/que-es-bootstrap/


Sigo esperando sugerencias, no puedo creer que para hacer la landing page responsive toque meterla dentro de un framework, que tristeza...