Forum: PC-Programmierung HTML: Einsprungpunkt definieren


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
von Walter T. (nicolas)


Bewertung
0 lesenswert
nicht lesenswert
Hallo zusammen,

ich weiß: HTML programmiert man nicht, HTML schreibt man. Aber alle 
anderen Themenkreise passen noch schlechter.

Ich habe eine Website, die einen so großen Seitenkopf hat, daß man auf 
einem Mobilgerät schon das ganze Bild mit Seitenkopf voll hat. Bis zur 
ersten Überschrift muß man ein ganzes Stück herunterscrollen. Dieser 
Seitenkopf muß auch da bleiben (decided by management).

Gibt es einen Weg, in einer HTML-Datei einen Einsprungpunkt zu 
definieren, ab dem eine HTML-Datei automatisch geöffnet wird? Sozusagen 
ein default-Anker (so wie die index.html die default-Datei in einem 
Verzeichnis ist).

Viele Grüße
W.T.

von Sven W. (Gast)


Bewertung
1 lesenswert
nicht lesenswert
Hallo Walter

Den Anker kannst du doch beliebig in deinem HTML definieren. Ich mache 
das beispielsweise bei Fehlermeldungen.

Dazu definiere ich zuerst den Anker und springe dann per Javascript 
dorthin.
Im Beispiel ist "Notice" die ID des Ankers.
1
<script type="text/javascript">
2
    window.onload = function ()
3
    {
4
        if (document.getElementById('Notice'))
5
  {
6
      window.location.hash = '#Notice';
7
  }            
8
    }
9
</script>
10
11
<h3 id="Notice">...</h3>

MfG Sven

von Rufus Τ. F. (rufus) (Moderator) Benutzerseite


Bewertung
1 lesenswert
nicht lesenswert
Afaik nein; Du könntest aber Deinem Management vorschlagen, auf 
Mobilgeräte eine alternative Version mit reduziertem Seitenkopf 
auszuliefern. Das kann der Webserver nämlich durchaus erkennen, und auch 
nur mittelmäßig gute Webseiten sind i.d.R. sozusagen "bilingual" 
aufgebaut.

Wenn das Management das nicht will, will das Management offensichtlich 
nicht, daß die Webseite mit Mobilgeräten betrachtet wird.

Alternativ müsstest Du für Dich beim Seitenaufruf Deinen gewünschten 
Anker an die URL anhängen. Von Hand geht das.

Du könntest den Webserver auch so konfigurieren, daß er Inhalte auf 
Mobilgeräte mit an die URL angehängtem "scrolle-seitenkopf"-Anker 
ausliefert.

von Autoit (Gast)


Bewertung
0 lesenswert
nicht lesenswert
Ein Anker definieren und nach dem laden automatisch zum anker springen
https://devopsworld.de/724

von Walter T. (nicolas)


Bewertung
0 lesenswert
nicht lesenswert
Hallo zusammen,

danke für die Antworten.

Sven W. schrieb:
> per Javascript

Javascript habe ich bis jetzt geschafft, bei aktuellen Projekten 
komplett zu vermeiden. Aus dem Alter bin ich draußen.

Rufus Τ. F. schrieb:
> Du könntest den Webserver auch so konfigurieren, daß er Inhalte auf
> Mobilgeräte mit an die URL angehängtem "scrolle-seitenkopf"-Anker
> ausliefert.

Hallo Rufus,

das klingt sehr interessant. Ich muß mich mal in einlesen, ob das 
möglich ist, Verweise ohne Anker mit einem Redirect auf eine bestimmten 
Anker zu versehen, und ob ich mir damit nicht andere Schwierigkeiten 
einhandele.

Viele Grüße
W.T.

von Cyblord -. (Gast)


Bewertung
1 lesenswert
nicht lesenswert
Walter T. schrieb:
> Javascript habe ich bis jetzt geschafft, bei aktuellen Projekten
> komplett zu vermeiden. Aus dem Alter bin ich draußen.

Aja, ... und diese "aktuellen Projekte" sind Vereinswebseiten für 
Hintertupfingen?

