{"id":4877,"date":"2012-12-27T12:17:42","date_gmt":"2012-12-27T10:17:42","guid":{"rendered":"http:\/\/nerd-o-mania.de\/wordpress\/?p=4877"},"modified":"2017-03-15T23:14:37","modified_gmt":"2017-03-15T22:14:37","slug":"hhh-houston-we-have-a-problem","status":"publish","type":"post","link":"https:\/\/www.nerd-o-mania.de\/wordpress\/2012\/12\/hhh-houston-we-have-a-problem\/","title":{"rendered":"&ldquo;&Ouml;HHH, HOUSTON? WE HAVE A PROBLEM.. &rdquo;&hellip;"},"content":{"rendered":"<p><span style=\"color: #ff9900; font-family: rock salt; font-size: 18px;\">..oder: was tun, wenn ein Blog eine vorgeschaltete HTML-Seite braucht?..<\/span><\/p>\n<table style=\"width: 100%;\" border=\"0\" cellspacing=\"2\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td valign=\"top\" width=\"48%\">\n<p align=\"justify\">Was tut man, wenn an den beiden Weihnachtsfeiertagen Mistwetter ist und man zum zuhause bleiben verdammt ist, gl\u00fccklicherweise weder zu irgendwelchen Verwandten muss, um sich dort den alkoholisierten Geist der Weihnacht um die Nase wehen zu lassen, noch sich die x-te Wiederholung von irgendwelchen sinnentleerten Action-Filmen antun m\u00f6chte?<\/p>\n<p align=\"justify\">Genau &#8211; man schreibt vor lauter Langeweile einen Blogbeitrag..<\/p>\n<p align=\"justify\">Und was liegt da n\u00e4her als \u00fcber meinen neuen Blog und die kleinen Problemchen bei der Einrichtung desselben zu schreiben?<\/p>\n<p align=\"justify\">Die Blogger, die direkt bei WordPress ihren Blog haben, werden das Problem nicht haben \u2013 der Verweis auf die Domain reicht, und der Besucher gelangt automatisch auf den Blog.<\/p>\n<p align=\"justify\">Nicht so bei vielen anderen Providern. Denn hier muss die erste Seite im Root-Verzeichnis zwingend eine HTML-Seite namens index.htm(l) oder Default.htm(l) sein. Ein Blog hat aber php-Seiten \u2013 deshalb muss man eine vorgeschaltete Seite erstellen, von der aus man auf den Blog, welcher in einem anderen Verzeichnis liegt, verweist. Dies kann \u00fcber einen sofortigen Refresh und eine Weiterleitung sogar f\u00fcr den Besucher unbemerkt geschehen, so dass die \u201cDoorway Page\u201d gar nicht in Erscheinung tritt.<\/p>\n<hr \/>\n<p align=\"center\"><script type=\"text\/javascript\">\/\/ <![fusion_builder_container hundred_percent=\"yes\" overflow=\"visible\"][fusion_builder_row][fusion_builder_column type=\"1_1\" background_position=\"left top\" background_color=\"\" border_size=\"\" border_color=\"\" border_style=\"solid\" spacing=\"yes\" background_image=\"\" background_repeat=\"no-repeat\" padding=\"\" margin_top=\"0px\" margin_bottom=\"0px\" class=\"\" id=\"\" animation_type=\"\" animation_speed=\"0.3\" animation_direction=\"left\" hide_on_mobile=\"no\" center_content=\"no\" min_height=\"none\"][CDATA[\ngoogle_ad_client = \"ca-pub-4512412109408083\"; \/* Banner Klein gelb\/schwarz *\/ google_ad_slot = \"5196096387\"; google_ad_width = 250; google_ad_height = 250;\n\/\/ ]]><\/script><br \/>\n<script type=\"text\/javascript\" src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">\/\/ <![CDATA[\n\n\/\/ ]]><\/script><\/p>\n<hr \/>\n<p align=\"justify\">Ja \u2013 die korrekte Bezeichnung ist \u201cDoorway Page\u201d \u2013 nicht wie die meisten glauben, die wesentlich h\u00e4ufiger genannte und momentan \u201cHype\u201d Bezeichnung \u201cLanding Page\u201d.<\/p>\n<p align=\"justify\">Eine Landing Page hat im Gegensatz zur Doorway Page die Aufgabe auf ein ganz gezieltes Angebot hinzuweisen, Adressen abzufragen, oder was auch immer \u2013 dies aber eben sehr speziell; eine Doorway Page ist wirklich nur zum Empfang und zur Weiterleitung gedacht \u2013 dies hei\u00dft aber nicht, dass Sie zwangsl\u00e4ufig Langweilig sein muss.<\/p>\n<p align=\"justify\"><em><span style=\"color: #a5a5a5;\">Anmerkung: Die Doorway Page hat auch noch die Aufgabe sich durch geschicktes benutzen von Schl\u00fcsselw\u00f6rtern im Header bei Suchmaschinen nach oben zu schieben. Allerdings sind die meisten recherchierten Informationen aus den Jahren 2006-2007. Es ist also wahrscheinlich, dass vieles nicht mehr in der Form g\u00fcltig ist. <\/span><\/em><\/p>\n<p align=\"justify\">Die meisten wiederkehrenden Besucher (und nat\u00fcrlich auch Alle, die \u00fcber google direkt auf den Beitrag mit dem gesuchten Inhalt kommen) werden wahrscheinlich direkt auf meinen Blog www.petersplace.net\/wordpress kommen.<\/p>\n<p align=\"justify\">Sie sollten mal auf die dortige Doorway Page gehen: www.petersplace.net<\/p>\n<p align=\"justify\">Dort ist optisch \u2013 wie ich finde sogar immer noch ansprechend (obwohl die Seite aus dem Jahr 2007 stammt) \u2013 die M\u00f6glichkeit gegeben, auf verschiedene Bereiche meines Webspaces zu zu greifen. Ich habe die Seite seinerzeit mit macromedia Fireworks \u2018kreirt\u2019. Seit Jahren geh\u00f6rt macromedia aber nun schon zu Adobe.<\/p>\n<p align=\"justify\"><a href=\"http:\/\/nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2012\/12\/petersplace.net-doorway-page.png\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-left: 0px; padding-right: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-top: 0px; border-width: 0px;\" title=\"petersplace.net doorway page\" alt=\"petersplace.net doorway page\" src=\"http:\/\/nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2012\/12\/petersplace.net-doorway-page_thumb.png\" width=\"244\" height=\"357\" border=\"0\" \/><\/a><\/p>\n<p align=\"justify\"><em>(Doorway Page \u2013 made with Fireworks. Hier wurde so ziemlich jedes Objekt animiert, um dem Besucher zu zeigen, wo sich klickbare Inhalte verstecken. Dazu ist es nicht so langweilig..)<\/em><\/p>\n<p align=\"justify\">Das besondere (ich m\u00f6chte es fast schon magische nennen) an Fireworks ist die M\u00f6glichkeit PNG Grafiken mit Animationen zu f\u00fcllen und dazu auf fast unbegrenzte visuelle M\u00f6glichkeiten aus der Photoshop Bibliothek zugreifen zu k\u00f6nnen. Dar\u00fcber hinaus kann man Objekte gruppieren \u2013 will man zum Beispiel ein Polaroid-Foto erstellen, zieht man ein Viereck in gew\u00fcnschter Gr\u00f6\u00dfe auf die Arbeitsfl\u00e4che \u2013 welchem man vorher die Farbe Wei\u00df zugewiesen hat \u2013 f\u00fcgt die gew\u00fcnschte Grafik hinzu \u2013 spielt ein bisschen mit den Werten der Effekte Bibliothek \u2018abgeflachten Kanten\u2019 und \u2018Schlagschatten\u2019 \u2013 f\u00fcgt noch die Schrift dazu \u2013 markiert alle 3 Objekte \u2013 dr\u00fcckt auf\u2019s Gruppenfeld und hat nun ein Objekt aus 3 Teilen, welches sich verh\u00e4lt wie ein einziges.<\/p>\n<p align=\"justify\">weiter rechte Seite &gt;<\/p>\n<\/td>\n<td valign=\"top\" width=\"4%\"><\/td>\n<td valign=\"top\" width=\"48%\">\n<p align=\"justify\">Verschiebt, skaliert oder dreht man das Objekt, wirkt sich das auf alle gruppierten Objekte aus. Zu den weiteren Dingen, die Fireworks so interessant macht, geh\u00f6rt die M\u00f6glichkeit jedem Objekt noch 3 weitere Zust\u00e4nde zu geben \u2013 je nachdem, ob man mit der Maus dr\u00fcberf\u00e4hrt, man es anklickt, oder mit dem Zeigeger\u00e4t \u00fcber ein angeklicktes Objekt zieht.<\/p>\n<p align=\"justify\">Ich will euch hier keinen Kurs in Fireworks geben, dazu ist das Programm zu komplex. Es gibt auch bereits etliche Tutorials dazu im Internet.<\/p>\n<p align=\"justify\">Ich will hier nur mal auf die M\u00f6glichkeit hinweisen, eine Doorway Page ein bisschen zu \u201cpersonalisieren\u201d oder Ihr eine Corporate Identity, welche sich im Blog wiederfindet zu verleihen.<\/p>\n<p align=\"justify\"><a href=\"http:\/\/nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2012\/12\/landing-page-nerd-o-mania.png\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-left: 0px; padding-right: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-top: 0px; border-width: 0px;\" title=\"landing page nerd-o-mania\" alt=\"landing page nerd-o-mania\" src=\"http:\/\/nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2012\/12\/landing-page-nerd-o-mania_thumb.png\" width=\"244\" height=\"176\" border=\"0\" \/><\/a><\/p>\n<p align=\"justify\"><em>(NERD-O-MANIA.DE. Der Plastikfernseher kommt euch bekannt vor? Stimmt! Der wurde auch schon bei petersplace.net eingesetzt \u2013 hier ist aber eine andere Grafik als Bild zum Einsatz gekommen. Diese Seite soll auch die Besucher nur \u2018abholen\u2019 und schon mal f\u00fcr den Blog sensibilisieren. Das Refresh mit der Weiterleitung auf den Blog ist auf 5 Sekunden eingestellt. Zur Sicherheit gibt es aber auch den \u201cNERD MICH\u201d \u2013 Sticker, der via Hyperlink zum Blog f\u00fchrt)<\/em><\/p>\n<p align=\"justify\">Das \u2018bauen\u2019 einer Webseite in Fireworks ist so einfach, wie ein Bild in Photoshop zu bearbeiten:<\/p>\n<hr \/>\n<p align=\"center\"><script type=\"text\/javascript\">\/\/ <![CDATA[\ngoogle_ad_client = \"ca-pub-4512412109408083\"; \/* Banner Klein gelb\/schwarz *\/ google_ad_slot = \"5196096387\"; google_ad_width = 250; google_ad_height = 250;\n\/\/ ]]><\/script><br \/>\n<script type=\"text\/javascript\" src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">\/\/ <![CDATA[\n\n\/\/ ]]><\/script><\/p>\n<hr \/>\n<ul>\n<li>\n<div align=\"justify\">Man erstellt die Arbeitsfl\u00e4che in der gew\u00fcnschten Gr\u00f6\u00dfe \u2013 zum Beispiel 800 Pixel breit und 600 Pixel hoch (oder auch mehr, wenn man scrollbaren Inhalt hat).<\/div>\n<\/li>\n<li>\n<div align=\"justify\">nun zieht man nach und nach die gew\u00fcnschten Hintergrundgrafiken und Buttons hinein.<\/div>\n<\/li>\n<li>\n<div align=\"justify\">ebenso kann man Schriften einsetzen und mit etlichen Effekten auf h\u00fcbschen.<\/div>\n<\/li>\n<li>\n<div align=\"justify\">will man klickbare Buttons erstellen, \u00f6ffnet man ein Objekt (dies kann auch eine Gruppe sein) durch Doppelklick. Es wird nun v\u00f6llig separat bearbeitet.<\/div>\n<\/li>\n<li>\n<div align=\"justify\">Man kann nun dem Objekt 4 verschiedene Ansichten geben. Zum Beispiel kann man einen Button gl\u00fchen lassen, wenn er angeklickt wurde. Man kann ihn auch etwas versetzen, damit optisch der Effekt des \u201cgedr\u00fcckt Status\u201d erkennbar ist.<\/div>\n<\/li>\n<li>\n<div align=\"justify\">per Ebenen-Tool kann man Elemente anordnen, dass Sie optisch und logisch korrekt erscheinen (beim Bild oben ist ziemlich klar erkennbar, in welcher Reihenfolge die Ebenen liegen)<\/div>\n<\/li>\n<\/ul>\n<p align=\"justify\">Ist alles fertig, exportiert man die Htm(l) Datei und den ebenfalls erstellten Ordner mit den Grafiken.<\/p>\n<p align=\"justify\">Wirft man einen Blick in den Ordner mit den Grafiken wird man feststellen, dass die 4 verschiedenen Zust\u00e4nde der Rollover Effekte dort zu finden sind.\u00a0 Fireworks ist im \u00fcbrigen so clever und erkennt, wie gross es die Bildst\u00fccke schneiden muss, damit auch alles korrekt dargestellt wird.<\/p>\n<p align=\"justify\"><a href=\"http:\/\/nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2012\/12\/4-buttons.png\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-left: 0px; padding-right: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-top: 0px; border: 0px;\" title=\"4 buttons\" alt=\"4 buttons\" src=\"http:\/\/nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2012\/12\/4-buttons_thumb.png\" width=\"244\" height=\"83\" border=\"0\" \/><\/a><\/p>\n<p align=\"justify\"><em>(unsere 4 Buttonzust\u00e4nde. Wie Ihr seht, wird die Grafik komplett mit Hintergrund als jpg abgespeichert. die kompletten Grafiken der ganzen Seite haben grade mal 1 Megabyte an Daten, die \u00fcbertragen werden. Dadurch ist die Ladezeit der Seite noch in Ordnung)<\/em><\/p>\n<p align=\"justify\">So weit ist unsere Seite schon mal fertig und w\u00fcrde auch im Web dargestellt werden \u2013 will man aber einen Refresh einbauen, dann m\u00fcssen wir die Seite mit einem Editor f\u00fcr Webseiten \u00f6ffnen. Auch hier vertraue ich auf Produkte aus dem Hause Adobe.\u00a0 Mit dem Dreamweaver wird in wenigen Augenblicken im Head Inhalt der Refresh eingebaut \u2013 und auch der Seitenname, welcher oben in der Statusleiste des Browsers erscheint, wird angepasst, denn Fireworks gibt den Seiten Namen, wie: 00001.png.<\/p>\n<p align=\"justify\">Das soll als Abriss erst mal reichen.<\/p>\n<p align=\"justify\">Wer es mal ausprobieren will &#8211; Die Programme Dreamwaver und Fireworks kann man sich als 30 Tage Trial-Version von der Adobe Seite herunterladen. Das ist mehr als genug Zeit, um damit eine komplette Website zu erstellen.<\/p>\n<p align=\"justify\">\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n[\/fusion_builder_column][\/fusion_builder_row][\/fusion_builder_container]\n","protected":false},"excerpt":{"rendered":"<p>..oder: was tun, wenn ein Blog eine vorgeschaltete HTML-Seite braucht?.. Was tut man, wenn an den beiden Weihnachtsfeiertagen Mistwetter ist und man zum zuhause bleiben verdammt ist, gl\u00fccklicherweise weder zu irgendwelchen Verwandten muss, um sich dort den alkoholisierten Geist der Weihnacht um die Nase wehen zu lassen, noch sich die x-te Wiederholung von irgendwelchen sinnentleerten &hellip;<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[5,12,19],"tags":[25,363,139,364,342,319],"class_list":["post-4877","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-computer","category-privat","category-angetestet-software-und-apps","tag-25","tag-fireworks","tag-internet","tag-landing-page","tag-media-to-business","tag-wordpress"],"jetpack_featured_media_url":"","jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/posts\/4877","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/comments?post=4877"}],"version-history":[{"count":0,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/posts\/4877\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/media?parent=4877"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/categories?post=4877"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/tags?post=4877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}