Hvordan renske opp Google Maps-kode?

Dag Frogner

Dag Frogner

Supermedlem
Nå skjønner jeg enda mindre enn tidligere. La inn koden til adeneo på jobb i natt og det fungerte veldig bra.

Når jeg nå sitter å jobber med siden hjemme, ser jeg at de samme feilene er der igjen. Kopierer inn teksten igjen, men nå har jeg fortsatt 72 feil når jeg validerer. :(

adeneo: om du har gode tips til hvordan jeg enklest mulig optimaliserer siden mtp fart (kombinere filer bl.a) tar jeg gjerne i mot det. :)
 
adeneo

adeneo

Medlem
Sjekket linken din i full fart på W3C, og den validerer nå?

CSS filene kan du bare slå sammen ved å klippe og lime alt inn i en fil.

Javascript filene er nok litt verre å slå sammen hvis du ikke har litt kunnskap om javascript, men det er mulig det er noen sider på nettet som gjør slikt og legger til korrekte avslutninger osv.

Det du vil tjene mest på er sannsynligvis å legge til noe kode i .htaccess slik at du setter expires headers på filene dine slik at de lagres i cachen i nettleseren til brukerene av siden din, aktiverer gzip hvis det er tilgjengelig osv.

Nå er det litt vanskelig når jeg ikke vet hva som er installert på webserveren du bruker, men du kan prøve å legge til noe slikt for eksempel.
Bare å sette inn under det innholdet som allerede er der:

HTML: 
Header unset Pragma
FileETag None
Header unset ETag

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png A15552000
ExpiresByType text/javascript A15552000
ExpiresByType text/css A15552000
</IfModule>

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "Thu, 15 Apr 2015 20:00:00 GMT"
</FilesMatch>
 
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "public"
Header set Expires "Thu, 15 Apr 2015 20:00:00 GMT"
</FilesMatch>


ExpiresActive On
ExpiresDefault A604800
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A2592000
ExpiresByType text/html A300


<IfModule mod_gzip.c>
    mod_gzip_on       Yes
    mod_gzip_dechunk  Yes
    mod_gzip_item_include file      \.(html?|txt|css|js|php|ico|swf|pl)$
    mod_gzip_item_include handler   ^cgi-script$
    mod_gzip_item_include mime      ^text/.*
    mod_gzip_item_include mime      ^application/x-javascript.*
    mod_gzip_item_exclude mime      ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

<IfModule mod_deflate.c>
<FilesMatch "\.(js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>



AddEncoding x-compress .Z
AddEncoding x-gzip .gz .tgz
 
Dag Frogner

Dag Frogner