Bist du der Zeinerling der Webentwicklung?

von Walter T. (nicolas)


Bewertung
0 lesenswert
nicht lesenswert
Abradolf L. schrieb:
> Aja, ... und diese "aktuellen Projekte" sind Vereinswebseiten für
> Hintertupfingen?

Genau. Irgendwer muß die schließlich auch machen.

von Pandur S. (jetztnicht)


Bewertung
0 lesenswert
nicht lesenswert
Ich empfehl php.

von Weinbauer (Gast)


Bewertung
0 lesenswert
nicht lesenswert
Responsive Webdesign ...

Ist heutzutage n echtes Problem, früher hat man für PC-Bildschirm 
designt und gut war, heut hat man zig Betriebssysteme und Bildschirme.

Zum Problem ... Du kannst den Kopf in n DIV packen und per css bei 
Auflösung kleiner x den div auf display: none setzen

von Weinbauer (Gast)


Bewertung
0 lesenswert
nicht lesenswert
PS: mit php eher schwierig, weil der Server nur etwas umständlich an die 
bildschirmauflösung kommt, normalerweise garnicht.
JS geht, bei noscript wirds dann doof.

von Frank E. (Firma: Q3) (qualidat)


Bewertung
1 lesenswert
nicht lesenswert
Die Unterscheidung unterschiedlicher Bildschirmgrößen bzw. 
Geräte-Kategorien realisiert man per CSS.

Man legt unterschiedliche CSS-Files an und je nach Umgebung wählt der 
Browser eines aus, nennt man "responsive".

http://www.webmasterpro.de/coding/article/css-responsive-webdesign-media-queries-fuer-iphone-ipad-und-smartphones.html

Content-Management-Systeme (z.B. Joomla, Wordpress, Drupal ...) werden 
per Template gestylt. Davon gibts auch welche, wo "responsive" bereits 
eingebaut ist.

: Bearbeitet durch User
von Walter T. (nicolas)


Bewertung
0 lesenswert
nicht lesenswert
Hallo zusammen,

das ist eine nette Diskussion - aber am Thema vorbei. Es ist schon ein 
responsives Webdesign per HTML+CSS vorhanden. Das einzige, was jetzt 
noch stört, ist der riesige Kopf. Der ist aber durchaus gewünscht - er 
soll nur beim Aufrufen der Seite schon überscrollt sein.

Viele Grüße
Nicolas

von Nop (Gast)


Bewertung
0 lesenswert
nicht lesenswert
Walter T. schrieb:

> das ist eine nette Diskussion - aber am Thema vorbei. Es ist schon ein
> responsives Webdesign per HTML+CSS vorhanden. Das einzige, was jetzt
> noch stört, ist der riesige Kopf.

Dann ist es noch nicht responsive.

> Der ist aber durchaus gewünscht - er
> soll nur beim Aufrufen der Seite schon überscrollt sein.

Dann ist er unwesentlich und sollte mobil schlichtweg nicht vorhanden 
sein. Insbesondere sollte er auch keine Bilder nachladen, die dann auch 
noch überscrollt werden.

Elegant löst man Logoprobleme und sowas mit SVG-Files, die man dann per 
CSS skaliert. Sieht immer gut aus. Geht natürlich nicht für sehr 
komplexe Logos, aber die sind sowieso für die Tonne.

von Nop (Gast)


Bewertung
1 lesenswert
nicht lesenswert
Walter T. schrieb:
> Der ist aber durchaus gewünscht

Ach ja - nein, das ist er nicht. Sowas will keiner sehen. Offenbar hat 
das Marketing in der Firma noch nicht begriffen, daß man Webseiten für 
Kunden (und solche, die es werden könnten) macht, sondern die glauben, 
daß eine Webseite zur Selbstbeweihräucherung des Marketings dient.

DAS ist die eigentliche Baustelle und kein EInsprungspunkt oder so ein 
Unsinn.

von H. E. (hobby_elektroniker)


