Gå til innhold

Hvordan effektivisere en php-kode

ilpostino

Anbefalte innlegg

ilpostino

ilpostino

Skrevet
Skrevet (endret)

Jeg holder på å fikse ny kode til en side og sliter litt med å gjøre php-kode "sexy". 

 

1) Jeg har segmentert CSS-koden for mobile enheter og datamaskiner i to forskjellige filer. Ser denne delingen og ut? Jegvet det er et "hull" i oppløsingen men det er noe jeg fikser etterhvert.

2) Jeg har en PHP-kode som plasserer menyen litt forskjellig avhengig av om vedkommende kommer fra en mobil enhet eller ikke. Ser dette ok ut? Jeg ser for meg jeg kunne gjort den koden bedre men er litt usikker. 

 

Her er index-filen

 

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Overskrift</title>
<link rel="stylesheet" type="text/css" media="only screen and (min-device-width: 1024px)" href="display.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 640px)" href="display_mobile.css" />
</head><body>
 
<?php
require_once("var.inc.php"); // Fil med diverse funksjoner som brukes på siden.
$overskrift = "Welcome to lensspecs.com";
 
if ($iphone || $android || $palmpre || $ipod || $berry == true) { 
echo "<nav><ul>";
menu($menu);
echo "</ul></nav>";
echo "<div class='overskrift'><h1>" . $overskrift . "</h1></div>";
}
 
if ($iphone || $android || $palmpre || $ipod || $berry == false) { 
echo "<div class='overskrift'><h1>" . $overskrift . "</h1></div>";
echo "<nav><ul>";
menu($menu);
echo "</ul></nav>";
}
?>
 
<article class='vanlig'>
...
(resten av teksten på siden kommer her)



Her er koden for var.inc.php


$domain_name = $_SERVER['SERVER_NAME'];
 
//Denne funksjonen gir output for menyen
function menu($menu,$index='Parent') {
foreach($menu[$index] as $k => $v){
echo "<li class=\"menu_li\"><a href='$v'>$k</a></li>";
if(is_array($menu[$k])){
                echo "<ul class=\"menu_ul\">";
                menu($menu,$k);
                echo '</ul>';
            }
}
}
 
// Denne arrayen inneholder emnyelementene
$menu = array();
$menu["Parent"]["home"] = "http://$domain_name";
$menu["home"]["contact me"] = "";
$menu["Parent"]["pages"] = "";
$menu["pages"]["software"] = "";
$menu["pages"]["accessories"] = "";
$menu["Parent"]["external sites"] = "";
$menu["external sites"]["side1"]  = "url1";
$menu["external sites"]["side2"]  = "url2";
 
 
// Dette brukes for å finne ut om det er en mobil enhet som besøker siden
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");

 
Her er CSS-filen for datamaskiner

<style type="text/css">
/* Dette viser hvor fonten ligger */
@font-face {
font-family: FiraSans;
src: url(FiraSans-Book.otf);    
}
    
/* Dette skjuler kanten rundt bilder som er lenker */
img {
    border=0;
}
 
/* Dette definerer valg for hele siden */
body {
    color:#FFFFFF;
    background-color:#363636;
    font-weight:normal;
font-size:1em;
    left-align:5px;
font-family: FiraSans;
font-size:1.25em;
}
 
/* Dette formaterer kolonnen for menyen */
nav{
border-radius: 25px;
padding:10px;
background-color:#000000;
float:left;
margin-right:15px;
margin-bottom:15px;
}
 
/* Dette formaterer brødteksten */
article.vanlig {
    float:center;
font-size:1em;
width:1024px;
margin-left:15px;
margin-left:240px;
}
 
/* Dette lager en container øverst på siden til overskriften */
div.overskrift {
    float:center;
clear:both;
}
 
/* Dette formaterer overskriften på sidene */
h1 {
    font-size:2em;
margin-left:530px;
float:center;
    clear:both;
}
 
/* Dette formaterer lenkene */
A, A:Visited, A:Active {
color:#c8c4c4;
text-decoration:none;
display: inline-block;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;  
}
 