Supermedlem
Merkelig, hvis jeg høyreklikker i Opera og velger "Kontroller kildekode" sendes jeg til valideringen og får de samme 72 feilene som tidligere. Men hvis jeg limer inn url`en uten å gå via Opera, får jeg "passed"...

Ang css:

Themet jeg bruker har også et eget "child-theme" og i denne mappen finnes kun et par filer, hvorav style.css hvor veldig mye av css-biten bestemmes. Dette fungerer da slik at når themet skal oppdateres, vil style.css i denne mappen overkjøre den opprinnelige style.css som ligger i hovedfolderen til themet, slik at utseende blir det samme når jeg oppdaterer.

Derfor vil jeg ikke tro at jeg bare kan hive inn alle paramenter i style.css som ligger i child-mappen også er det greit?

Webserveren jeg bruker er et vanlig webhotel hos Domeneshop om det gjør deg noe klokere. :)
 
Dag Frogner

Dag Frogner

Supermedlem
ctrl + F5 gjør ingenting i Opera.

Faktisk har dette skjedd flere ganger før også, når jeg har gjort endringer på nettsiden. Må ofte slette all historikk og starte nettleseren på nytt for at den skal få det med seg. Det er ikke alltid sånn, men litt for ofte...
 
Dag Frogner

Dag Frogner

Supermedlem
Ja, lurer litt på det. Nå bruker jeg jo FF med FB når jeg jobber med nettsider, men er veldig glad i Opera og spesielt funksjonen at man ser to gule rammer rundt feltene brukernavn/passord der dette er lagre og kan klikke ctrl+enter for å automatisk logge inn.

Kanskje FF har en lignende funksjon/plugin hvor jeg kan bruke de samme knappene?
 
adeneo

adeneo

Medlem
Vet ikke helt hvorfor det blir slik, men det har vært en del problemer med object, iframe og med Google maps generelt på iPad.

Nå har ikke jeg en iPad tilgjengelig så jeg får ikke sett hvordan det ser ut, men dersom kartet vises slik det skal, men bare på feil sted, ville jeg tro at det må posisjoneres bedre.

Se i filen: frognermedia/wp-content/themes/alyeska-child/style.css

Posisjoneringen for kartet er i dag:

HTML: 
#kart{
margin-left: 495px;
width: 400px;
}

.iframe, object{
margin: 0 auto;
}

Du må nok prøve deg litt frem, sett avstanden til left og top i pixler istedet for å bare bruke en margin, eller sett "fastere" posisjonering, i CSS er "position:relative" standard med mindre noe annet er satt, slik at du kan prøve å sette absolute i stedet, men det kan gi andre problemer igjen osv. så det må rett slett prøves litt forskjellig til posisjonen blir lik på iOS/Safari på iPad som i andre nettlesere.

Du kan forøvrig sette CSS kun for iPad ved å gjøre følgende:
HTML: 
@media only screen and (device-width: 768px) {
  /* Sett inn CSS kun for iPad her, brukes i både liggende/stående */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* Sett inn CSS som kun brukes på iPad når stående */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* Sett inn CSS som kun brukes på iPad når liggende */
}

Det er også mulig å bruke javascript til dette, men det skal fungere bare med CSS, men CSS'en vil sannsynligvis ikke validere, men hvem gidder å validere CSS'en sin uansett.
Du kan vel også gjøre omtrent det samme i "link rel=" og laste inn en egen css fil for iPad, men det ville bare vært nok en forespørsel til serveren, som er noe vi helst vil unngå!

Man er jo da også litt avhengig av å ha en iPad å teste med dersom man setter egen CSS kun for iPad, noe jeg som sagt ikke har så jeg får ikke sett noe særlig mer på det, med mindre noen sender meg en iPad da :D
 
Sist redigert:
Dag Frogner

Dag Frogner

Supermedlem
Jeg har allerede prøvd med "position: relative" og "absolute" uten hell og også margin-left/right/top/bottom og også bare left/right/top/bottom uten at det heller hjelper.

Ang iPad så finnes denne siden som får mye skryt mange steder: iPad Peek

Der ser det bra ut, men på min iPhone ser det fortsatt ikke bra ut. :(
 
adeneo

adeneo

Medlem
Hvis den gamle koden som ikke validerer fungerer riktig på iPhone kan vi prøve noe lureri.

Sett inn dette et eller annet sted i filene med kart:

HTML: 
<script type="text/javascript">
    $(document).ready(function() {
    
    var GammelKode="sett inn hele den gamle koden her";
    
    function BrukeriPhone(){
    return (
        (navigator.platform.indexOf("iPhone") != -1) ||
        (navigator.platform.indexOf("iPod") != -1)
            );
    }
    if(BrukeriPhone()){
    $("#kart").html(GammelKode);
    }
    
    });
</script>

Den bytter ut den nye koden i #kart div'en med den gamle koden dersom den besøkende bruker iPhone eller iPod, dersom det også gjelder iPad, kan den også legges til.

Dette skjer mens DOM treet konstrueres på Iphone'n, slik at det skal ikke påvirke valideringen.

OBS: du må sette inn hele den koden du fikk av google der hvor det står "sett inn hele den gamle koden her", men la " stå igjen, fjern kun teksten og se om det virker, har ikke rukket å teste det???
 
Sist redigert:
Dag Frogner

Dag Frogner

Supermedlem
Da har jeg fått testet og kartet vises riktig på vanlig nettleser (og validerer) men på min iPhone ser det fortsatt ikke bra ut. Kartet kommer oppe i venstre hjørnet.

Slik ble koden etter at jeg brukte ditt forslag:

Kode: 
<div id="kart"> 
<object id="map" type="text/html" data="http://maps.google.no/maps?f=q&amp;source=s_q&amp;hl=no&amp;geocode=&amp;q=asalund+48&amp;aq=&amp;sll=61.143235,9.09668&amp;sspn=17.209315,67.631836&amp;ie=UTF8&amp;hq=&amp;hnear=Asalund+48,+3944+Porsgrunn,+Telemark&amp;z=14&amp;ll=59.113529,9.698028&amp;output=embed&amp;iwloc=near" style="width:400px;height:250px;">
</object><!--[if IE ]>
<script type="text/javascript">(function(){var o=document.getElementById('map');var i=document.createElement('iframe');i.setAttribute('src',o.getAttribute('data'));i.style.width=o.style.width;i.style.height=o.style.height;o.parentNode.replaceChild(i,o);})();</script>
<![endif]--><br /><small><a href="http://maps.google.no/maps?f=q&amp;source=embed&amp;hl=no&amp;geocode=&amp;q=asalund+48&amp;aq=&amp;sll=61.143235,9.09668&amp;sspn=17.209315,67.631836&amp;ie=UTF8&amp;hq=&amp;hnear=Asalund+48,+3944+Porsgrunn,+Telemark&amp;z=14&amp;ll=59.113529,9.698028&amp;iwloc=near" style="color:#474747;text-align:leftr">Vis større kart</a></small> 
<script type="text/javascript">
    $(document).ready(function() {
    var GammelKode="<object id="map" type="text/html" data="http://maps.google.no/maps?f=q&amp;source=s_q&amp;hl=no&amp;geocode=&amp;q=asalund+48&amp;aq=&amp;sll=61.143235,9.09668&amp;sspn=17.209315,67.631836&amp;ie=UTF8&amp;hq=&amp;hnear=Asalund+48,+3944+Porsgrunn,+Telemark&amp;z=14&amp;ll=59.113529,9.698028&amp;output=embed&amp;iwloc=near" style="width:400px;height:250px;">
</object><!--[if IE ]>
<script type="text/javascript">(function(){var o=document.getElementById('map');var i=document.createElement('iframe');i.setAttribute('src',o.getAttribute('data'));i.style.width=o.style.width;i.style.height=o.style.height;o.parentNode.replaceChild(i,o);})();</script>
<![endif]--><br /><small><a href="http://maps.google.no/maps?f=q&amp;source=embed&amp;hl=no&amp;geocode=&amp;q=asalund+48&amp;aq=&amp;sll=61.143235,9.09668&amp;sspn=17.209315,67.631836&amp;ie=UTF8&amp;hq=&amp;hnear=Asalund+48,+3944+Porsgrunn,+Telemark&amp;z=14&amp;ll=59.113529,9.698028&amp;iwloc=near" style="color:#474747;text-align:leftr">Vis større kart</a></small> ";
    
    function BrukeriPhone(){
    return (
        (navigator.platform.indexOf("iPhone") != -1) ||
        (navigator.platform.indexOf("iPod") != -1)
            );
    }
    if(BrukeriPhone()){
    $("#kart").html(GammelKode);
    }
    });
</script>
</div>
 
Du må logge inn eller registrere deg for å svare her.
Topp