(Solucionado) Adaptar web de fotografía a versión móvil

Iniciado por Pitufete, 11 Agosto 2014, 23:59 PM

0 Miembros y 7 Visitantes están viendo este tema.

Pitufete

Hola, no controlo el tema de programación, simplemente peleo mucho, miro por foros y la red para ir poco a poco defendiéndome y saber lo justito. Os cuento mi idea...

Estoy mirando para comprarme un web o plantilla, no se como lo llamaréis. Consiste en un diseño ya creado y a partir de ahí ir haciendo yo mis cosillas. La web según pone esta creada en HTML y CSS. Creo por lo que he trasteado con este tema que podría ir añadiendo mis datos poco a poco pero tengo una duda, bueno muchas jejejeje pero bueno poco a poco.

La web sería una galería fotográfica con menús, columnas y demás. Esta diseñada para versión PC y me gustaría que se adaptara a dispositivos móviles. Por lo que he leído por aquí y otras webs, parece que esto requiere ser programado en la creación de la propia web y por tanto lo descarto porque no sería capaz de hacerlo, a no ser que no requiera mucha modificación, pero bueno, tengo un plan b que podría servirme igualmente. La idea sería crear dentro de mi propia web otra línea o URL llamada por ejemplo "www.miweb.com/móvil" donde pondría un diseño tal que así http://i.imgur.com/nwMokPC.png
Se tocaría cada foto y se podría ver en grande. Mi pregunta es, como podría programar lo más sencillo posible ese acceso para que se adaptara a los dispositivos móviles y se vieran las fotos en pequeño y al tocar se hicieran zoom?

Espero que no sea muy complicado sino...jejejeje

Gracias por vuestra ayuda.

Pitufete


peib0l

Para el diseño adaptativo es simplemente CSS3 experiencia y practica en mi opinion el uso de plantillas en muchas ocasiones es una perdida de tiempo pues te vas a pegar mas tiempo buscando las cosas que "programando" el responsive.

Para lo de la ampliación de la imagen.. hay dos métodos
El primero es el mas cutre pero el mas rápido y es.. no hacer nada, dejar que el dispositivo haga zoom solo cuando tu haces doble "click" o como sea en el dispositivo.
La otra opción es aprender a programar en javascript y usar JQuery lo cual a día de hoy es imprescindible, te costara mas pero el control que te da y el resultado merece la pena.

engel lex

Cita de: peib0l en 13 Agosto 2014, 14:22 PM
Para el diseño adaptativo es simplemente CSS3 experiencia y practica en mi opinion el uso de plantillas en muchas ocasiones es una perdida de tiempo pues te vas a pegar mas tiempo buscando las cosas que "programando" el responsive.

Para lo de la ampliación de la imagen.. hay dos métodos
El primero es el mas cutre pero el mas rápido y es.. no hacer nada, dejar que el dispositivo haga zoom solo cuando tu haces doble "click" o como sea en el dispositivo.
La otra opción es aprender a programar en javascript y usar JQuery lo cual a día de hoy es imprescindible, te costara mas pero el control que te da y el resultado merece la pena.

muy de acuerdo

básicamente quieres hacer programación web sin esforzarte por programar web... dudo que consigas mucho... especialmente un un foro donde la mayor parte de los que responden programan y opinan que lo que tu hablas "no es tan complicado"
El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.

Pitufete

Bueno, ya me he comprado una y he empezado a trastear con el HTML. "Aparentemente" tengo localizado donde debo meter cada imagen, miniaturas y demás. Ahora me falta adaptar mis fotos a cada tamaño y editar todo el texto. Creo que puede ser una alternativa a mi nulo conocimiento en el tema. Total han sido unos $ lo que me ha costado! no he arriesgado mucho y no me puedo permitir hacer una desde cero con mi nivel en el tema. Si decidiera hacerla desde cero, estaría todo el día aquí preguntando y mareandoos seguro jejejeeje.