/* Dette definerer hva som skjer med lenkene når en holder musen over */
A:Hover {
text-shadow: -1px 1px 5px #03c, 1px -1px 5px #03c;
color:#transparent;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
 
/* Dette formaterer footeren på sidene */
footer {
float:center;
margin-left:550px;
    clear:both;
padding-top:50px;
}
</style>

Endret av ilpostino
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
etse

etse

Skrevet
Skrevet

Jeg ville ikke brukt PHP til å plassere ting på ulike steder basert på type enhet - det er bare rot til problemer. Hva om nettleseren brukeren har ikke sender rett metadata slik at du tror det er desktop-enhet men oppløsningen er lav?

 

Ville heller satset på å gjøre websiden fullstendig responsiv, og heller flyttet menyen med CSS. 

Lenke til kommentar
etse

etse

Skrevet
Skrevet

Finnes mange måter å flytte ting på, alt litt avhengig av hvordan HTMLen er bygd opp. Men nøkkelpunkt 1 når det kommer til responsiv webdesign er å bygge god og strukturert HTML som er lett å manipulere med CSS.

 

Og om det absolutt ikke er mulig å flytte den med CSS på en fornuftig måte i ditt tilfelle, synes jeg det er bedre å heller skjule 1 meny og vise en annen gjennom CSS - og så bytte hvilken du viser ved bestemt oppløsning.

Lenke til kommentar
ilpostino

ilpostino

Skrevet
  • Forfatter
Skrevet

Hvilken CSS-fil som skal brukes tror jeg velges riktig ved å bruke disse: 
 

<link rel="stylesheet" type="text/css" media="only screen and (min-device-width: 1024px)" href="display.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 640px)" href="display_mobile.css" />
 
I mobilutgaven vil jeg gjerne ha menyen helt øverst på skjermen istedenfor i en kolonne til venstre for å spare plass i bredden på små skjermer. Jeg får lese meg litt opp på responsive design. Frem til nå har jeg brukt CSS1 og litt CSS2 så det er mye nytt i CSS3 som er ganske snasent. 
Lenke til kommentar
Emancipate

Emancipate

Skrevet
Skrevet (endret)

Beklager, jeg skjønte ikke problemet først. IMO så bør du ikke bruke PHP til dette. Hvis du ikke får det til med css, bruk javascript til å flytte elementet. Det har med å gjøre at skjermstørrelse og user agent ikke nødvendigvis er det samme, og at skjermstørrelsen kan endres etter at siden er lastet (når bruker gjør vinduet mindre, f.eks.). I hvert fall hvis du bruker min-width istedenfor device-width. Noe jeg mener du bør gjøre.

 

I ditt tilfelle har du lagt opp til et kaos, fordi du har fire kombinasjoner:

* Desktop-meny + Desktop-css

* Desktop-meny + Mobil-css

* Mobil-meny + Desktop-css

* Mobil-meny + Mobil-css

 

Det er tross alt ikke noen garanti for at android-enheter har lavere oppløsning enn en PC. Forhindre kaos ved å gjøre alt i nettleseren.

 

Om du vil ha mer hjelp med css anbefaler jeg å legge ut nedstrippet (altså uten bogus som lenkefarge), men komplett kode (som funker uten php) i code tags. Du har strippet ned ved å klippe bort deler så koden ikke blir komplett (mangler slutten av fila), da er det veldig lite fristende å hjelpe, dessverre.

 

 

 

Det er ikke imidlertid umulig at det enkleste for å bytte plass på overskriften rett og slett er å flytte den med javascript.

Endret av Emancipate
Lenke til kommentar
ilpostino

ilpostino

Skrevet
  • Forfatter
Skrevet (endret)

Det er ikke til å se bort ifra at jeg trenger en kraftig oppdatering på HTML/CSS for mobile enheter. Føles litt som om jeg sitter i steinalederen og ikke har peiling på hvordan det gjøres.

 

I ditt tilfelle har du lagt opp til et kaos, fordi du har fire kombinasjoner:
* Desktop-meny + Desktop-css
* Desktop-meny + Mobil-css
* Mobil-meny + Desktop-css
* Mobil-meny + Mobil-css
 
Det er tross alt ikke noen garanti for at android-enheter har lavere oppløsning enn en PC. Forhindre kaos ved å gjøre alt i nettleseren. 

 

Virker nesten som at jeg vil lage mest mulig krøll for meg selv   :dontgetit:

 

Her kan du se et eksempel på det du prøver å gjøre, bare med kun CSS: https://jsfiddle.net/ok6nfLeh/1/
 
Gjør viewet nede i høyre  hjørne større og mindre så ser du hvordan menyen flytter på seg.

 
Det ser ut som det gjør det slik jeg vil ha det.

 

 

 

edit: pleier dere å ha alt i samme CSS-fil eller deler dere opp for mobile enheter/ikk emobile enheter?

Endret av ilpostino
Lenke til kommentar
etse

etse

Skrevet
Skrevet

Det avhenger av mengden CSS. Blir det en del liker jeg å dele ting opp. Men ofte gjør jeg det per komponent. F.eks. en egen CSS-fil for menyen, en for artikkel o.s.v. for så å kjøre det gjennom et program som kombinerer alt til en fil når jeg lanserer siden.

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...