Beiträge von wolf

wolf

The Scout, ja klar gibts das, ich meine auch eher größere Codes, wie z.B. Logins, Gallerien,... UND ich finde für Anfänger, sind diese zum teil unüberschtlichen, unkommentierten Sammelbecken nicht so geeignet.
@Cotton man könnte ja auch so etwas wie sternchen System einrichten
lauras, ja hatte mir auch vorgestellt, das es zu jedem Code ne ausführliche Beschreibung gibt.

wolf

Zur Optimierung von Webseiten (z.B. für die mobile Nutzung,)gehört auch die Optimierung für verschiedene Bildschirme, das Responsive Design.

Hierbei geht es darum den Inhalt für den Benutzer möglichst einfach überblickbar und gut lesbar darzustellen.

Hier ein Beispiel

Für Browserfenster 0-900px:
[Blockierte Grafik: http://wolf.wolfgang-m.de/beispiele/res1.png]

für Browserfenster, breiter als 900px:
[Blockierte Grafik: http://wolf.wolfgang-m.de/beispiele/res2.png]

für Browserfenster, breiter als 1500px:
[Blockierte Grafik: http://wolf.wolfgang-m.de/beispiele/res3.png]

Warum überhaupt?!

Standert Webseiten sind meistens nur für eine Bildschirm Größe geschrieben
Oft muss man dann auf kleineren Geräten horizontal scrollen (sehr nervig)
Auf Größeren Geräten sehen Normale Seiten doch meistens sehr bescheiden aus
Auf kleineren Gerätemn muss man erstmal zoomen um den Text ansatzweise Lesen zu können
...

Was wir brauchen:

CSS Kenntnisse
Ein bisschen Zeit
...

Was wir tun:

Wir legen für verschiedene Bildschirm/Browserfenster Größen, verschiedene Syles an.

Wie wir das machen:

Durch sog. Media Queries und über die Bildschirm Größe, da z.B. Apple nicht das handheld Prefix akzeptiert.

Media Queries wissen verschiedene Dinge über Den Benutzer:(genaueres später)

Breite und Höhe des Browserfensters
Breite und Höhe des Gerätes
Orientierung (Quer- oder Hochformat)
Bildschirmauflösung
...

Tips:

Im Stylesheet, zuerst Grund Anweisungen z.B. html, body{} , dann das "kleinste" Design und am Ende das "größte" Design im Stylesheet, da z.B. auch noch heute die mobile Internet-Verbindung meistens langsam ist und dann nicht erst der ganze unwichtige Style geladen wird.
Wenig Code gewurschtel produzieren
Für Mobile stylesheets:
Text Größe +30% ungefähr. (der lesbarkeit wegen)
Buttons mindestens 30x30px eher mehr! (es gibt auch Personen mit größeren Daumen und Fingern, denen wir es nicht schwer machen wollen)

Nun zum eigentlichen:

Speziefische stylesheets kennt man eventuell von

CSS

@media print {
/* Styles für Drucker */
}

Bezogen auf Mobile-Web könnte man auch so arbeiten:

CSS

@media handheld{
/* Styles für Mobile Geräte (Außer Apple + Safari) */
}

Funktioniern,
doch da zieht uns Apple einen Strich duch die Rechnung.

Also steuern wir unseren neuen Style mit Media Querries, da wir ja auch z.B. style für extrem große Geräte bereit stellen wollen können:

CSS

@media screen and (min-width: 1024p){
/* Styles für alle Browserfenster die breiter als 1024px sind */
}

an.

CSS

article{
    width: 100%;
}
@media screen and (min-width: 1024px){
    article{
        width: 50%;
    }
}

Jetzt wird auf allen Browser Fenster, die breiter als 1024px sind das 2. Article atribut (width: 50%) gelten.

Dies kann man z.B. auch so erreichen:

HTML

<head>
    <link rel="stylesheet" type="text/css" media="all and (min-width: 1024px)" href="css/desktop.css" />
</head>

Hier werden die Media Queries nur vom Html verarbeitet.

Im Bereich des Mobile Web;
wird so mancher daran verzweifeln, wenn er versucht seinen Inhalt 1024px breit zu machen und das Ganze dann in auf dem iPad in Safari ausprobiert.
Apple und damit Safari will „Das reale Internet“ darstellen und zoomt deswegen alle Webseiten einfach mal viel kleiner, so das der Inhalt keine 1024px breit ist sondern nur z.B. 700 px.

Hierfür kommt in die betreffenden Seite dieses Stück Code:

HTML

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

Sorgt dafür das der Inhalt in „orginal“ Größe angezeigt wird.

Okay, stell dir vor, das wars eigentlich auchschon!
Hier mal ein mini Beispiel-Code:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css" rel="stylesheet">
        header{
            height: 60px;
            border: 1px solid black;
        }
        article{
            width: 100%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin-left: 5px;
            margin-right: 5px;
            height: 500px;
            border: 1px solid black;
        }
        @media screen and (min-width: 1024px){
            article{
                width: calc(50% - 10px);
                float: left; 
            }
        }
    </style>
</head>
<body>
    <header>
    </header>
    <article>
    </article>
    <article>
    </article>
</body>
</html>

Alles anzeigen

Hier einmal ein paar Media Querries:

CSS

@media screen and (max-width: 765px){
    /* Browserfenster mit maximaler Breite von 765px */
}
@media screen and (min-width: 1280px), print and (min-resolution: 300dpi){
    /* Browserfenster mit mindestens 1280px Breite und einer Auflösung von 300dpi */
}
@media screen and (min-device-width: 480px){
    /* Gerät mit mindestens 480px Breite (es zäht die Breite! bei Handys also Querformat) 
     * min-device-height: 480px  würde das Gleiche erzielen
     */
}
@media screen and (max-device-width: 480px){
    /* Gerät mit maximal 480px Breite (es zäht die Breite! bei Handys also Querformat) 
     * max-device-height: 480px  würde das Gleiche erzielen
     */
}
@media screen and (max-device-width: 480px) and (orientation: portrait){
    /* Bildschirm mit maximal 480px Breite und im portrait Modus (Hochformat)*/
}
@media screen and (orientation: landscape){
    /* Bildschirm der im landscape Modus ist (Querformat) */
}
@media screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px){
  /* Geräte wie das Iphone4 */
}
@media screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 768px){
    /* Geräte wie das Ipad3 */
}

Alles anzeigen

Ein paar wichtige Parameter: (für alle kann man mit min- /max- arbeiten, außer bei orientation! )

width Fenster-Breite
device-width Display-Breite
height Fenster Höhe
device-height Display-Höhe
aspect-ratio (z.B. 16/9) ||Fenster-Seitenverhältnis
device-aspect-ratio (z.B. 16/9) Display-Seitenverhältnis
color (z.B. 0 für farblose Geräte) Fenster-Farb-Bits
resolution (z.B. 300dpi) Fenster-Auflösung
orientation (z.B. landscape oder portrait) Quer/Hochformat

Anbei noch ein paar Parameter für Medien spezifische Stylesheets:

CSS

@media print{
    body{
        color: black;
    }
}

@media

all Stylesheet gilt für alle Ausgabegeräte
screen Bildschirme
print Drucker
handheld Handhelds (Palmtops, PDAs, WinCE-Geräte)
projection Video-Beamer, Overhead-Projektoren
tv Tv's
tty Ausgabegeräte mit feststehenden Zeichentypen (z. B. Terminals, ältere Mobiltelefone)
speech (CSS2: aural) aurale Ausgabegeräte (z. B. Screenreader)
braille Blindenschriftfähige Ausgabegeräte
embossed Blindenschriftfähige Drucker

Hoffe es hilft mal jemandem.
Wenn ihr fragen habt, ich etwas vergessen habe, ihr Fehler entdeckt, sonnstwas ist, Kommentiert

wolf

Hat jemand oder mehrere von euch Lust/Interesse,
mit mir zusammen eine Art Code sammel-Kiste Seite zu bauen, wo wir Codes für alles mögliche, die wir mal geschrieben haben/schreiben einstellen können, und die sich jeder frei herunterladen kann.

Ich mein jeder von uns produziert unheimlich viel Code für alle möglichen Zwecke und dann müssen andere und wir gegenseitig ja nicht das Rad neu erfinden oder?

Meldet euch doch einfach hier, wenn ihr wollt.

wolf

Hier
nochmal das Problem veranschaulicht,
Ich will aber keinen dauerhaften stiky Footer..

wolf

Aber soweit ich weiß geht es mit ajax

Heißt du könntest, dein PHP auf deinem Server lagern und mit ajax, die Kunden das Script aufrufen lassen

Und wenn du doch erst 2 Wochen damit arbeitest, wieso gewöhnst du dir dann goto erst an?

wolf

Oh, verdammt, jetzt verstehe ich was du wolltest

Danke The Scout

Die Lösung von The Scout ist genau das richtige

und @Sassenburger

Auf vielen Servern ist http:// Include ausgeschaltet, d.h du kannst nur Dateien Includen die auf dem Server des Scriptes Laufen.

wolf

Ja kannst du
Weil ich mir das Reset wo anders kurz geklaut habe und dabei nicht an * gedacht

Klar könnte man JS Bildschirm und Content Höher ermitteln ...
Aber css wäre eleganter

wolf

Hallo,
habe ein Problemchen
Ich habe Eine Seite, hier ist der Footer immer am Seiten Ende, kein Problem, sieht gut aus.
Wenn jetzt aber der Bildschirm höher ist als die Seiten Inhalts-Höhe, hängt der Footer blöd in der Luft rum.
Gibt es eine lösung das zu beheben?, z.B. den Footer am Body ende "anzuhängen"?
Aber eben nur, wenn der Bildschirm höher ist..

Hier das Prob. link

Danke

wolf

Wie siehts mit dem Update aus?

wolf

Schau mal hier (PHP Lösung..)

Da kannst dir ja was raus klauen

wolf

Die AAA box und die Headline box in nen div oder so packen, die width von deer headline Box und der AAA Box auf 50% setzen und float left.

Darauf achten das die boxen kein padding/margin haben, btw den padding durch

CSS

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

Unterbinden (mit Browser Kürzeln schreiben..!).

Wenn ich es schaffe werde ich nacher mal ein Best Practices zum Thema Responsive Design Schreiben.

wolf

Wenn es mal jemand schnell braucht, hier ein kleiner simpler Benutzerzähler im Anhang.
[Blockierte Grafik: http://wolf.wolfgang-m.de/beispiele/counter.png]

An die stelle wo der Zähler hin soll:
Eventuell Pfad anpassen, der Server muss PHP unterstützen und die Datei die Endung .php.

HTML

<?php
	include 'counter.php';
	$Configuration = false; //Standart: false //Optionen: true(anzeigen)/false(nicht) 
?>

//Der Code:
counter.php

PHP

<?php
/*
 * Counter:
 *
 * Code by Wolf Wortmann / wolf.wolfgang-m.de
 * License: nobody cares..
 *
 */
	if ($Configuration){if (file_exists("counter_conf.php")){include 'counter_conf.php';}}
	//RESET:
		if (empty($COHeight)){$COHeight="43px";}
		if (empty($COWidth)){$COWidth="105px";}
		if (empty($BGColor)){$BGColor="#666666";}
		if (empty($NUMColor)){$NUMColor="#E6E6E6";}
		if (empty($NUMSize)){$NUMSize="19px";}
		if (empty($IPColor)){$IPColor="#A4A4A4";}
		if (empty($COTime)){$COTime=1*24;}
		if (empty($IPShow)){$IPShow=true;}
		if (empty($IPSize)){$IPSize="9px";}




	/* IP des benutzers */
	if (! isset($_SERVER['HTTP_X_FORWARDED_FOR'])) {
		$LIP = $_SERVER['REMOTE_ADDR'];
	}
	else {
	$LIP = $_SERVER['HTTP_X_FORWARDED_FOR'];
	}
	//Zahl des Zählers
	if (file_exists("counter.txt")) {
		$file = @fopen("counter.txt", "r");
		if ($file) {
			$zahl = fgets($file, 10);
		}
		fclose($file);
	}
	//Wenn die Datei Leer ist
	if (empty($zahl)){$zahl = 0;}




	//Wenn der Benutzer inerhalb der Cookie Zeit schon besucht hat
	if ($_COOKIE["ip"] == $LIP) {
		//Cookie neu setzen
		if(!$COTime){$COTime = 0.5;}
		setcookie("ip", $LIP, time()+3600*$COTime);
	}
	//Wenn der Benutzer neu ist
	else{
		//Cookie Setzen
		if(!$COTime){$COTime = 0.5;}
		setcookie("ip", $LIP, time()+3600*$COTime);		
		$zahl = $zahl+1;
		if (file_exists("counter.txt")) {
			$file = @fopen("counter.txt","w");
			if ($file) {
				fputs($file, $zahl);
				fclose($file);
			}
		}	
	}
	//output
	echo "
		<div class='counter'>
			<span class='num' >$zahl</span>
			";
			if ($IPShow) {echo "<span class='ip' >Ihre Ip: $LIP</span>";}
		echo "
		</div>
		<style type='text/css'>
			.counter span{
				display:block;
			}
			.counter{
				background-color: $BGColor;
				text-align: center;
				width: $COWidth;
				height: $COHeight;
				font-family: 'Avenir Light',Arial,sans-serif;
				border-radius: 4px;
			}
			.num{
				padding: 2px;
				color: $NUMColor;
				font-weight: bold;
				font-size: $NUMSize;
			}
			.ip{
				color: $IPColor;
				font-size: $IPSize;
				padding-left: 2px;
				padding-right: 2px;
			}
		</style>
	";
?>

Alles anzeigen

counter_conf.php

PHP

<?php
/*
 *Counter Configuration File
 *
 *Code by Wolf Wortmann / wolf.wolfgang-m.de
 * License: nobody cares..
 *
 *Immer so notiert:
 * VARIABLE = WERT; // STANDART-WERT // Optionen
 * 
 * WERT darf auch leergelassen werden
 * und wird durch den Standart ersetzt.
 */







//GRUNDSATZ
	//Höhe: (mit Art)
	$COHeight = "43px"; // "43px"
	//Breite: (mt Art)
	$COWidth = "105px"; // "105px"
	//Hintergrund Farbe
	$BGColor = "#666666"; // "#666666"




//INHALT
	//Farbe der Nummer:
	$NUMColor = "#E6E6E6"; // "#E6E6E6"
	//Schrift Größe der Nummer: (mit Art)
	$NUMSize = "19px"; // "19px"
	//Farbe der IP:
	$IPColor = "#A4A4A4"; // "#A4A4A4"
	//Schrift Größe der IP: (mit Art)
	$IPSize = "9px"; // "9px"
	//IP zeigen
	$IPShow = true; // true // true/false




//SONNSTIGES
	//Verfall des Cookies:(in Stunden)
	/*
	 * Nach dieser zeit, wird ein Aufruf der Seite als neuer Aufruf gezählt.
	 *
	 * z.B:
	 * 0.5 für eine halbe Stunde
	 * 3 für 3 Stunden
	 * 3*24 für 3 Tage
         * weil 3 mal 24 stunden = 3 Tage
	 */
	$COTime = 1*24; // 1*24 
?>

Alles anzeigen

Hoffe ihr könnt was damit anfangen

wolf

Danke, du hast mir den fehler gezeigt, ich hatte nur vergessen die Operation als var auszuführen.

Allerdings noch 2 Probleme.
1.Wie bekomme ich den orginal Inhalt wieder rein, so bekomme ich halt immer das ganze Arr.
2. Wenn ich das ganze via Inner HTML wieder rein schreibe, wird der Html Code nichtmehr gepharst

JavaScript

function regex(){
    //Definitionen
    var Obj = document.getElementById('box').value;
    var act = /\s[a-z]+\./g;




    //Ausführung
    var ObjAct = Obj.match(act);
    Obj = Obj.replace(act,"<span>"+ObjAct+"</span>");
    document.getElementById('box').innerTEXT = Obj;
    //alert(Obj);
}

Alles anzeigen

wolf

Ich würde sagen du hast alles mit tab-width 2 oder 3 oderso

Und danke für den schnipsel

wolf

Naja hat halt kein Eltern Element.. bzw das liegt weiter weg..

HTML

<textarea id="hi">
    <pre>
        .ext.ex_users{
            login = true
            page != 5;




        marker.LOGIN.ex_login{
            group = 10;
        }
        marker.FE_EDIT.ex_frontend_edit{
            page != 6;
        }
    <pre>
</textarea>

Alles anzeigen

Wenn ich jetzt das elternelement von z.B. marker. in Zeile 8 anspreche (wäre dann ObjAct) bekomm ich ja sowas:

HTML

<textarea id="hi">
    <pre>
<span>marker.</span>
        .ext.ex_users{
            login = true
            page != 5;




        marker.LOGIN.ex_login{
            group = 10;
        }
<!-- .....  -->

Alles anzeigen

Oder?

wolf

Ja, dann hat die var ObjAct das drinnen, aber wie bekomme ich das dann in den quellcode der Seite? :?

wolf

Wäre ja auch viel zu einfach gewesen, um zu funktionieren

hmmn joa danke, ich werde mich mal dran setzen..

Aber im php manual machen die doch auch sowhat :? :

PHP

// Liefert: Sie sollten taeglich Pizza, Bier und Eiscreme essen.
$phrase = "Sie sollten taeglich Fruechte, Gemuese und Ballaststoffe essen.";
$gesund = array("Fruechte", "Gemuese", "Ballaststoffe");
$lecker = array("Pizza", "Bier", "Eiscreme");




//Manual str_replace

wolf

Also ich suche in dem element box
nach:
/\s[a-z]+\./g >> ObjAct.

jetzt möchte ich an der Stelle wo das ObjAct liegt sowas machen:
<span>ObjAct</span>

Hoffe du verstehst den Vorgang.

So etwas..

JavaScript

Obj.replace(ObjAct,"<span>"+ObjAct+"</span>");

wolf

Ich meine sowas wie ObjAct.innerHTMLbefore o.ä.

wolf

Und Gleich mal das erste Problem..

Ich hole mir so, bestimmte Stellen aus dem Doc.

JavaScript

function regex(){
    //Definitionen
    var Obj = document.getElementById('box').value;
    var act = /\s[a-z]+\./g;




    //Ausführung
    var ObjAct = Obj.match(act);
    alert(ObjAct);
}

Alles anzeigen

Wie kann ich jetzt vor und nach ObjAct Was ins Html einfügen?

Beiträge von wolf

Code Kiste

Responsive Webdesign (Grundsätze / Media Queries)

Code Kiste

Footer position

PHP mit einem HTML-Tag aufrufen?

PHP mit einem HTML-Tag aufrufen?

Footer position

Footer position

Foren-Update heute Nacht

PHP mit einem HTML-Tag aufrufen?

Layoutproblem bei Mobile

Besucherzähler / Counter

Syntax Highliting

Adsense: ungültige Aktivitäten in Ihrem AdSense-Konto festgestellt

Syntax Highliting

Syntax Highliting

Template replacement - Tipps?

Syntax Highliting

Syntax Highliting

Syntax Highliting