No se, tal cual esta creada al abrirla desde el teléfono o tablet no se adapta, creo que es un diseño de los normales, de los que no están programados para adaptarse. Esos modelos eran más caros y no me quería arriesgar.

Ahora me gustaría poder hacer lo que comentó en mi primer post, el adaptar simplemente las fotos a versión de dispositivos. Se qué es hacer dos veces lo mismo pero para uno que no sabe como yo quizá sea la alternativa más rápida. Lo que no se es como poder crear eso, lo eh visto en multitud de webs pero....
Gracias.

basickdagger

es muy dificil que alguien pueda ayudarte a tu problema ya que por lo visto el hecho de q te pasaran un código no serviría de mucho si no sabes donde colocarlo...

podrías utilizar el diseño responsivo por CSS...

o crear otra pagina y con  un script detectar si es móvil para que te muestre otra pagina...

si colocas una imagen con el 100% esta tomará todo el ancho de la pantalla sea pc o móvil, aunque se verá bastante feita... xD


pero en todos los casos vas a necesitar investigar bastante, vamos.. no es como copiar y pegar un codigo y asunto arreglado...

saludos

EFEX

Ya te respondieron antes sobre el uso del diseño responsivo y que se ayuda mientras sea valido, una pregunta directa como mostrar parte del codigo que de duda.. es tu caso no es volcar codigo y ya está, segun lo que querés hacer el servidor debe omitir quien esta navegando con celular para redireccionarlos al sitio mipagina.com/mobile donde ya tienes un diseño adaptado a mobiles, en esos casos es preparar el diseño del mismo sitio que soporte las distintas resoluciones para cada dispositivo.. desktop, smartphones, tablets. La otra forma como ya te dijeron es aprender diseño responsivo donde el mismo sitio se adapta a la resolucion del dispositivo, pero tenes que tener un previo conocimiento de css y como dejaste en claro que no tienes conocimientos en el tema quedandote dos opciones..

1-  APRENDER.
2- Comprar el diseño que se adapta par a moviles.
GITHUB 

Pitufete

Bueno....por lo menos lo eh intentado y algo he sacado positivo...que debo irme a algo sencillo y no complicarme sino acabare abandonando la web.

Igualmente agradezco vuestros consejos y ayuda. Muchas gracias.

peib0l

#8
Intenta hacerlo con CSS pero al comprar la platilla te vas a volver loco..

Actualmente implica conocer tantas tecnologías (HTML5, CSS3, AJAX, CANVAS, PHP, javascript, Jquery....) que si no tienes una base solida y un nivel medio alto de cada una de ellas solo vas a hacer chapuzas, perder tu tiempo.

De todas formas si te quieres meter en el desarrollo  web y no quieres empezar desde abajo, desde 0, es mejor que te quedes en casa llorando..


@media screen and (max-width:aqui_tamaño_para_telefonos){

}

Pitufete

Cita de: peib0l en 17 Agosto 2014, 12:01 PM
Intenta hacerlo con CSS pero al comprar la platilla te vas a volver loco..

Actualmente implica conocer tantas tecnologías (HTML5, CSS3, AJAX, CANVAS, PHP, javascript, Jquery....) que si no tienes una base solida y un nivel medio alto de cada una de ellas solo vas a hacer chapuzas, perder tu tiempo.

De todas formas si te quieres meter en el desarrollo  web y no quieres empezar desde abajo, desde 0, es mejor que te quedes en casa llorando..


@media screen and (max-width:aqui_tamaño_para_telefonos){

}


Claro qué me gustaría saber más de este tema pero...no se puede saber de todo en la vida jejeje, simplemente se "cuatro" cosillas muy muy básicas. A partir de ahí probar y probar, leer y leer....

Este código que me dejas, para que es? Qué función tiene y donde lo coloco? Entiendo que puede ser para adaptar algo de la web a dispositivos móviles, no?

Gracias.