Jhonatan00_00 Posted April 24, 2014 Share Posted April 24, 2014 Buenas noches, estaba a punto de ir a registrar el diseño de la web al registro de la propiedad y haciendo las instantáneas de cada pantalla, etc, etc... de pronto enseño la web a otra persona por internet, se mete desde su ordenador y cuando me pasa una instantánea resulta que la ve mal, los botones se parten, hay cosas descolocadas etc. Se que hay cosas que se ven mal en segun que navegador como por ejemplo el border-radius, pero vamos... esto ya era rarísimo, ¿botones partidos?, es que ya no se ni como la estará viendo el cliente con la cantidad de navegadores que hay... Mi pregunta es: ¿Existen validadores que sean fiables que hagan que la web se vea igual en todos los navegadores?. Lo pregunto porque he estado leyendo algo sobre el reset.css o el normalice.css y parece ser que son archivos que metiendolos en nuestro servidor y cargándolos al principio de nuestra tienda cambian el código y hace que se vea bien... pero ni lo he probado ni se si funcionan y en las web donde he leido sobre esto avisan que hagamos copia de seguridad antes... Link to comment Share on other sites More sharing options...
jesa Posted April 25, 2014 Share Posted April 25, 2014 Pues como bien dices, hay algunos paquetes que solucionan algunos de estos problemas. Yo personalmente nunca los he usado osea que tampoco te puedo decir mucho. Al final todo depende de los atributos que puedas usar y quizás lo mejor es consultarlos antes de usarlos para no llevarte sorpresas. En google puedes encontrar muchas webs que te pueden dar información, por ejemplo esta: http://www.w3schools.com/ Link to comment Share on other sites More sharing options...
Jhonatan00_00 Posted April 25, 2014 Author Share Posted April 25, 2014 Hola Jesa!!, antes de abrir el tema estuve mirando por google pero no hay tanta información en español y es todo muy confuso, así que preferí preguntar aquí que seguro que alguien sabía del tema y me podía orientar mejor. ¿Si no has usado nunca esto, como sabes si tu web se ve bien?, ¿os conformais y esperais que los visitantes usen el navegador que vosotros queréis?... No se como no hacen un idioma estandar para todos los navegadores de verdad... Link to comment Share on other sites More sharing options...
jesa Posted April 25, 2014 Share Posted April 25, 2014 Hola Jesa!!, antes de abrir el tema estuve mirando por google pero no hay tanta información en español y es todo muy confuso, así que preferí preguntar aquí que seguro que alguien sabía del tema y me podía orientar mejor. ¿Si no has usado nunca esto, como sabes si tu web se ve bien?, ¿os conformais y esperais que los visitantes usen el navegador que vosotros queréis?... No se como no hacen un idioma estandar para todos los navegadores de verdad... Bueno, por suerte los programadores podemos vivir sin este tipo de "ayudas". Lo que has descubierto no es nuevo, por suerte o por desgracia esto es así, cada navegador funciona de una manera y soporta unas cosas. Ni siquiera el mismo navegador te mostrará igual la página dependiendo de la versión... Yo no tengo tiendas propias, simplemente las hago y evidentemente no espero a que me digan donde no se ve...te instalas los navegadores en tu pc y revisas todo. De todas formas, no es que las hojas de estilo sean diferentes para cada navegador, sino que hay cosas que hay que cambiar, esto ya depende de los conocimientos que tengamos. Si ya te metes con versiones responsive la diversión es mayor te lo puedo asegurar jeje. Al final esto es una cuestión de calidad. Creo que el año pasado leí un artículo que decía que mas o menos el 75% de las tiendas online que se abren se cierran al año. Esto lo podríamos extrapolar a las cuestiones que tú planteas y estaríamos hablando de la gente que instala una tienda y espera que le lluevan los pedidos y los que de verdad se lo curran y crean un servicio de calidad. Link to comment Share on other sites More sharing options...
Jhonatan00_00 Posted April 25, 2014 Author Share Posted April 25, 2014 Tienes razón en todo lo que has dicho pero al final uno no sabe ni si lo que está haciendo es de calidad porque esto es para volverse loco. ¡¡¿¿En serio tengo que instalarme todos los navegadores??!!. Yo se que existen validadores de código que te encuentran errores y te los corrigen como por ejemplo si escribes "tex" en lugar de "text" te lo dice. Existen compresores que te minimizan el código con abreviaturas como por ejemplo cuando pones "margin-top: 23px; margin-bottom: 23px; margin-left: 21px; margin-right: 21px;" cogen ese codigo y te ponen "margin: 23px 21px;" y punto, funciona igual, el pc lo lee mas rápido y funciona mejor. Existen muchas cosas así, ¿y no va a existir un validador que donde lea "border-radius: 40px;" te escriba el "-moz-border-radius: 40px;" para el navegador mozilla y así para todos?. Lo mas parecido es lo del reset.css pero no me fio porque da errores. Tenemos que encontrarlo porque esto seguro que existe... Un saludo. Link to comment Share on other sites More sharing options...
Jhonatan00_00 Posted April 25, 2014 Author Share Posted April 25, 2014 (edited) Ahora acabo de terminar de entender lo que hace el reset.css y su aplicación: http://www.davidbarredo.com/blog/reset-css Ahí nos explican que creando un archivo txt llamado reset.css por ejemplo y metiendo dentro el codigo que nos dicen conseguimos aplicar el reset. ¿Para que sirve?: Ayuda a que la web se vea igual en todos los navegadores, pero no en cuanto a formas si no a espacios y tamaños. Resetea los border y los pone en tu navegador a 0, resetea los tamaños y otras cosas y los pone al 100% y justo después tu web empieza a cargar los css que ya tenías y va espableciendo desde 0 los margenes etc etc... No me sirve para mucho... al final tendré que ir cosa por cosa mirando que narices es lo que falla y escribiendole el código para todos los navegadores, ¿que va a pasar?, que va a tardar mas tiempo en cargar porque es mas código en los css. Por cierto, en esa web dicen que metamos la línea que carga el reset.css justo antes de los otros css y el caso es que uno no sabe donde meterla, yo la he metido en el archivo index.php pero no tengo ni idea de si lo he hecho bien porque igual me carga algun css antes de otro archivo... desde luego que en el index.php no veo nada de ninguna carga de css y yo lo he metido ahí jajaja... Edited April 25, 2014 by Jhonatan00_00 (see edit history) Link to comment Share on other sites More sharing options...
jesa Posted April 25, 2014 Share Posted April 25, 2014 Solo piensa una cosa...si fuera tan sencillo como añadir un fichero css en nuestra web, tú crees que habría tantas webs que se descuadran y se ven mal? Como te decía antes, por suerte(mas trabajo para los programadores/diseñadores) o por desgracia esto es bastante más complejo que instalarte un CMS. Al final no se trata de meter un css mágico que haga todo por nosotros. El problema es que los navegadores no siguen un standard y de momento no se han puesto de acuerdo. A partir de ahí te encuentras atributos que para un navegador se llama de una manera y en otro de otra, pero es que hay parámetros que directamente no funcionan, por lo que no se puede aplicar. Otra cosa, si te das cuenta cuando compras un theme, te pone los navegadores para los que son compatibles. Si fuera tan sencillo no haría falta ponerlo y la gente desasrrollaría para todos sin problemas. Link to comment Share on other sites More sharing options...
Jhonatan00_00 Posted April 25, 2014 Author Share Posted April 25, 2014 (edited) Lo que no entiendo es por que los diseñadores y programadores web tenemos que pagar las consecuencias de que 4 empresas de @#~€ se quieran quedar con el monopolio y ser el "único" navegador porque eso no es así... ellas pierden. Me he informado un poco por google y lo que he encontrado sin ir mas lejos es que el W3C es el idioma de programación standar que se establece por para la programación web y que está creado por el World Wide Web Consortium (un consorcio INTERNACIONAL que se pasan la mayoría de empresas por la punta del ¬€~@) y que establece las directrices que hay que seguir para que una web se vea correctamente en cualquier parte del mundo sin importar sistema operativo, idioma ni navegador. ¿Sabéis que es lo que voy a hacer?, voy a validar todo el código de mi web con el validador de W3C y voy a corregir (si es que tiene errores) los errores que me detecte, para que mi web por lo menos esté 100% sujeta al standar W3C y que les den a los navegadores que no quieran hacer su trabajo bien. Eso si... Al entrar a mi web voy a poner un aviso que va a decir mas o menos: www.Tu-web.com cumple con todos los estandáres de programación web establecidos por el convenio internacional W3C, los cuales garantizan el correcto funcionamiento y calidad de la navegación web. No todos los navegadores cumplen con la normativa estandar W3C por lo que la visualización de la web en su PC podría no ser la correcta. Para garantizar la correcta visualización de la web recomendamos alguno de los siguientes navegadores: # # # Y en lugar de las almohadillas ahí les pongo los logos de cada navegador y si pinchan en uno se van a la pagina oficial para que se lo descarguen y tengan un navegador en condiciones, porque vaya... ¿Que conseguimos con esto?, que poco a poco la gente se conciencie de que no todos los navegadores son iguales, ya para empezar... porque hay algunos navegadores como el Internet Explorer que son una #~¬~% y de segundas que las empresas se pongan las pilas y empiecen a amoldar sus navegadores a el estandar W3C que es lo que tienen que hacer ya de una ~€¬ vez. De todas formas veo que algunos navegadores como por ejemplo el Internet Explorer (que lo acabo de poner fatal) se va amoldando un poco al estandar en sus ultimas versiones, porque yo tengo la versión del año la pera y entro a mi web y es que se ve cuadrada enteramente, no hay un borde redondeado, pero ni uno. Edited April 25, 2014 by Jhonatan00_00 (see edit history) Link to comment Share on other sites More sharing options...
PrestashopTrackglobe Posted April 25, 2014 Share Posted April 25, 2014 Como bien te han comentado cada navegador (especialmente IE) tiene sus cosas (pixel de mas en Chrome, bordes, clears, etc). La "teoría" dice que deberías cumplir las reglas según el W3C pero de ahí a cumplirlas hay un mundo. Creo que lo que te interesa es que se vea bien en Safari, Chrome, Firefox e IE hasta 8. Si alguien entra con un navegador antiguo o con resolución de 800x600 pues "mala suerte", ya lo actualizarán si quieres. En mi opinión no pondría carten ni nada de nada, todos (la mayoria) los programadores y diseñadores dejamos funcionando las webs según esos navegadores y a partir de ahí no se da soporte; es mas importante ahora que la web sea responsive que se visualize bien en IE6 (por ejemplo). Link to comment Share on other sites More sharing options...
PrestashopTrackglobe Posted April 25, 2014 Share Posted April 25, 2014 Otra de las cosas que se usa ahora para "evitar" o "suavizar" esto es Bootstrap que es en lo que se basa la plantilla por defecto de Prestashop 1.6 y las nuevas plataformas o webs. Tienen una serie de clases y código estandarizado que ayuda a que se vea correctamente en casi cualquier navegador sin "cambios dástricos". Por otro lado también ayuda a dejar la web responsive mas fácilmente. Link to comment Share on other sites More sharing options...
Jhonatan00_00 Posted April 25, 2014 Author Share Posted April 25, 2014 Gracias victor pero aún haciendo lo que me dices de que se vea bien en esos navegadores me gustaría poner la pantalla porque esto es la pescadilla que se muerde la cola y de esa forma si lo hiciesemos todos por lo menos cortariamos de raiz, concienciaríamos a los usuarios y poco a poco se dejaría de usar el navegador que no siguiese las normas, ¿que está pasando con Internet Explorer?, que todo el mundo habla mal de el... Pues igual pasaría con todos los navegadores que no siguiesen el W3C. De todas formas he buscado rápidamente en google y parece ser que no es para tanto esto de los navegadores, porque menos el Internet Explorer que hace lo que quiere (en las versiones mas antiguas) el resto casi todos cumplen mas o menos con el estandar y si no con 4 arreglillos se queda bien, pero vamos que ya me va a tocar meterle otra vez mano cuando estaba terminada. Yo tengo el Chrome y es desde el navegador que he realizado todo y claro... cuando me pasaron las instantáneas desde un Internet Explorer la cabeza se me iba jajajajaj... Voy a instalarme los navegadores que dices y a comprobar que se vea bien, se le hacen 4 apaños y listo. No cerréis el tema porque tendré que preguntaros cosas sobre esto mas adelante conforme me surjan dudas. Un saludo. Link to comment Share on other sites More sharing options...
PrestashopTrackglobe Posted April 25, 2014 Share Posted April 25, 2014 Hola de nuevo. Entiendo lo que dices pero colocar eso no serviría de nada puesto que nadie lo uso, y diles a las personas que no entienden nada de IE que lo actualicen si no saben abrir Google....no puede ser. Prueba con esos navegadores y no te mates mucho la cabeza y para otra vez parte del Bootstrap y tendrás menos quebraderos de cabeza. Cualquier cosa preguntas. Link to comment Share on other sites More sharing options...
Jhonatan00_00 Posted April 25, 2014 Author Share Posted April 25, 2014 Hola!!, estoy contento porque he instalado el navegador Safari y la pagina va de lujo jajaja, las únicas pegas son: - En las tablas hay una separación un poquito mas grande entre columnas, pero no tiene importancia porque son un par de pixeles. - El sonido que tengo con la etiqueta <audio> a la entrada de mi web y que funciona incluso en moviles con este navegador no suena. Solucionando lo del sonido me doy por satisfecho con el Safari y paso a instalar el siguiente navegador!!. He probado con un plugin javascript que se llama audio.min.js pero no me funciona. ¿Alguna idea?. Link to comment Share on other sites More sharing options...
PrestashopTrackglobe Posted April 25, 2014 Share Posted April 25, 2014 Buscando un poco en Google, aqui tienes un ejemplo: http://stackoverflow.com/questions/6333739/audio-tag-in-safari en la 1º respuesta para el tema del audio. Debo decir también que no me gustan personalmente las webs con audio, la 1 vez gustan pero el resto tiende a molestar. Link to comment Share on other sites More sharing options...
Jhonatan00_00 Posted April 25, 2014 Author Share Posted April 25, 2014 (edited) Muchas gracias, algo así es lo que he probado con el plugins audio.min.js, ¿donde tendría que meter ese código, en el archivo header.tpl, en el index.tpl o donde?, quizá sea que no lo este haciendo bien... El sonido es corto a modo de presentación. Edited April 25, 2014 by Jhonatan00_00 (see edit history) Link to comment Share on other sites More sharing options...
PrestashopTrackglobe Posted April 25, 2014 Share Posted April 25, 2014 Esa es la etiqueta que deberías colocar para poner tu audio, no se donde lo tienes puesto pero supongo que en el header.tpl (para algunos navegadores sonará el .mp3 y para otros el otro formato). Creo que pasa algo similar con los vídeos en HTML5. Link to comment Share on other sites More sharing options...
Jhonatan00_00 Posted April 25, 2014 Author Share Posted April 25, 2014 Copia me aquí la etiqueta porque lo que me has pasado es en ingles y creo que me estoy liando jajajaja... Lo que creó haber entendido es que tengo que cargar otro plugins js con el código que dan en ese enlace pero si intento traducir un poco creo que dicen que ese código no le sirve y esta buscando ayuda, ¿cual es la etiqueta?. Link to comment Share on other sites More sharing options...
PrestashopTrackglobe Posted April 25, 2014 Share Posted April 25, 2014 Este es el código del audio: <audio controls autoplay> <source src="track09.ogg" type="audio/ogg" /> <source src="track09.mp3" type="audio/mpeg" /> </audio> Link to comment Share on other sites More sharing options...
Jhonatan00_00 Posted April 25, 2014 Author Share Posted April 25, 2014 Lo he probado y no funciona, además me lo imaginaba porque es la etiqueta audio y esa etiqueta es la que uso ya y me funciona en el chrome y en los moviles, pero en el safari no. Para que funcione en la mayoría de navegadores necesitas plugins externos y tampoco lo he conseguido con el audio.min.js... mañana seguiré buscando. Un saludo. Link to comment Share on other sites More sharing options...
PrestashopTrackglobe Posted April 25, 2014 Share Posted April 25, 2014 Efectivamente es la etiqueta audio, así es como se debe colocar un audio en HTML. La forma que te he puesto antes lo que hace es cargar esos audios en ese orden, si el navegador no soporta ese formato intenta cargar el siguiente, etc y no se necesitan ningún plugin ni nada adicional. Link to comment Share on other sites More sharing options...
Jhonatan00_00 Posted April 25, 2014 Author Share Posted April 25, 2014 Pues creo que tienes razón y que tengo que meter el mismo archivo de audio en los formatos ogg, mp3 y wav así sea el navegador que sea reproducirá el que pueda. Link to comment Share on other sites More sharing options...
PrestashopTrackglobe Posted April 25, 2014 Share Posted April 25, 2014 Efectivamente creo que esa es la única opción, lo mismo pasa con las etiquetas de video por si te tocara usarlas. Link to comment Share on other sites More sharing options...
Jhonatan00_00 Posted April 25, 2014 Author Share Posted April 25, 2014 Nada que no... en todos los formatos y tampoco, no se ya que versión de safari me habré bajado pero funciona en los móviles y en Chrome por ahora, en el Safari no hay forma. He probado también con la etiqueta <embed pero tampoco funciona. Me voy a la cama ya porque son las 0:25 de la noche y como no descanse la cabeza me quedo peor de lo que estoy que llevo casi todo el día con la web entre unas cosas y otras. Hasta mañana. Link to comment Share on other sites More sharing options...
Jhonatan00_00 Posted April 26, 2014 Author Share Posted April 26, 2014 (edited) Esto es para flipar, no he conseguido que suene el sonido en todos los navegadores pero bueno... me he instalado el Firefox solo por ir viendo como funciona visualmente y en un principio parece el mejor navegador que hay porque la pagina adquiere fliudez, carga super rápido y se desliza por la pantalla casi como si fuese un simple archivo de imagen, no da tirones ni nada, parece que aumenta incluso la resolucion, pero no el tamaño de nada, me explico, las cosas se ven con mas nitidez, con mas brillo, es la caña, la web se ve incluso mas bonita, pero tiene bastantes problemas gordos. Firefox no entiende correctamente por ejemplo "margin: 0 auto;" que sirve para centrar objetos y los coloca donde quiere, se come elementos y no los muestra en pantalla, hay módulos que no funcionan como el de productos vistos o de interés (y esto ya no son cosas que haya podido yo programar mejor o peor a nivel de diseño, es que no funcionan modulos de prestashop). En fin... incluso he probado este módulo en la versión de Internet Explorer que tengo desde la cual se ve la web cuadrada y si funciona, pero en Firefox no... lo mas raro que he visto en la vida. Edited April 26, 2014 by Jhonatan00_00 (see edit history) Link to comment Share on other sites More sharing options...
Jhonatan00_00 Posted April 26, 2014 Author Share Posted April 26, 2014 No puedo logearme con mi cuenta en el Firefox!!, otro modulo que no funciona... he incluso actualizado la contraseña para ver si era eso y no, es que metes tu correo y tu clave y no entra. XD ¿A alguien le ha pasado esto?, ¿es normal?. Link to comment Share on other sites More sharing options...
Jhonatan00_00 Posted April 27, 2014 Author Share Posted April 27, 2014 Buenas tardes, ya he solucionado casi todos los problemas. Para quien necesite solucionar los mismos problemas pondré aquí las soluciones: - Los objetos no se ven en todas las webs centrados: Esto ocurre porque hemos usado margin: 0 auto; para centrarlos y en lugar de eso debemos de usar margin: 0 14%; o el porcentaje que necesitemos. También podemos usar px en lugar de % pero corres el riesgo de que algún navegador de unas dimensones diferentes al bloque que contiene el objeto que quieres centrar y no se vea centrado. - Algunos módulos como el de logearnos como usuario, el de productos vistos y el del carrito no funcionan: Esto ocurre cuando hemos cambiado el nombre a nuestro domino desde Prestashop en seo y url o cuando acabamos de instalar un nuevo navegador, el cual muy probablemente nos importe las cookies del navegador que teniamos antes y esto producta un fallo. Sea como fuere lo que hayamos hecho esto se soluciona borrando el historial y todas las cookies de nuestro navegador y veremos que al entrar de nuevo a nuestra pagina funcionan todos los modulos. Tengo que solucionar el tema del sonido, que no suena en todos los navegadores y un pequeño fallo en el menu de bienvenida que hace que no aparezca una palabra porque se sale de su bloque. Si alguien se presta a ayudarme abro la web un momento. Un saliudo!!. Link to comment Share on other sites More sharing options...
Jhonatan00_00 Posted May 8, 2014 Author Share Posted May 8, 2014 Buenos días, he seguido intentando conseguir que se reproduzca el sonido en el navegador Safari pero es imposible, ese navegador es un estilo a el Explorer solo que por lo menos si tiene funciones como border-radius (que el internet explorer no las trae hasta la versión 9) pero es imposible. Creo que la solución estaría en meterle algún reproductor javascript para que sonase el audio, pero lo veo difícil, ¿alguien ha conseguido reproducir sonidos en el Safari?. Link to comment Share on other sites More sharing options...
Jhonatan00_00 Posted June 23, 2014 Author Share Posted June 23, 2014 Buenas tardes compañeros!!. Ya tengo mi tienda en funcionamiento, desde ayer y aún no me ha dado tiempo ni ha invertir en publicidad, porque lo primero que he hecho ha sido ir a la papelería, imprimir unos documentos, comentar que tengo una tienda, entrar desde el Internet Explorer (del año la pera) y ver que mi tienda se ve fatal, que no se escucha el sonido de bienvenida y todo se ve cuadrado, que desastre. Me he calentado la cabeza para que se vea bien en tablet y móviles y se ve, en el Google Chome también, en el Mozilla Firefox también, en el Opera también se ve bien pero no suena el sonido de bienvenida solo eso y en el explorer en las últimas versiones funciona, pero ahora resulta que casi todo cristo tiene un PC del año de Matusalén con el Internet Explorer 2 o por ahí porque esto no es normal... ¿Podríais entrar ahora que la tengo en funcionamiento y probar con vuestros navegadores para ver si se os ve bien y decirme un poco cómo podría solucionar lo que no funcione correctamente?. Ya os digo que un punto de partida es el Google Chrome que es uno de los navegadores en los que se ve bien al 100%. Un saludo!!. Link to comment Share on other sites More sharing options...
Insipol Posted July 24, 2015 Share Posted July 24, 2015 Hola Me han instalado una Prestashop 1.6 La web es www.vinilos-camisetas.com Si mirais por un ordenador en Safari el logo de la cabecera se ve gigante, en Mozilla normal. Si se mira por un movil se ve bien. A la hora de pagar el logo de paypal se ve solo en google, en ambas versiones, tanto por movil como en ordenador. Y otro muchos errores con los que se me ha entregado esta web. Para más inrri el modulo de BBVA me desaparece. Si, desaparece. Ya me he comunicado con el desarrollador. A ver si me lo soluciona. LLevo así 10 días. Es super estresante. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now