¿Diseñar para web page y moviles es el mismo trabajo?
7 seguidores
La pregunta es: Diseñar para una web page es lo mismo que para móviles y tosh. Me hago esta pregunta por que con html 5 se crea un diseño Responsive Design que es el termino que se usa para las paginas que se ajustan a las móviles, aunque antes maquetaba en html3 con por-cientos en las tablas y se ajustaba.
Que es todo esto de html5. se ajustan a las móviles solo por se diseñadas con div sectio fooder article ect..... ?
se tiene que hacer un diseño en psd para las móviles como se hace para la web page o se acomoda todo por ser html5?
danideu
Hola @indentient
Aqui tienes PSD con las rejillas de BootStrap para descargarlo y modificarlo a tu antojo con tus diseños y después pasarlo con el framework BootStrap a web es bastante sencillo una vez lo controlas, que por ejemplo en librosweb tienes un muy bueno y completo tutorial --> http://librosweb.es/bootstrap_3/
Alo
Para presentar el boceto al cliente yo siempre hago un diseño para monitores "grandes" con resoluciones de 1024 por ejempo y otro para móviles, creo que es importante que el cliente vea como se verá en cada caso antes de empezar a programar, en algunos casos conviene obviar algunos contenidos para la visualización en móviles por motivos de espacio de pantalla o bien redistribuir y reformatear otros, eso mediante media queries...
En otros casos el proceso se puede hacer al revés, primero diseñar para móviles y luego remaquetar para pantallas mas grandes...
Usuario desconocido
Cuando haces una web responsive, haces el codigo pensando en un target concreto (1024px, 1200px, "mobile first", etc) y luego añades una serie de condiciones que modifican el codigo en determinados casos (si la pantalla es de tal tamaño, si el dispositivo es en blanco y negro (como un e-reader), etc)
Bootstrap como sus propios creadores dicen esta enfocado más a hacer prototipos que a un desarrollo final. Si lo usas tal cual luego tienes un css inmenso y lleno de cosas inutiles que es complejo modificar.
Yo lo uso para producción a veces, pero de dos formas que en fondo son la misma:
*Construyo el sitio en bootstrap y luego le paso un limpiador de css que me deja solo las partes que utilizo (quiza solo la de los botones pero no la de maquetación). Para limpiar el css hay herramientas web, pluguins para el navegador, etc. Si usas un limpiador en un sitio dinamico luego pueden haber problemas.
* Hago el sitio a mi rollo y copio de bootstrap (via inspector) solo los cachos de css que me interesan.
De todas formas tienes el problema de muchos autodidactas, que vas aprendiendo cosas de aqui y alla y luego tienes lagunas enormes en conceptos de base. A veces preguntas cosas muy sencillas sobre conceptos complejos que en teoria ya deberias de saber la respuesta si los estas usando. Como lo de "se ajustan a las móviles solo por se diseñadas con div sectio fooder article ect.",
"footer", "section", etc son convenciones. Un pie funciona igual lo llames "footer", "piepagina" o "musaraña", mientras lo pongas en el codigo.
Mi consejo es que sigas un curso minimo de maquetación html y css que parta de cero. En internet hay muchisimo material gratuito, o pillate un libro, y lo sigues desde el principio hasta el final, y luego te sera mucho más facil seguir aprendiendo por tu cuenta y te sorprenderas de lo sencillo que es todo en el fondo.
markosci
Los pasos que yo sigo es hacerme una idea de la web (en este caso es lo que yo desarrollo) diseñandola quizás a tamaños 1024 (partiendo digamos de la resolución de un iPad) a partir de ahí pero también, aunque luego haga responsive design, creo un diseño de cómo quiero que se vea en un smartphone...Parece una pérdida de tiempo (de hecho a mí me pasaba al inicio...) pero luego te ayuda a hacer un código más limpio y simple y a la hora de construirla, teniendo en mente siempre el diseño móvil @indendient :) :)
A mi es una práctica que me sirve de mucho, lo mismo te funciona a tí también..aunque cada uno a la hora de trabajar y hacer cosas somos un mundo jajaja.
Saludos!
garciasanchezdani
Hola @thunder está claro que está perdido....pero para eso están los foros, para preguntar y aprender de los demás...con ese comentario no le aportas mucho la verdad.....
Claro @indendient , llevas razón, bootstrap es una librería que te aporta unos elementos ya definidos, que son los que puedes ver en la web de bootstrap, en los ejemplos. Te facilitan mucho la tarea...Por otro lado, para un primer contacto con el cliente, en plan de mostrarle unos bocetos de lo que sería su proyecto, mira balsamiq mockups que sirve para entregar al cliente una primera muestra de lo que sería su web.
Saludos y suerte, Daniel
Usuario desconocido
Qué andas demasiado perdido. Deberías empezar por lo básico. Da la sensación de que no tienes claros conceptos muy muy elementales.
indendient
Esto de bootstrap se trata de codigos css ya hechos verdad garciasanchezdani. si es asi tengo un problema, por que para vender mis diseños tengo primero que diseñar en PSD para que el cliente vea los resultados de lo que seria su pagina. Que opináis ???
garciasanchezdani
Hola @indendient , hay un framework llamado Bootstrap, desarrollado por twitter, el cual es una pasada, para maquetar una web que se adapte a todas las resoluciones.
Échale un vistazo que es muy cómodo y tiene muchos complementos.
Saludos,
indendient
por lo que veo es lo mismo pero teniendo en cuenta algunas cosas el código se va acomodando mientras se achica la pantalla, cada pantalla tiene un tamaño diferente.....
estoy un poco perdido tengo que pasar a la practica. gracias por sus comentarios.
kurukatastudios
En parte sí. Te lo explico brevemente. De un tiempo a esta parte, los sistemas operativos de los dispositivos móviles son capaces de interpretar el DOM del HTML5. Esto te permite mostrar en los dispositivos unos visuales, basándote en CSS3, que sacan provecho de diseños responsive.
Esto quiere decir que puedes hacer los visuales en HTML5+CSS3 y esperar que tu smartphone lo muestre de una manera similar. Para que te hagas una idea, el html5 tiene soporte parcial en Android 4.3. por debajo de esa versión, no es compatible.
Sin embargo, tienes que hilar fino en algunas ocasiones, con ciertas propiedades de CSS3. En ciertas versiones puntuales de Android, tal como sucede para el caso de los exploradores web de sobremesa, hay cierta cantidad de propiedades de CSS3 no soportadas (como las métricas basadas en las unidades vh o vw, entre numerosas cosas más).
Te aconsejo que en tus creaciones tengas a mano esta web: http://caniuse.com/
Por ejemplo, echa un vistazo a la compatibilidad de las unidades vw (http://caniuse.com/#search=vw) o del html5 en sí http://caniuse.com/#search=html5.
Luego está la creación de aplicaciones móviles, basadas en interfaces HTML5+CSS3, gracias a metaframeworks como Phonegap o Titanium SDK. Pero imagino que no te refieres a crear una aplicación al uso, ¿verdad?
Saludos!
feliper
Hola,
diseñar para distintos dispositivos es lo mismo, pero no se hace sólo,
html5 es la versión actual de html3, es decir lo mismo pero con algunas novedades,
Section, Footer, Article sirven para ordenar el contenido, por sí solos no se adaptan a distintos tamaños.
Diseñar para distintos tamaños de pantalla es lo que se llama Responsive Design, tienes que hacer el diseño de cada una de las vistas y después hacer el html y css para cada una de las vistas,
aqui puedes ver algunos ejemplos
http://mediaqueri.es/
saludos !!