de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Wie Debugging Website in iPad

Mit Milliarden von mobilen Nutzern ist der Aufbau von Websites, die auf mobilen Geräten sichtbar sind, unverzichtbar. Zum Glück haben wir viele Tools und Optionen zum Debuggen von Websites auf mobilen Plattformen . Sie können Adobe Edge Inspect, Google Chrome Emulation oder XIP.io verwenden, um einige zu nennen.

Wenn Sie ausschließlich in einer OS X- und iOS-Umgebung entwickeln, benötigen Sie diese Tools von Drittanbietern möglicherweise nicht. Apple hat bereits eine Reihe von Tools für den Job bereitgestellt. In diesem Beitrag zeigen wir Ihnen, wie Sie mit ihnen statische Websites und WordPress-Websites in iOS für iPhone und iPad aufrufen und debuggen können .

Ohne weitere Umschweife, fangen wir an.

Anfangen

Starten Sie zuerst Safari und aktivieren Sie die Entwicklertools über Safari> Einstellungen . Aktivieren Sie auf der Registerkarte " Erweitert" das Menü "Entwickeln" in der Menüleiste .

Ein neues Menü namens Develop erscheint in der Safari Menüleiste.

Gehen Sie dann auf Ihrem iPad oder iPhone zu Einstellungen> Safari . Aktivieren Sie ähnlich wie im Menü " Erweitert" den Web Inspector .

Für WordPress-basierte Website

Ein relativer Pfad ist erforderlich, damit die CSS-, Bilder- und JavaScript-Links korrekt auf dem iPad oder iPhone geladen werden. Wenn Sie WordPress-basierte Websites entwickeln, sind alle Asset-Pfade absolut. Um sie zu einem relativen Pfad zu machen, installiere und aktiviere dieses Plugin: Relative URL.

Sobald sie aktiviert sind, werden die Pfad-URLs von:

 http: // localhost: 8888 / wordpress / 

... in etwas wie das, was du unten siehst:

 / wordpress / 

Debugging der Website

Zunächst müssen Sie Ihre Netzwerk-IP-Adresse kennen. Gehen Sie zu Systemeinstellungen> Netzwerk . Dort finden Sie die IP-Adresse. Stellen Sie außerdem sicher, dass Ihre Apple Geräte - Mac, iPad, iPhone - im selben Netzwerk verbunden sind, damit Sie drahtlos auf dem iPad oder iPhone auf die Website zugreifen können.

Starten Sie auf Ihrem iPad oder iPhone die Safari-App und greifen Sie auf localhost: 8888 zu, gefolgt von Ihrem Webprojektverzeichnis - zum Beispiel localhost: 8888 / wordpress . Wenn Sie Ihren lokalen Server mit MAMP einrichten, sollte localhost: 8888 Ihre lokale Standardserveradresse sein.

Wie Sie unten sehen können, sehen wir unsere Website, die in diesem Fall auf WordPress basiert, auf einem iPad.

Um die Website mit den Entwicklertools debuggen zu können, müssen Sie Ihr iPad oder iPhone über USB mit Ihrem Mac verbinden . Navigieren Sie dann in Safari zum Menü " Entwicklung" und wählen Sie Ihr angeschlossenes Gerät aus.

Wir sind fertig.

Im folgenden Screenshot können Sie beim Auswählen der DOM-Struktur aus den Entwicklertools sehen, dass die entsprechenden Elemente auf dem iPad oder iPhone hervorgehoben sind. Sie können Ihre Website jetzt technisch auf Ihrem iPad oder iPhone debuggen, so wie Sie es auf Ihrem Desktop tun.

Woher diese Firmen ihre Namen haben - Teil 1

Woher diese Firmen ihre Namen haben - Teil 1

Es gibt eine Vielzahl von Produkten und Dienstleistungen, die wir täglich nutzen. Viele davon erkennen wir sofort an ihrem Logo oder dem Slogan. Die meisten von uns kennen jedoch nicht die wahre Bedeutung oder den Ursprung dieser Namen. Auch wenn es vielleicht nicht auf Ihrer "Dinge zu wissen" -Liste steht, aber es wird nicht schaden , den Hintergrund der Dinge zu kennen, mit denen wir so oft interagieren .

(Tech- und Design-Tipps)

Verständnis von Mikrointeraktionen im Mobile App Design

Verständnis von Mikrointeraktionen im Mobile App Design

Usability ist eine der Schlüsselkomponenten des mobilen UI-Designs . Eine große Benutzerfreundlichkeit beinhaltet häufig Mikrointeraktionen, die kleine Reaktionen und Verhaltensweisen von einer Schnittstelle sind, die bestimmen, wie die UI verwendet werden sollte. Diese Mikrointeraktionen definieren Verhaltensweisen, fördern das Engagement und helfen den Benutzern zu veranschaulichen, wie eine Schnittstelle funktionieren sollte.Dig

(Tech- und Design-Tipps)