Bewertung
0 lesenswert
nicht lesenswert
Walter T. schrieb:
> Hallo zusammen,
>
> danke für die Antworten.
>
> Sven W. schrieb:
>> per Javascript
>
> Javascript habe ich bis jetzt geschafft, bei aktuellen Projekten
> komplett zu vermeiden. Aus dem Alter bin ich draußen.
>
Wie darf man das verstehen? JS hat doch nichts mit dem Alter zu tun.
Was spricht gegen JS?

>
> Rufus Τ. F. schrieb:
>> Du könntest den Webserver auch so konfigurieren, daß er Inhalte auf
>> Mobilgeräte mit an die URL angehängtem "scrolle-seitenkopf"-Anker
>> ausliefert.
>
> Hallo Rufus,
>
> das klingt sehr interessant. Ich muß mich mal in einlesen, ob das
> möglich ist, Verweise ohne Anker mit einem Redirect auf eine bestimmten
> Anker zu versehen, und ob ich mir damit nicht andere Schwierigkeiten
> einhandele.
>
> Viele Grüße
> W.T.

Welche technische Möglichkeiten bestehen bei dir, Mobile Geräte zu 
erkennen? Vor allem stellt sich die Frage, wenn du auf JS komplett 
verzichten willst.

von Walter T. (nicolas)


Bewertung
0 lesenswert
nicht lesenswert
Nop schrieb:
> Dann ist er unwesentlich und sollte mobil schlichtweg nicht vorhanden
> sein.
>
> [...]
>
> Elegant löst man Logoprobleme und sowas mit SVG-Files, die man dann per
> CSS skaliert.


Es ist kein Logo. Es ist ein Navigationselement.


Nop schrieb:
> Offenbar hat
> das Marketing in der Firma noch nicht begriffen

Es ist auch keine Firma.

von Nop (Gast)


Bewertung
0 lesenswert
nicht lesenswert
Walter T. schrieb:

> Es ist kein Logo. Es ist ein Navigationselement.

Dann ist die Navigation eben nicht responsive, so einfach ist das. Die 
Lösung ist, sie responsive zu machen.

Dazu gibt's mehrere Methoden, die nicht nur das Problem kaschieren, 
sondern es lösen:

1) Reduktion der Navigation auf das Wesentliche. Nicht mehr als 5-7 
Elemente. Wenn das nicht gelingt, ist die Webseite überladen, und es 
fehlt ein schlüssiges Navigationskonzept. Die Webseite sagt damit 
insbesondere aus, daß der Ersteller keine Prioritäten setzen kann. 
Niemand wühlt sich durch bildschirmfüllende Menüs durch, sondern sowas 
klickt man einfach weg.

2) Die Navigation an den unteren Rand befördern. Das kann man mit 
Javascript machen, indem man im Mobilfalle die Elemente nach unten 
schiebt. Aber auch hier, wenn das "riesig" ist, dann ist das ein 
grundsätzliches Designproblem.

3) Das Hamburgermenü, was die schlechteste Lösung ist, weil sie in der 
Realität nicht funktioniert. Und zwar deswegen nicht, weil die drei 
Balken keinen Anreiz bieten, überhaupt draufzuklicken.

(Und: Niemals eine Navigation nur über Icons machen.)

von Weinbauer (Gast)


Bewertung
0 lesenswert
nicht lesenswert
Nop schrieb:
> 3) Das Hamburgermenü, was die schlechteste Lösung ist, weil sie in der
> Realität nicht funktioniert. Und zwar deswegen nicht, weil die drei
> Balken keinen Anreiz bieten, überhaupt draufzuklicken.

Was wäre z.B. für Smartphone Dein idealer Vorschlag für Menü?

von Cyblord -. (Gast)


Bewertung
0 lesenswert
nicht lesenswert
Weinbauer schrieb:
> Was wäre z.B. für Smartphone Dein idealer Vorschlag für Menü?

http://jamesarcher.me/hamburger-menu

tl;dr Version: Tab Bars mit den wichtigsten Funktionen.

Antwort schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.
Hinweis: der ursprüngliche Beitrag ist mehr als 6 Monate alt.
Bitte hier nur auf die ursprüngliche Frage antworten,
für neue Fragen einen neuen Beitrag erstellen.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.