https://www.uni-weimar.de/kunst-und-gestaltung/wiki/api.php?action=feedcontributions&feedformat=atom&user=Azzaroff 2026-04-21T16:10:13Z User contributions MediaWiki 1.39.6 https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61049 2013-10-20T19:27:47Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viewer==<br /> <br /> [[Image:pitoti.png]]<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> <br /> Im Rahmen des Digital Heritage EU-Projekts wurden in Val Camonica, in den italienischen Alpen, 5000 Jahre alte Steinzeichnungen, genannt Pitoti, digitalisiert. Dies geschah unter anderem in Zusammenarbeit der Bauhaus-Universität Weimar und Archäologen aus Cambridge. Die Digitalisierung wurde vor allem mit 3D-Laserscanning und Photogrametrie realisiert. <br /> <br /> Die daraus resultierenden 3D-Modelle konnten für vielfältige Anwendungen verwendet werden. Die Akquirierung der Daten, deren Verarbeitung und Verwendung waren Gegenstand der Bachelorarbeit Marcel Karnapkes.<br /> So wurden nicht nur die aus den Oberflächen rekonstruierten Rohdaten verwendet, sondern auch neue &quot;Skulpturen&quot; aus den Daten modelliert.<br /> <br /> Bisherige Viewer, die für diese Daten geschaffen wurden, liefen nur auf vorher eingerichteten Rechnern und waren deshalb nur einem kleinen Personenkreis vorbehalten.<br /> Ziel dieses Projekts war eine neue Art Viewer in WebGL zu konzipieren, sodass auch Laien diesen ohne komplizierte Einrichtung von externer Software benutzen können. Jeder mit einem WebGL fähigen Browser ist nun in der Lage, sich die Figuren anzusehen und das sogar auf mobilen Tablets. Außerdem sorgt eine intuitive Steuerung ohne viele Erklärungen für eine einfache Benutzbarkeit. <br /> <br /> <br /> ==Aufbau==<br /> <br /> Der Viewer teilt sich in zwei Modi ein. Man startet zunächst im &quot;Map Mode&quot;, welcher ein photogrametrisches Modell eines größeren Steins enthält. Auf diesem Modell verteilt finden sich Figuren der Steinzeichnungen, welche auf den Felsen eingehauen wurden. Fährt man mit dem Cursor über eine der Figuren, werden zusätzliche Informationen zu der zugehörigen Steinzeichnung angezeigt. Beim Klick auf die Figur wird der entsprechende View Mode geladen. Die Kamera lässt sich mit der Maus manipulieren (Zoomen, Rotation, Panning).<br /> <br /> [[Image:map_mode.png|900px]]<br /> <br /> Im View Mode kann man ein detailliertes Modell des Pitoti betrachten. <br /> Zusätzlich zur Manipulation der Kamera können noch Lichtquellen und Materialeigenschaften des Modells manipuliert werden. Dazu mehr im nächsten Abschnitt.<br /> <br /> [[Image:view_mode.png|900px]]<br /> <br /> ===Funktionen===<br /> <br /> <br /> <br /> [[Image:controls.png]]<br /> <br /> Die obere &quot;Lichtbox&quot; dient zur Manipulation von Lichtquellen. Dem Maus-Cursor folgt standardmäßig eine Punktlichtquelle, welche mit der mittleren Box an- und ausgeschaltet werden kann. Mit den Trapezen an der Seite, lassen sich Scheinwerfer-Lichtquellen (Directional Lights) hinzu- und wegschalten. Da die Figuren und Steine meist etwas gekrümmt sind, führt dies zu interessanten und unterschiedlichen Schattenwürfen.<br /> <br /> Der nächste Button weißt dem Modell ein neues Material mit einer Zufallsfarbe zu. In Verbindung mit den Lichtquellen entstehen somit unterschiedliche Kontraste. So kann man besipielsweise mit manchen Farben Details besser wahrnehmen als mit anderen.<br /> <br /> Der Lichtintensitäts-Button darunter steuert die Größe/Intensität der Lichtquelle, welche dem Maus-Cursor folgt.<br /> <br /> In späteren Versionen könnte man die eben genannten Buttons als Slider implementieren, um Farbe und Lichtintensität intuitiver einzustellen.<br /> <br /> Der letzte Button wurde als solcher deaktiviert und kann nur mit Druck auf die Leertaste ausgelöst werden. Dabei wird ein Screenshot des WebGL-Render-Inhalts erstellt und in einem neuen Tab geöffnet. <br /> <br /> <br /> [[Image:controls2.png]]<br /> <br /> Standardmäßig ist immer das erste Modell des jeweiligen Pitoti ausgewählt.<br /> Der Benutzer kann insgesamt zwischen drei Modellen wählen: &quot;Laserscan des Steins&quot;, &quot;isolierte Figur auf dem Stein&quot; und &quot;Skulptur&quot;. Des Weiteren gibt es noch einen Button um zurück zum &quot;Map Mode&quot; zu gelangen. Einmal geladen, werden<br /> die Modelle nur noch ausgetauscht. Damit ist ein schneller und flüssiger Wechsel nach dem ersten Laden möglich.<br /> <br /> ==Technologien==<br /> *three.js<br /> *jquery<br /> *CSS3<br /> <br /> ==Hinweise und Sonstiges==<br /> <br /> Three.js macht das Benutzen von WebGL extrem einfach. Außerdem bietet es nützliche Klassen, wie zum Beispiel den Raycaster, dem man einen Strahl übergibt und der damit beliebige Objekte schneidet und natürlich diese zurückliefert. Der Raycaster wird hier benutzt um die Pitoti-Figuren im &quot;Map Mode&quot; mit Mouseover und OnClick Events zu versehen. Im &quot;Viewer Mode&quot; wird der Schnittpunkt aus einem Strahl der vom Cursor ausgeht, dazu verwendet um die Maus-Lichtquelle zu positionieren.<br /> <br /> Aus CSS3 werden die Opacity für die Buttons, abgerundete Ecken und Farbverläufe benutzt. JQuery wird hauptsächlich für die Manipulation des DOM und für das Anlegen von Event Listeners benutzt.<br /> <br /> Die Modelle wurden von einem ursprünglichen hochauflösenden Obj-Modell, in Blender importiert und deren Komplexität verkleinert, sodass sie i.d.R. nicht größer sind als 2 MB. Zusätzlich werden sie in ein von Three.js verwendetes JSON-Format konvertiert. Es gibt zwar einen OBJ-Loader in Three.js, dieser ist aber extrem langsam, weil er wahrscheinlich intern genau diese Formatierung vornimmt. Durch die kleinen Modellen gehen natürlich Details verloren, aber nur so ist es möglich, das diese auch auf langsameren Rechnern flüssig angezeigt werden. Außerdem werden sie dadurch auch schneller geladen.<br /> <br /> Der Viewer läuft außerdem auch auf Tablets und dass sogar mit vollem Funktionsumfang. Getestet wurde auf einem Nexus 10 mit dem Chrome Browser.<br /> <br /> In Chrome scheint der Viewer generell besser zu laufen. So ruckelt er leicht in Firefox, ist aber noch gut benutzbar.<br /> <br /> ==Danksagung==<br /> Vielen Dank an Marcel Karnapke, welcher nicht nur die gescannten Objekte zur Verfügung gestellt hat, sondern auch viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beisteuerte.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61044 2013-10-19T15:45:55Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viewer==<br /> <br /> [[Image:pitoti.png]]<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> <br /> Im Rahmen des Digital Heritage EU-Projekts wurden in Val Camonica, in den italienischen Alpen, 5000 Jahre alte Steinzeichnungen, genannt Pitoti, digitalisiert. Dies geschah unter anderem in Zusammenarbeit der Bauhaus-Universität Weimar und Archäologen aus Cambridge. Die Digitalisierung wurde vor allem mit 3D-Laserscanning und Photogrametrie realisiert. <br /> <br /> Die daraus resultierenden 3D-Modelle konnten für vielfältige Anwendungen verwendet werden. Die Akquirierung der Daten, deren Verarbeitung und Verwendung waren Gegenstand der Bachelorarbeit Marcel Karnapkes.<br /> So wurden nicht nur die aus den Oberflächen rekonstruierten Rohdaten verwendet, sondern auch neue &quot;Skulpturen&quot; aus den Daten modelliert.<br /> <br /> Bisherige Viewer, die für diese Daten geschaffen wurden, liefen nur auf vorher eingerichteten Rechnern und waren deshalb nur einem kleinen Personenkreis vorbehalten.<br /> Ziel dieses Projekts war eine neue Art Viewer in WebGL zu konzipieren, sodass auch Laien diesen ohne komplizierte Einrichtung von externer Software benutzen können. Jeder mit einem WebGL fähigen Browser ist nun in der Lage, sich die Figuren anzusehen und das sogar auf mobilen Tablets. Außerdem sorgt eine intuitive Steuerung ohne viele Erklärungen für eine einfache Benutzbarkeit. <br /> <br /> <br /> ==Aufbau==<br /> <br /> Der Viewer teilt sich in zwei Modi ein. Man startet zunächst im &quot;Map Mode&quot;, welcher ein photogrametrisches Modell eines größeren Steins enthält. Auf diesem Modell verteilt finden sich Figuren der Steinzeichnungen, welche auf den Felsen eingehauen wurden. Fährt man mit dem Cursor über eine der Figuren, werden zusätzliche Informationen zu der zugehörigen Steinzeichnung angezeigt. Beim Klick auf die Figur wird der entsprechende View Mode geladen. Die Kamera lässt sich mit der Maus manipulieren (Zoomen, Rotation, Panning).<br /> <br /> [[Image:map_mode.png|900px]]<br /> <br /> Im View Mode kann man ein detailliertes Modell des Pitoti betrachten. <br /> Zusätzlich zur Manipulation der Kamera können noch Lichtquellen und Materialeigenschaften des Modells manipuliert werden. Dazu mehr im nächsten Abschnitt.<br /> <br /> [[Image:view_mode.png|900px]]<br /> <br /> ===Funktionen===<br /> <br /> <br /> <br /> [[Image:controls.png]]<br /> <br /> Die obere &quot;Lichtbox&quot; dient zur Manipulation von Lichtquellen. Dem Maus-Cursor folgt standardmäßig eine Punktlichtquelle, welche mit der mittleren Box an- und ausgeschaltet werden kann. Mit den Trapezen an der Seite, lassen sich Scheinwerfer-Lichtquellen (Directional Lights) hinzu- und wegschalten. Da die Figuren und Steine meist etwas gekrümmt sind, führt dies zu interessanten und unterschiedlichen Schattenwürfen.<br /> <br /> Der nächste Button weißt dem Modell ein neues Material mit einer Zufallsfarbe zu. In Verbindung mit den Lichtquellen entstehen somit unterschiedliche Kontraste. So kann man besipielsweise mit manchen Farben Details besser wahrnehmen als mit anderen.<br /> <br /> Der Lichtintensitäts-Button darunter steuert die Größe/Intensität der Lichtquelle, welche dem Maus-Cursor folgt.<br /> <br /> In späteren Versionen könnte man die eben genannten Buttons als Slider implementieren, um Farbe und Lichtintensität intuitiver einzustellen.<br /> <br /> Der letzte Button wurde als solcher deaktiviert und kann nur mit Druck auf die Leertaste ausgelöst werden. Dabei wird ein Screenshot des WebGL-Render-Inhalts erstellt und in einem neuen Tab geöffnet. <br /> <br /> <br /> [[Image:controls2.png]]<br /> <br /> Standardmäßig ist immer das erste Modell des jeweiligen Pitoti ausgewählt.<br /> Der Benutzer kann insgesamt zwischen drei Modellen wählen: &quot;Laserscan des Steins&quot;, &quot;isolierte Figur auf dem Stein&quot; und &quot;Skulptur&quot;. Des Weiteren gibt es noch einen Button um zurück zum &quot;Map Mode&quot; zu gelangen. Einmal geladen, werden<br /> die Modelle nur noch ausgetauscht. Damit ist ein schneller und flüssiger Wechsel nach dem ersten Laden möglich.<br /> <br /> ==Technologien==<br /> *three.js<br /> *jquery<br /> *CSS3<br /> <br /> ==Hinweise und Sonstiges==<br /> <br /> Three.js macht das Benutzen von WebGL extrem einfach. Außerdem bietet es nützliche Klassen, wie zum Beispiel den Raycaster, dem man einen Strahl übergibt und der damit beliebige Objekte schneidet und natürlich diese zurückliefert. Der Raycaster wird hier benutzt um die Pitoti-Figuren im &quot;Map Mode&quot; mit Mouseover und OnClick Events zu versehen. Im &quot;Viewer Mode&quot; wird der Schnittpunkt aus einem Strahl der vom Cursor ausgeht, dazu verwendet um die Maus-Lichtquelle zu positionieren.<br /> <br /> Aus CSS3 werden die Opacity für die Buttons, abgerundete Ecken und Farbverläufe benutzt. JQuery wird hauptsächlich für die Manipulation des DOM und für das Anlegen von Event Listeners benutzt.<br /> <br /> Die Modelle wurden von einem ursprünglichen hochauflösenden Obj-Modell, in Blender importiert und deren Komplexität verkleinert, sodass sie i.d.R. nicht größer sind als 2 MB. Zusätzlich werden sie in ein von Three.js verwendetes JSON-Format konvertiert. Es gibt zwar einen OBJ-Loader in Three.js, dieser ist aber extrem langsam, weil er wahrscheinlich intern genau diese Formatierung vornimmt. Durch die kleinen Modellen gehen natürlich Details verloren, aber nur so ist es möglich, das diese auch auf langsameren Rechnern flüssig angezeigt werden. Außerdem werden sie dadurch auch schneller geladen.<br /> <br /> Der Viewer läuft außerdem auch auf Tablets und dass sogar mit vollem Funktionsumfang. Getestet wurde auf einem Nexus 10 mit dem Chrome Browser.<br /> <br /> In Chrome scheint der Viewer generell besser zu laufen. So ruckelt er leicht in Firefox, ist aber noch gut benutzbar.<br /> <br /> ==Danksagung==<br /> Vielen Dank an Marcel Karnapke, welcher nicht nur die gescannten Objekte zur Verfügung gestellt hat, sondern auch viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuerte.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61043 2013-10-19T15:30:14Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viewer==<br /> <br /> [[Image:pitoti.png]]<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> <br /> Im Rahmen des Digital Heritage EU-Projekts wurden in Val Camonica, in den italienischen Alpen, 5000 Jahre alte Steinzeichnungen genannt Pitoti, digitalisiert. Dies geschah unter anderem mit der Zusammenarbeit der Bauhaus-Universität Weimar und Archeologen aus Cambridge. Die Digitalisierung wurde vor allem mit 3D-Laserscanning und Photogrametrie realisiert. <br /> <br /> Die daraus resultierenden 3D-Modelle konnten daraufhin für vielfältige Anwendungen verwendet werden. Die Akquirierung der Daten, deren Verarbeitung und Verwendung, waren Gegenstand der Bachelorarbeit Marcel Karnapkes.<br /> So wurden nicht nur die Oberflächen rekonstruierten Rohdaten des Steins verwendet, sondern auch neue &quot;Skulpturen&quot; aus den Daten modelliert.<br /> <br /> Bisherige Viewer die für diese Daten geschaffen wurden, liefen nur auf vorher eingerichteten Rechnern und waren nur einen kleinen Personenkreis vorbehalten.<br /> Ziel dieses Projekts war eine neue Art Viewer in WebGL zu konzipieren, sodass auch Laien diesen ohne komplizierte Einrichtung von externer Software benutzen können. Jeder mit einem WebGL fähigen Browser ist nun in der Lage sich die Figuren anzusehen und das sogar auf mobilen Tablets. Außerdem sorgt eine intuitive Steuerung ohne viel Erklärung für eine einfache Benutzbarkeit. <br /> <br /> <br /> ==Aufbau==<br /> <br /> Der Viewer teilt sich in zwei Modi ein. Man startet zunächst im &quot;Map Mode&quot;, welcher ein photogrametrisches Modell eines größeren Steins enthält. Auf diesem Modell verteilt finden sich Figuren der Steinzeichnungen, welche auf den Felsen eingehauen wurden. Fährt man mit dem Curor über eine der Figuren, werden zusätzliche Informationen zu der zugehörigen Steinzeichnung angezeigt. Beim Klick auf die Figur wird der entsprechende View Mode geladen. Die Kamera lässt sich mit der Maus manipulieren (Zoomen, Rotation, Panning).<br /> <br /> [[Image:map_mode.png|900px]]<br /> <br /> Im View Mode kann man ein detailliertes Modell des Pitoti betrachten. <br /> Zusätzlich zur Manipulation der Kamera, können noch Lichtquellen und Materialeigenschaften des Modells manipuliert werden. Dazu mehr im nächsten Abschnitt.<br /> <br /> [[Image:view_mode.png|900px]]<br /> <br /> ===Funktionen===<br /> <br /> <br /> <br /> [[Image:controls.png]]<br /> <br /> Die obere &quot;Lichtbox&quot; dient zur Manipulation von Lichtquellen. Dem Maus-Cursur folgt standardmäßig eine Punktlichtquelle, welche mit der mittleren Box an- und ausgeschaltet werden kann. Mit den Trapezen an der Seite, lassen sich Scheinwerfer-Lichtquellen (Directional Lights) hinzu- und wegschalten. Da die Figuren und Steine meist etwas gekrümmt sind, führt dies zu interessanten und unterschiedlichen Schattenwürfen.<br /> <br /> Der nächste Button weißt dem Modell ein neues Material mit einer Zufallsfarbe zu. In Verbindung mit den Lichtquellen entstehen somit Unterschiedliche Kontraste, so kann man mit manchen Farben Details besser wahrnehmen, als mit anderen.<br /> <br /> Der Lichtintensitäts Button darunter steuert die Größe/Intensität der Lichtquelle, welche dem Maus-Cursur folgt.<br /> <br /> In späteren Versionen könnte man die eben genannten Buttons als Slider implementieren, um Farbe und Lichtintensität intuitiver einzustellen.<br /> <br /> Der letzte Button, wurde als solcher deaktiviert und kann nur mit Druck auf die Leertaste ausgelöst werden. Dabei wird ein Screenshot des WebGL-Render-Inhalts erstellt und in einem neuen Tab geöffnet. <br /> <br /> <br /> [[Image:controls2.png]]<br /> <br /> Standardmäßig ist immer das erste Modell des jeweiligen Pitoti ausgewählt.<br /> Der Benutzer kann insgesamt zwischen drei Modellen wählen: &quot;Laserscan des Steins&quot;, &quot;isolierte Figur auf dem Stein&quot; und &quot;Skulptur&quot;. Desweiteren gibt es noch einen Button um zurück zum &quot;Map Mode&quot; zu gelangen. Einmal geladen, werden<br /> die Modelle nur noch ausgetauscht, damit ist ein schneller und flüssiger Wechsel nach dem ersten Laden möglich.<br /> <br /> ==Technologien==<br /> *three.js<br /> *jquery<br /> *CSS3<br /> <br /> ==Hinweise und Sonstiges==<br /> <br /> Three.js macht das Benutzen von WebGL extrem einfacher. Außerdem bietet es nützliche Klassen, wie zum Beispiel den Raycaster, dem man einen Strahl übergibt und der damit beliebige Objekte schneidet und natürlich diese zurückliefert. Der Raycaster wird hier benutzt um die Pitoti-Figuren im &quot;Map Mode&quot; mit Mouseover und OnClick Events zu versehen. Im &quot;Viewer Mode&quot; wird der Schnittpunkt aus einem Strahl der vom Cursur ausgeht, dazu verwendet um die Maus-Lichtquelle zu positionieren.<br /> <br /> Aus CSS3 werden die Opacity für die Buttons, abgerundete Ecken und Farbverläufe benutzt. JQuery wird hauptsächlich für die Manipulation des DOM und für das anlegen von Event Listeners benutzt.<br /> <br /> Die Modelle wurden von einem ursprünglichen hochauflösenden Obj-Modell, in Blender importiert und deren Komplexität verkleinert, sodass sie i.d.R. nicht größer sind als 2 MB. Zusätzlich werden sie in ein von Three.js verwendetes JSON-Format konvertiert. Es gibt zwar einen OBJ-Loader in Three.js, dieser ist aber extrem langsam, weil er wahrscheinlich intern genau diese Formatierung vornimmt. Durch die kleinen Modellen gehen natürlich Details verloren, aber nur so ist es möglich, das diese auch auf langsameren Rechnern flüssig angezeigt werden. Außerdem werden sie dadurch auch schneller geladen.<br /> <br /> Der Viewer läuft außerdem auch auf Tablets und dass sogar mit vollem Funktionsumfang. Getestet wurden auf einem Nexus 10 mit dem Chrome Browser.<br /> <br /> In Chrome scheint der Viewer generell besser zu laufen, so ruckelt er leicht in Firefox, ist aber noch gut benutzbar. Den Grund konnte ich leider nicht ausmachen.<br /> <br /> ==Danksagung==<br /> Vielen Dank an Marcel Karnapke, welcher viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuert hat.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61042 2013-10-19T13:52:41Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viewer==<br /> <br /> [[Image:pitoti.png]]<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> <br /> Im Rahmen des Digital Heritage EU-Projekts wurden in Val Camonica, in den italienischen Alpen, 5000 Jahre alte Steinzeichnungen genannt Pitoti, digitalisiert. Dies geschah unter anderem mit der Zusammenarbeit der Bauhaus-Universität Weimar und Archeologen aus Cambridge. Die Digitalisierung wurde vor allem mit 3D-Laserscanning und Photogrametrie realisiert. <br /> <br /> Die daraus resultierenden 3D-Modelle konnten daraufhin für vielfältige Anwendungen verwendet werden. Die Akquirierung der Daten, deren Verarbeitung und Verwendung, waren Gegenstand der Bachelorarbeit Marcel Karnapkes.<br /> So wurden nicht nur die Oberflächen rekonstruierten Rohdaten des Steins verwendet, sondern auch neue &quot;Skulpturen&quot; aus den Daten modelliert.<br /> <br /> Bisherige Viewer die für diese Daten geschaffen wurden, liefen nur auf vorher eingerichteten Rechnern und waren nur einen kleinen Personenkreis vorbehalten.<br /> Ziel dieses Projekts war eine neue Art Viewer in WebGL zu konzipieren, sodass auch Laien diesen ohne komplizierte Einrichtung von externer Software benutzen können. Jeder mit einem WebGL fähigen Browser ist nun in der Lage sich die Figuren anzusehen und das sogar auf mobilen Tablets. Außerdem sorgt eine intuitive Steuerung ohne viel Erklärung für eine einfache Benutzbarkeit. <br /> <br /> <br /> ==Aufbau==<br /> <br /> Der Viewer teilt sich in zwei Modi ein. Man startet zunächst im &quot;Map Mode&quot;, welcher ein photogrametrisches Modell eines größeren Steins enthält. Auf diesem Modell verteilt finden sich Figuren der Steinzeichnungen, welche auf den Felsen eingehauen wurden. Fährt man mit dem Curor über eine der Figuren, werden zusätzliche Informationen zu der zugehörigen Steinzeichnung angezeigt. Beim Klick auf die Figur wird der entsprechende View Mode geladen. Die Kamera lässt sich mit der Maus manipulieren (Zoomen, Rotation, Panning).<br /> <br /> [[Image:map_mode.png|900px]]<br /> <br /> Im View Mode kann man ein detailliertes Modell des Pitoti betrachten. <br /> Zusätzlich zur Manipulation der Kamera, können noch Lichtquellen und Materialeigenschaften des Modells manipuliert werden. Dazu mehr im nächsten Abschnitt.<br /> <br /> [[Image:view_mode.png|900px]]<br /> <br /> ===Funktionen===<br /> <br /> <br /> <br /> [[Image:controls.png]]<br /> <br /> Die obere &quot;Lichtbox&quot; dient zur Manipulation von Lichtquellen. Dem Maus-Cursur folgt standardmäßig eine Punktlichtquelle, welche mit der mittleren Box an- und ausgeschaltet werden kann. Mit den Trapezen an der Seite, lassen sich Scheinwerfer-Lichtquellen (Directional Lights) hinzu- und wegschalten. Da die Figuren und Steine meist etwas gekrümmt sind, führt dies zu interessanten und unterschiedlichen Schattenwürfen.<br /> <br /> Der nächste Button weißt dem Modell ein neues Material mit einer Zufallsfarbe zu. In Verbindung mit den Lichtquellen entstehen somit Unterschiedliche Kontraste, so kann man mit manchen Farben Details besser wahrnehmen, als mit anderen.<br /> <br /> Der Lichtintensitäts Button darunter steuert die Größe/Intensität der Lichtquelle, welche dem Maus-Cursur folgt.<br /> <br /> In späteren Versionen könnte man die eben genannten Buttons als Slider implementieren, um Farbe und Lichtintensität intuitiver einzustellen.<br /> <br /> Der letzte Button, wurde als solcher deaktiviert und kann nur mit Druck auf die Leertaste ausgelöst werden. Dabei wird ein Screenshot des WebGL-Render-Inhalts erstellt und in einem neuen Tab geöffnet. <br /> <br /> <br /> [[Image:controls2.png]]<br /> <br /> Standardmäßig ist immer das erste Modell des jeweiligen Pitoti ausgewählt.<br /> Der Benutzer kann insgesamt zwischen drei Modellen wählen: &quot;Laserscan des Steins&quot;, &quot;isolierte Figur auf dem Stein&quot; und &quot;Skulptur&quot;. Desweiteren gibt es noch einen Button um zurück zum &quot;Map Mode&quot; zu gelangen. Einmal geladen, werden<br /> die Modelle nur noch ausgetauscht, damit ist ein schneller und flüssiger Wechsel nach dem ersten Laden möglich.<br /> <br /> ==Technologien==<br /> *three.js<br /> *jquery<br /> *CSS3<br /> <br /> ==Hinweise und Sonstiges==<br /> <br /> Three.js macht das Benutzen von WebGL extrem einfacher. Außerdem bietet es nützliche Klassen, wie zum Beispiel den Raycaster, dem man einen Strahl übergibt und der damit beliebige Objekte schneidet und natürlich diese zurückliefert. Der Raycaster wird hier benutzt um die Pitoti-Figuren im &quot;Map Mode&quot; mit Mouseover und OnClick Events zu versehen. Im &quot;Viewer Mode&quot; wird der Schnittpunkt aus einem Strahl der vom Cursur ausgeht, dazu verwendet um die Maus-Lichtquelle zu positionieren.<br /> <br /> Aus CSS3 werden die Opacity für die Buttons, abgerundete Ecken und Farbverläufe benutzt. JQuery wird hauptsächlich für die Manipulation des DOM und für das anlegen von Event Listeners benutzt.<br /> <br /> Die Modelle wurden von einem ursprünglichen hochauflösenden Obj-Modell, in Blender importiert und deren Komplexität verkleinert, sodass sie i.d.R. nicht größer sind als 2 MB. Zusätzlich werden sie in ein von Three.js verwendetes JSON-Format konvertiert. Es gibt zwar einen OBJ-Loader in Three.js, dieser ist aber extrem langsam, weil er wahrscheinlich intern genau diese Formatierung vornimmt. Durch die kleinen Modellen gehen natürlich Details verloren, aber nur so ist es möglich, das diese auch auf langsameren Rechnern flüssig angezeigt werden. Außerdem werden sie dadurch auch schneller geladen.<br /> <br /> Der Viewer läuft außerdem auch auf Tablets und dass sogar mit vollem Funktionsumfang. Getestet wurden auf einem Nexus 7 mit dem Chrome Browser.<br /> <br /> In Chrome scheint der Viewer generell besser zu laufen, so ruckelt er leicht in Firefox, ist aber noch gut benutzbar. Den Grund konnte ich leider nicht ausmachen.<br /> <br /> ==Props==<br /> Vielen Dank an Marcel Karnapke, welcher viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuert hat.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61041 2013-10-19T13:51:42Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viewer==<br /> <br /> [[Image:pitoti.png]]<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> <br /> Im Rahmen des Digital Heritage EU-Projekts wurden in Val Camonica, in den italienischen Alpen, 5000 Jahre alte Steinzeichnungen genannt Pitoti, digitalisiert. Dies geschah unter anderem mit der Zusammenarbeit der Bauhaus-Universität Weimar und Archeologen aus Cambridge. Die Digitalisierung wurde vor allem mit 3D-Laserscanning und Photogrametrie realisiert. <br /> <br /> Die daraus resultierenden 3D-Modelle konnten daraufhin für vielfältige Anwendungen verwendet werden. Die Akquirierung der Daten, deren Verarbeitung und Verwendung, waren Gegenstand der Bachelorarbeit Marcel Karnapkes.<br /> So wurden nicht nur die Oberflächen rekonstruierten Rohdaten des Steins verwendet, sondern auch neue &quot;Skulpturen&quot; aus den Daten modelliert.<br /> <br /> Bisherige Viewer die für diese Daten geschaffen wurden, liefen nur auf vorher eingerichteten Rechnern und waren nur einen kleinen Personenkreis vorbehalten.<br /> Ziel dieses Projekts war eine neue Art Viewer in WebGL zu konzipieren, sodass auch Laien diesen ohne komplizierte Einrichtung von externer Software benutzen können. Jeder mit einem WebGL fähigen Browser ist nun in der Lage sich die Figuren anzusehen und das sogar auf mobilen Tablets. Außerdem sorgt eine intuitive Steuerung ohne viel Erklärung für eine einfache Benutzbarkeit. <br /> <br /> <br /> ==Aufbau==<br /> <br /> Der Viewer teilt sich in zwei Modi ein. Man startet zunächst im &quot;Map Mode&quot;, welcher ein photogrametrisches Modell eines größeren Steins enthält. Auf diesem Modell verteilt finden sich Figuren der Steinzeichnungen, welche auf den Felsen eingehauen wurden. Fährt man mit dem Curor über eine der Figuren, werden zusätzliche Informationen zu der zugehörigen Steinzeichnung angezeigt. Beim Klick auf die Figure wird der entsprechende View Mode geladen. Die Kamera lässt sich mit der Maus manipulieren (Zoomen, Rotation, Panning).<br /> <br /> [[Image:map_mode.png|900px]]<br /> <br /> Im View Mode kann man ein detailliertes Modell des Pitoti betrachten. <br /> Zusätzlich zur Manipulation der Kamera, können noch Lichtquellen und Materialeigenschaften des Modells manipuliert werden. Dazu mehr im nächsten Abschnitt.<br /> <br /> [[Image:view_mode.png|900px]]<br /> <br /> ===Funktionen===<br /> <br /> <br /> <br /> [[Image:controls.png]]<br /> <br /> Die obere &quot;Lichtbox&quot; dient zur Manipulation von Lichtquellen. Dem Maus-Cursur folgt standardmäßig eine Punktlichtquelle, welche mit der mittleren Box an- und ausgeschaltet werden kann. Mit den Trapezen an der Seite, lassen sich Scheinwerfer-Lichtquellen (Directional Lights) hinzu- und wegschalten. Da die Figuren und Steine meist etwas gekrümmt sind, führt dies zu interessanten und unterschiedlichen Schattenwürfen.<br /> <br /> Der nächste Button weißt dem Modell ein neues Material mit einer Zufallsfarbe zu. In Verbindung mit den Lichtquellen entstehen somit Unterschiedliche Kontraste, so kann man mit manchen Farben Details besser wahrnehmen, als mit anderen.<br /> <br /> Der Lichtintensitäts Button darunter steuert die Größe/Intensität der Lichtquelle, welche dem Maus-Cursur folgt.<br /> <br /> In späteren Versionen könnte man die eben genannten Buttons als Slider implementieren, um Farbe und Lichtintensität intuitiver einzustellen.<br /> <br /> Der letzte Button, wurde als solcher deaktiviert und kann nur mit Druck auf die Leertaste ausgelöst werden. Dabei wird ein Screenshot des WebGL-Render-Inhalts erstellt und in einem neuen Tab geöffnet. <br /> <br /> <br /> [[Image:controls2.png]]<br /> <br /> Standardmäßig ist immer das erste Modell des jeweiligen Pitoti ausgewählt.<br /> Der Benutzer kann insgesamt zwischen drei Modellen wählen: &quot;Laserscan des Steins&quot;, &quot;isolierte Figur auf dem Stein&quot; und &quot;Skulptur&quot;. Desweiteren gibt es noch einen Button um zurück zum &quot;Map Mode&quot; zu gelangen. Einmal geladen, werden<br /> die Modelle nur noch ausgetauscht, damit ist ein schneller und flüssiger Wechsel nach dem ersten Laden möglich.<br /> <br /> ==Technologien==<br /> *three.js<br /> *jquery<br /> *CSS3<br /> <br /> ==Hinweise und Sonstiges==<br /> <br /> Three.js macht das Benutzen von WebGL extrem einfacher. Außerdem bietet es nützliche Klassen, wie zum Beispiel den Raycaster, dem man einen Strahl übergibt und der damit beliebige Objekte schneidet und natürlich diese zurückliefert. Der Raycaster wird hier benutzt um die Pitoti-Figuren im &quot;Map Mode&quot; mit Mouseover und OnClick Events zu versehen. Im &quot;Viewer Mode&quot; wird der Schnittpunkt aus einem Strahl der vom Cursur ausgeht, dazu verwendet um die Maus-Lichtquelle zu positionieren.<br /> <br /> Aus CSS3 werden die Opacity für die Buttons, abgerundete Ecken und Farbverläufe benutzt. JQuery wird hauptsächlich für die Manipulation des DOM und für das anlegen von Event Listeners benutzt.<br /> <br /> Die Modelle wurden von einem ursprünglichen hochauflösenden Obj-Modell, in Blender importiert und deren Komplexität verkleinert, sodass sie i.d.R. nicht größer sind als 2 MB. Zusätzlich werden sie in ein von Three.js verwendetes JSON-Format konvertiert. Es gibt zwar einen OBJ-Loader in Three.js, dieser ist aber extrem langsam, weil er wahrscheinlich intern genau diese Formatierung vornimmt. Durch die kleinen Modellen gehen natürlich Details verloren, aber nur so ist es möglich, das diese auch auf langsameren Rechnern flüssig angezeigt werden. Außerdem werden sie dadurch auch schneller geladen.<br /> <br /> Der Viewer läuft außerdem auch auf Tablets und dass sogar mit vollem Funktionsumfang. Getestet wurden auf einem Nexus 7 mit dem Chrome Browser.<br /> <br /> In Chrome scheint der Viewer generell besser zu laufen, so ruckelt er leicht in Firefox, ist aber noch gut benutzbar. Den Grund konnte ich leider nicht ausmachen.<br /> <br /> ==Props==<br /> Vielen Dank an Marcel Karnapke, welcher viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuert hat.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61040 2013-10-19T13:50:52Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viewer==<br /> <br /> [[Image:pitoti.png]]<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> <br /> Im Rahmen des Digital Heritage EU-Projekts wurden in Val Camonica, in den italienischen Alpen, 5000 Jahre alte Steinzeichnungen genannt Pitoti, digitalisiert. Dies geschah unter anderem mit der Zusammenarbeit der Bauhaus-Universität Weimar und Archeologen aus Cambridge. Die Digitalisierung wurde vor allem mit 3D-Laserscanning und Photogrametrie realisiert. <br /> <br /> Die daraus resultierenden 3D-Modelle konnten daraufhin für vielfältige Anwendungen verwendet werden. Die Akquirierung der Daten, deren Verarbeitung und Verwendung, waren Gegenstand der Bachelorarbeit Marcel Karnapkes.<br /> So wurden nicht nur die Oberflächen rekonstruierten Rohdaten des Steins verwendet, sondern auch neue &quot;Skulpturen&quot; aus den Daten modelliert.<br /> <br /> Bisherige Viewer die für diese Daten geschaffen wurden, liefen nur auf vorher eingerichteten Rechnern und waren nur einen kleinen Personenkreis vorbehalten.<br /> Ziel dieses Projekts war eine neue Art Viewer in WebGL zu konzipieren, sodass auch Laien diesen ohne komplizierte Einrichtung von externer Software benutzen können. Jeder mit einem WebGl fähigen Browser ist nun in der Lage sich die Figuren anzusehen und das sogar auf mobilen Tablets. Außerdem sorgt eine intuitive Steuerung ohne viel Erklärung für eine einfache Benutzbarkeit. <br /> <br /> <br /> ==Aufbau==<br /> <br /> Der Viewer teilt sich in zwei Modi ein. Man startet zunächst im &quot;Map Mode&quot;, welcher ein photogrametrisches Modell eines größeren Steins enthält. Auf diesem Modell verteilt finden sich Figuren der Steinzeichnungen, welche auf den Felsen eingehauen wurden. Fährt man mit dem Curor über eine der Figuren, werden zusätzliche Informationen zu der zugehörigen Steinzeichnung angezeigt. Beim Klick auf die Figure wird der entsprechende View Mode geladen. Die Kamera lässt sich mit der Maus manipulieren (Zoomen, Rotation, Panning).<br /> <br /> [[Image:map_mode.png|900px]]<br /> <br /> Im View Mode kann man ein detailliertes Modell des Pitoti betrachten. <br /> Zusätzlich zur Manipulation der Kamera, können noch Lichtquellen und Materialeigenschaften des Modells manipuliert werden. Dazu mehr im nächsten Abschnitt.<br /> <br /> [[Image:view_mode.png|900px]]<br /> <br /> ===Funktionen===<br /> <br /> <br /> <br /> [[Image:controls.png]]<br /> <br /> Die obere &quot;Lichtbox&quot; dient zur Manipulation von Lichtquellen. Dem Maus-Cursur folgt standardmäßig eine Punktlichtquelle, welche mit der mittleren Box an- und ausgeschaltet werden kann. Mit den Trapezen an der Seite, lassen sich Scheinwerfer-Lichtquellen (Directional Lights) hinzu- und wegschalten. Da die Figuren und Steine meist etwas gekrümmt sind, führt dies zu interessanten und unterschiedlichen Schattenwürfen.<br /> <br /> Der nächste Button weißt dem Modell ein neues Material mit einer Zufallsfarbe zu. In Verbindung mit den Lichtquellen entstehen somit Unterschiedliche Kontraste, so kann man mit manchen Farben Details besser wahrnehmen, als mit anderen.<br /> <br /> Der Lichtintensitäts Button darunter steuert die Größe/Intensität der Lichtquelle, welche dem Maus-Cursur folgt.<br /> <br /> In späteren Versionen könnte man die eben genannten Buttons als Slider implementieren, um Farbe und Lichtintensität intuitiver einzustellen.<br /> <br /> Der letzte Button, wurde als solcher deaktiviert und kann nur mit Druck auf die Leertaste ausgelöst werden. Dabei wird ein Screenshot des WebGL-Render-Inhalts erstellt und in einem neuen Tab geöffnet. <br /> <br /> <br /> [[Image:controls2.png]]<br /> <br /> Standardmäßig ist immer das erste Modell des jeweiligen Pitoti ausgewählt.<br /> Der Benutzer kann insgesamt zwischen drei Modellen wählen: &quot;Laserscan des Steins&quot;, &quot;isolierte Figur auf dem Stein&quot; und &quot;Skulptur&quot;. Desweiteren gibt es noch einen Button um zurück zum &quot;Map Mode&quot; zu gelangen. Einmal geladen, werden<br /> die Modelle nur noch ausgetauscht, damit ist ein schneller und flüssiger Wechsel nach dem ersten Laden möglich.<br /> <br /> ==Technologien==<br /> *three.js<br /> *jquery<br /> *CSS3<br /> <br /> ==Hinweise und Sonstiges==<br /> <br /> Three.js macht das Benutzen von WebGL extrem einfacher. Außerdem bietet es nützliche Klassen, wie zum Beispiel den Raycaster, dem man einen Strahl übergibt und der damit beliebige Objekte schneidet und natürlich diese zurückliefert. Der Raycaster wird hier benutzt um die Pitoti-Figuren im &quot;Map Mode&quot; mit Mouseover und OnClick Events zu versehen. Im &quot;Viewer Mode&quot; wird der Schnittpunkt aus einem Strahl der vom Cursur ausgeht, dazu verwendet um die Maus-Lichtquelle zu positionieren.<br /> <br /> Aus CSS3 werden die Opacity für die Buttons, abgerundete Ecken und Farbverläufe benutzt. JQuery wird hauptsächlich für die Manipulation des DOM und für das anlegen von Event Listeners benutzt.<br /> <br /> Die Modelle wurden von einem ursprünglichen hochauflösenden Obj-Modell, in Blender importiert und deren Komplexität verkleinert, sodass sie i.d.R. nicht größer sind als 2 MB. Zusätzlich werden sie in ein von Three.js verwendetes JSON-Format konvertiert. Es gibt zwar einen OBJ-Loader in Three.js, dieser ist aber extrem langsam, weil er wahrscheinlich intern genau diese Formatierung vornimmt. Durch die kleinen Modellen gehen natürlich Details verloren, aber nur so ist es möglich, das diese auch auf langsameren Rechnern flüssig angezeigt werden. Außerdem werden sie dadurch auch schneller geladen.<br /> <br /> Der Viewer läuft außerdem auch auf Tablets und dass sogar mit vollem Funktionsumfang. Getestet wurden auf einem Nexus 7 mit dem Chrome Browser.<br /> <br /> In Chrome scheint der Viewer generell besser zu laufen, so ruckelt er leicht in Firefox, ist aber noch gut benutzbar. Den Grund konnte ich leider nicht ausmachen.<br /> <br /> ==Props==<br /> Vielen Dank an Marcel Karnapke, welcher viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuert hat.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61039 2013-10-19T13:49:35Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viewer==<br /> <br /> [[Image:pitoti.png]]<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> <br /> Im Rahmen des Digital Heritage EU-Projekts wurden in Val Camonica, in den italienischen Alpen, 5000 Jahre alte Steinzeichnungen genannt Pitoti, digitalisiert. Dies geschah unter anderem mit der Zusammenarbeit der Bauhaus-Universität Weimar und Archeologen aus Cambridge. Die Digitalisierung gescha vor allem mit 3D-Laserscanning und Photogrametrie. <br /> <br /> Die daraus resultierenden 3D-Modelle konnten daraufhin für vielfältige Anwendungen verwendet werden. Die Akquirierung der Daten, deren Verarbeitung und Verwendung, waren Gegenstand der Bachelorarbeit Marcel Karnapkes.<br /> So wurden nicht nur die Oberflächen rekonstruierten Rohdaten des Steins verwendet, sondern auch neue &quot;Skulpturen&quot; aus den Daten modelliert.<br /> <br /> Bisherige Viewer die für diese Daten geschaffen wurden, liefen nur auf vorher eingerichteten Rechnern und waren nur einen kleinen Personenkreis vorbehalten.<br /> Ziel dieses Projekts war eine neue Art Viewer in WebGL zu konzipieren, sodass auch Laien diesen ohne komplizierte Einrichtung von externer Software benutzen können. Jeder mit einem WebGl fähigen Browser ist nun in der Lage sich die Figuren anzusehen und das sogar auf mobilen Tablets. Außerdem sorgt eine intuitive Steuerung ohne viel Erklärung für eine einfache Benutzbarkeit. <br /> <br /> <br /> ==Aufbau==<br /> <br /> Der Viewer teilt sich in zwei Modi ein. Man startet zunächst im &quot;Map Mode&quot;, welcher ein photogrametrisches Modell eines größeren Steins enthält. Auf diesem Modell verteilt finden sich Figuren der Steinzeichnungen, welche auf den Felsen eingehauen wurden. Fährt man mit dem Curor über eine der Figuren, werden zusätzliche Informationen zu der zugehörigen Steinzeichnung angezeigt. Beim Klick auf die Figure wird der entsprechende View Mode geladen. Die Kamera lässt sich mit der Maus manipulieren (Zoomen, Rotation, Panning).<br /> <br /> [[Image:map_mode.png|900px]]<br /> <br /> Im View Mode kann man ein detailliertes Modell des Pitoti betrachten. <br /> Zusätzlich zur Manipulation der Kamera, können noch Lichtquellen und Materialeigenschaften des Modells manipuliert werden. Dazu mehr im nächsten Abschnitt.<br /> <br /> [[Image:view_mode.png|900px]]<br /> <br /> ===Funktionen===<br /> <br /> <br /> <br /> [[Image:controls.png]]<br /> <br /> Die obere &quot;Lichtbox&quot; dient zur Manipulation von Lichtquellen. Dem Maus-Cursur folgt standardmäßig eine Punktlichtquelle, welche mit der mittleren Box an- und ausgeschaltet werden kann. Mit den Trapezen an der Seite, lassen sich Scheinwerfer-Lichtquellen (Directional Lights) hinzu- und wegschalten. Da die Figuren und Steine meist etwas gekrümmt sind, führt dies zu interessanten und unterschiedlichen Schattenwürfen.<br /> <br /> Der nächste Button weißt dem Modell ein neues Material mit einer Zufallsfarbe zu. In Verbindung mit den Lichtquellen entstehen somit Unterschiedliche Kontraste, so kann man mit manchen Farben Details besser wahrnehmen, als mit anderen.<br /> <br /> Der Lichtintensitäts Button darunter steuert die Größe/Intensität der Lichtquelle, welche dem Maus-Cursur folgt.<br /> <br /> In späteren Versionen könnte man die eben genannten Buttons als Slider implementieren, um Farbe und Lichtintensität intuitiver einzustellen.<br /> <br /> Der letzte Button, wurde als solcher deaktiviert und kann nur mit Druck auf die Leertaste ausgelöst werden. Dabei wird ein Screenshot des WebGL-Render-Inhalts erstellt und in einem neuen Tab geöffnet. <br /> <br /> <br /> [[Image:controls2.png]]<br /> <br /> Standardmäßig ist immer das erste Modell des jeweiligen Pitoti ausgewählt.<br /> Der Benutzer kann insgesamt zwischen drei Modellen wählen: &quot;Laserscan des Steins&quot;, &quot;isolierte Figur auf dem Stein&quot; und &quot;Skulptur&quot;. Desweiteren gibt es noch einen Button um zurück zum &quot;Map Mode&quot; zu gelangen. Einmal geladen, werden<br /> die Modelle nur noch ausgetauscht, damit ist ein schneller und flüssiger Wechsel nach dem ersten Laden möglich.<br /> <br /> ==Technologien==<br /> *three.js<br /> *jquery<br /> *CSS3<br /> <br /> ==Hinweise und Sonstiges==<br /> <br /> Three.js macht das Benutzen von WebGL extrem einfacher. Außerdem bietet es nützliche Klassen, wie zum Beispiel den Raycaster, dem man einen Strahl übergibt und der damit beliebige Objekte schneidet und natürlich diese zurückliefert. Der Raycaster wird hier benutzt um die Pitoti-Figuren im &quot;Map Mode&quot; mit Mouseover und OnClick Events zu versehen. Im &quot;Viewer Mode&quot; wird der Schnittpunkt aus einem Strahl der vom Cursur ausgeht, dazu verwendet um die Maus-Lichtquelle zu positionieren.<br /> <br /> Aus CSS3 werden die Opacity für die Buttons, abgerundete Ecken und Farbverläufe benutzt. JQuery wird hauptsächlich für die Manipulation des DOM und für das anlegen von Event Listeners benutzt.<br /> <br /> Die Modelle wurden von einem ursprünglichen hochauflösenden Obj-Modell, in Blender importiert und deren Komplexität verkleinert, sodass sie i.d.R. nicht größer sind als 2 MB. Zusätzlich werden sie in ein von Three.js verwendetes JSON-Format konvertiert. Es gibt zwar einen OBJ-Loader in Three.js, dieser ist aber extrem langsam, weil er wahrscheinlich intern genau diese Formatierung vornimmt. Durch die kleinen Modellen gehen natürlich Details verloren, aber nur so ist es möglich, das diese auch auf langsameren Rechnern flüssig angezeigt werden. Außerdem werden sie dadurch auch schneller geladen.<br /> <br /> Der Viewer läuft außerdem auch auf Tablets und dass sogar mit vollem Funktionsumfang. Getestet wurden auf einem Nexus 7 mit dem Chrome Browser.<br /> <br /> In Chrome scheint der Viewer generell besser zu laufen, so ruckelt er leicht in Firefox, ist aber noch gut benutzbar. Den Grund konnte ich leider nicht ausmachen.<br /> <br /> ==Props==<br /> Vielen Dank an Marcel Karnapke, welcher viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuert hat.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61038 2013-10-19T13:34:10Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viewer==<br /> <br /> [[Image:pitoti.png]]<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> <br /> Im Rahmen des Digital Heritage EU-Projekts wurden in Val Camonica, in den italienischen Alpen, 5000 Jahre alte Steinzeichnungen genannt Pitoti, digitalisiert. Dies geschah unter anderem mit der Zusammenarbeit der Bauhaus-Universität Weimar und Archeologen aus Cambridge. Die Digitalisierung gescha vor allem mit 3D-Laserscanning und Photogrametrie. <br /> <br /> Die daraus resultierenden 3D-Modelle konnten daraufhin für vielfältige Anwendungen verwendet werden. Die Akquirierung der Daten, deren Verarbeitung und Verwendung, waren Gegenstand der Bachelorarbeit Marcel Karnapkes.<br /> So wurden nicht nur die Oberflächen rekonstruierten Rohdaten des Steins verwendet, sondern auch neue &quot;Skulpturen&quot; aus den Daten modelliert.<br /> <br /> Bisherige Viewer die für diese Daten geschaffen wurden, liefen nur auf vorher eingerichteten Rechnern und waren nur einen kleinen Personenkreis vorbehalten.<br /> Ziel dieses Projekts war eine neue Art Viewer in WebGL zu konzipieren, sodass auch Laien diesen ohne komplizierte Einrichtung von externer Software benutzen können. Jeder mit einem WebGl fähigen Browser ist nun in der Lage sich die Figuren anzusehen und das sogar auf mobilen Tablets. Außerdem sorgt eine intuitive Steuerung ohne viel Erklärung für eine einfache Benutzbarkeit. <br /> <br /> <br /> ==Aufbau==<br /> <br /> Der Viewer teilt sich in zwei Modi ein. Man startet zunächst im &quot;Map Mode&quot;, welcher ein photogrametrisches Modell eines größeren Steins enthält. Auf diesem Modell verteilt finden sich Figuren der Steinzeichnungen, welche auf den Felsen eingehauen wurden. Fährt man mit dem Curor über eine der Figuren, werden zusätzliche Informationen zu der zugehörigen Steinzeichnung angezeigt. Beim Klick auf die Figure wird der entsprechende View Mode geladen. Die Kamera lässt sich mit der Maus manipulieren (Zoomen, Rotation, Panning).<br /> <br /> [[Image:map_mode.png|900px]]<br /> <br /> Im View Mode kann man ein detailliertes Modell des Pitoti betrachten. <br /> Zusätzlich zur Manipulation der Kamera, können noch Lichtquellen und Materialeigenschaften des Modells manipuliert werden. Dazu mehr im nächsten Abschnitt.<br /> <br /> [[Image:view_mode.png|900px]]<br /> <br /> ===Funktionen===<br /> <br /> <br /> <br /> [[Image:controls.png]]<br /> Die obere &quot;Lichtbox&quot; dient zur Manipulation von Lichtquellen. Dem Maus-Cursur folgt standardmäßig eine Punktlichtquelle, welche mit der mittleren Box an- und ausgeschaltet werden kann. Mit den Trapezen an der Seite, lassen sich Scheinwerfer-Lichtquellen (Directional Lights) hinzu- und wegschalten. Da die Figuren und Steine meist etwas gekrümmt sind, führt dies zu interessanten und unterschiedlichen Schattenwürfen.<br /> <br /> Der nächste Button weißt dem Modell ein neues Material mit einer Zufallsfarbe zu. In Verbindung mit den Lichtquellen entstehen somit Unterschiedliche Kontraste, so kann man mit manchen Farben Details besser wahrnehmen, als mit anderen.<br /> <br /> Der Lichtintensitäts Button darunter steuert die Größe/Intensität der Lichtquelle, welche dem Maus-Cursur folgt.<br /> <br /> In späteren Versionen könnte man die eben genannten Buttons als Slider implementieren, um Farbe und Lichtintensität intuitiver einzustellen.<br /> <br /> Der letzte Button, wurde als solcher deaktiviert und kann nur mit Druck auf die Leertaste ausgelöst werden. Dabei wird ein Screenshot des WebGL-Render-Inhalts erstellt und in einem neuen Tab geöffnet. <br /> <br /> <br /> [[Image:controls2.png]]<br /> <br /> Standardmäßig ist immer das erste Modell des jeweiligen Pitoti ausgewählt.<br /> Der Benutzer kann insgesamt zwischen drei Modellen wählen: &quot;Laserscan des Steins&quot;, &quot;isolierte Figur auf dem Stein&quot; und &quot;Skulptur&quot;. Desweiteren gibt es noch einen Button um zurück zum &quot;Map Mode&quot; zu gelangen. Einmal geladen, werden<br /> die Modelle nur noch ausgetauscht, damit ist ein schneller und flüssiger Wechsel nach dem ersten Laden möglich.<br /> <br /> ==Technologien==<br /> *three.js<br /> *jquery<br /> *CSS3<br /> <br /> ==Hinweise und Sonstiges==<br /> <br /> ==Props==<br /> Vielen Dank an Marcel Karnapke, welcher viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuert hat.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61037 2013-10-19T13:24:02Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viewer==<br /> <br /> [[Image:pitoti.png]]<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> <br /> Im Rahmen des Digital Heritage EU-Projekts wurden in Val Camonica, in den italienischen Alpen, 5000 Jahre alte Steinzeichnungen genannt Pitoti, digitalisiert. Dies geschah unter anderem mit der Zusammenarbeit der Bauhaus-Universität Weimar und Archeologen aus Cambridge. Die Digitalisierung gescha vor allem mit 3D-Laserscanning und Photogrametrie. <br /> <br /> Die daraus resultierenden 3D-Modelle konnten daraufhin für vielfältige Anwendungen verwendet werden. Die Akquirierung der Daten, deren Verarbeitung und Verwendung, waren Gegenstand der Bachelorarbeit Marcel Karnapkes.<br /> So wurden nicht nur die Oberflächen rekonstruierten Rohdaten des Steins verwendet, sondern auch neue &quot;Skulpturen&quot; aus den Daten modelliert.<br /> <br /> Bisherige Viewer die für diese Daten geschaffen wurden, liefen nur auf vorher eingerichteten Rechnern und waren nur einen kleinen Personenkreis vorbehalten.<br /> Ziel dieses Projekts war eine neue Art Viewer in WebGL zu konzipieren, sodass auch Laien diesen ohne komplizierte Einrichtung von externer Software benutzen können. Jeder mit einem WebGl fähigen Browser ist nun in der Lage sich die Figuren anzusehen und das sogar auf mobilen Tablets. Außerdem sorgt eine intuitive Steuerung ohne viel Erklärung für eine einfache Benutzbarkeit. <br /> <br /> <br /> ==Aufbau==<br /> <br /> Der Viewer teilt sich in zwei Modi ein. Man startet zunächst im &quot;Map Mode&quot;, welcher ein photogrametrisches Modell eines größeren Steins enthält. Auf diesem Modell verteilt finden sich Figuren der Steinzeichnungen, welche auf den Felsen eingehauen wurden. Fährt man mit dem Curor über eine der Figuren, werden zusätzliche Informationen zu der zugehörigen Steinzeichnung angezeigt. Beim Klick auf die Figure wird der entsprechende View Mode geladen. Die Kamera lässt sich mit der Maus manipulieren (Zoomen, Rotation, Panning).<br /> <br /> [[Image:map_mode.png|900px]]<br /> <br /> Im View Mode kann man ein detailliertes Modell des Pitoti betrachten. <br /> Zusätzlich zur Manipulation der Kamera, können noch Lichtquellen und Materialeigenschaften des Modells manipuliert werden. Dazu mehr im nächsten Abschnitt.<br /> <br /> [[Image:view_mode.png|900px]]<br /> <br /> ===Funktionen===<br /> <br /> <br /> <br /> [[Image:controls.png]]<br /> <br /> <br /> <br /> [[Image:controls2.png]]<br /> Standardmäßig ist immer das erste Modell des jeweiligen Pitoti ausgewählt.<br /> Der Benutzer kann insgesamt zwischen drei Modellen wählen: &quot;Laserscan des Steins&quot;, &quot;isolierte Figur auf dem Stein&quot; und &quot;Skulptur&quot;. Desweiteren gibt es noch einen Button um zurück zum &quot;Map Mode&quot; zu gelangen. <br /> <br /> ==Hinweise und Sonstiges==<br /> <br /> ==Technologien==<br /> *three.js<br /> *jquery<br /> *CSS3<br /> <br /> ==Props==<br /> Vielen Dank an Marcel Karnapke, welcher viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuert hat.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61036 2013-10-19T13:15:28Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viewer==<br /> <br /> [[Image:pitoti.png]]<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> <br /> Im Rahmen des Digital Heritage EU-Projekts wurden in Val Camonica, in den italienischen Alpen, 5000 Jahre alte Steinzeichnungen genannt Pitoti, digitalisiert. Dies geschah unter anderem mit der Zusammenarbeit der Bauhaus-Universität Weimar und Archeologen aus Cambridge. Die Digitalisierung gescha vor allem mit 3D-Laserscanning und Photogrametrie. <br /> <br /> Die daraus resultierenden 3D-Modelle konnten daraufhin für vielfältige Anwendungen verwendet werden. Die Akquirierung der Daten, deren Verarbeitung und Verwendung, waren Gegenstand der Bachelorarbeit Marcel Karnapkes.<br /> So wurden nicht nur die Oberflächen rekonstruierten Rohdaten des Steins verwendet, sondern auch neue &quot;Skulpturen&quot; aus den Daten modelliert.<br /> <br /> Bisherige Viewer die für diese Daten geschaffen wurden, liefen nur auf vorher eingerichteten Rechnern und waren nur einen kleinen Personenkreis vorbehalten.<br /> Ziel dieses Projekts war eine neue Art Viewer in WebGL zu konzipieren, sodass auch Laien diesen ohne komplizierte Einrichtung von externer Software benutzen können. Jeder mit einem WebGl fähigen Browser ist nun in der Lage sich die Figuren anzusehen und das sogar auf mobilen Tablets. Außerdem sorgt eine intuitive Steuerung ohne viel Erklärung für eine einfache Benutzbarkeit. <br /> <br /> <br /> ==Aufbau==<br /> <br /> Der Viewer teilt sich in zwei Modi ein. Man startet zunächst im &quot;Map Mode&quot;, welcher ein photogrametrisches Modell eines größeren Steins enthält. Auf diesem Modell verteilt finden sich Figuren der Steinzeichnungen, welche auf den Felsen eingehauen wurden. Fährt man mit dem Curor über eine der Figuren, werden zusätzliche Informationen zu der zugehörigen Steinzeichnung angezeigt. Beim Klick auf die Figure wird der entsprechende View Mode geladen.<br /> <br /> [[Image:map_mode.png|900px]]<br /> <br /> Im View <br /> <br /> [[Image:view_mode.png|900px]]<br /> <br /> ===Funktionen===<br /> <br /> [[Image:controls.png]]<br /> <br /> [[Image:controls2.png]]<br /> <br /> ==Hinweise und Sonstiges==<br /> <br /> ==Technologien==<br /> *three.js<br /> *jquery<br /> *CSS3<br /> <br /> ==Props==<br /> Vielen Dank an Marcel Karnapke, welcher viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuert hat.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61035 2013-10-19T13:15:10Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viewer==<br /> <br /> [[Image:pitoti.png]]<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> <br /> Im Rahmen des Digital Heritage EU-Projekts wurden in Val Camonica, in den italienischen Alpen, 5000 Jahre alte Steinzeichnungen genannt Pitoti, digitalisiert. Dies geschah unter anderem mit der Zusammenarbeit der Bauhaus-Universität Weimar und Archeologen aus Cambridge. Die Digitalisierung gescha vor allem mit 3D-Laserscanning und Photogrametrie. <br /> <br /> Die daraus resultierenden 3D-Modelle konnten daraufhin für vielfältige Anwendungen verwendet werden. Die Akquirierung der Daten, deren Verarbeitung und Verwendung, waren Gegenstand der Bachelorarbeit Marcel Karnapkes.<br /> So wurden nicht nur die Oberflächen rekonstruierten Rohdaten des Steins verwendet, sondern auch neue &quot;Skulpturen&quot; aus den Daten modelliert.<br /> <br /> Bisherige Viewer die für diese Daten geschaffen wurden, liefen nur auf vorher eingerichteten Rechnern und waren nur einen kleinen Personenkreis vorbehalten.<br /> Ziel dieses Projekts war eine neue Art Viewer in WebGL zu konzipieren, sodass auch Laien diesen ohne komplizierte Einrichtung von externer Software benutzen können. Jeder mit einem WebGl fähigen Browser ist nun in der Lage sich die Figuren anzusehen und das sogar auf mobilen Tablets. Außerdem sorgt eine intuitive Steuerung ohne viel Erklärung für eine einfache Benutzbarkeit. <br /> <br /> <br /> ==Aufbau==<br /> <br /> Der Viewer teilt sich in zwei Modi ein. Man startet zunächst im &quot;Map Mode&quot;, welcher ein photogrametrisches Modell eines größeren Steins enthält. Auf diesem Modell verteilt finden sich Figuren der Steinzeichnungen, welche auf den Felsen eingehauen wurden. Fährt man mit dem Curor über eine der Figuren, werden zusätzliche Informationen zu der zugehörigen Steinzeichnung angezeigt. Beim Klick auf die Figure wird der entsprechende View Mode geladen.<br /> <br /> [[Image:map_mode.png|550px]]<br /> <br /> Im View <br /> <br /> [[Image:view_mode.png|550px]]<br /> <br /> ===Funktionen===<br /> <br /> [[Image:controls.png]]<br /> <br /> [[Image:controls2.png]]<br /> <br /> ==Hinweise und Sonstiges==<br /> <br /> ==Technologien==<br /> *three.js<br /> *jquery<br /> *CSS3<br /> <br /> ==Props==<br /> Vielen Dank an Marcel Karnapke, welcher viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuert hat.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61034 2013-10-19T13:14:55Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viewer==<br /> <br /> [[Image:pitoti.png]]<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> <br /> Im Rahmen des Digital Heritage EU-Projekts wurden in Val Camonica, in den italienischen Alpen, 5000 Jahre alte Steinzeichnungen genannt Pitoti, digitalisiert. Dies geschah unter anderem mit der Zusammenarbeit der Bauhaus-Universität Weimar und Archeologen aus Cambridge. Die Digitalisierung gescha vor allem mit 3D-Laserscanning und Photogrametrie. <br /> <br /> Die daraus resultierenden 3D-Modelle konnten daraufhin für vielfältige Anwendungen verwendet werden. Die Akquirierung der Daten, deren Verarbeitung und Verwendung, waren Gegenstand der Bachelorarbeit Marcel Karnapkes.<br /> So wurden nicht nur die Oberflächen rekonstruierten Rohdaten des Steins verwendet, sondern auch neue &quot;Skulpturen&quot; aus den Daten modelliert.<br /> <br /> Bisherige Viewer die für diese Daten geschaffen wurden, liefen nur auf vorher eingerichteten Rechnern und waren nur einen kleinen Personenkreis vorbehalten.<br /> Ziel dieses Projekts war eine neue Art Viewer in WebGL zu konzipieren, sodass auch Laien diesen ohne komplizierte Einrichtung von externer Software benutzen können. Jeder mit einem WebGl fähigen Browser ist nun in der Lage sich die Figuren anzusehen und das sogar auf mobilen Tablets. Außerdem sorgt eine intuitive Steuerung ohne viel Erklärung für eine einfache Benutzbarkeit. <br /> <br /> <br /> ==Aufbau==<br /> <br /> Der Viewer teilt sich in zwei Modi ein. Man startet zunächst im &quot;Map Mode&quot;, welcher ein photogrametrisches Modell eines größeren Steins enthält. Auf diesem Modell verteilt finden sich Figuren der Steinzeichnungen, welche auf den Felsen eingehauen wurden. Fährt man mit dem Curor über eine der Figuren, werden zusätzliche Informationen zu der zugehörigen Steinzeichnung angezeigt. Beim Klick auf die Figure wird der entsprechende View Mode geladen.<br /> <br /> [[Image:map_mode.png|350px]]<br /> <br /> Im View <br /> <br /> [[Image:view_mode.png|350px]]<br /> <br /> ===Funktionen===<br /> <br /> [[Image:controls.png]]<br /> <br /> [[Image:controls2.png]]<br /> <br /> ==Hinweise und Sonstiges==<br /> <br /> ==Technologien==<br /> *three.js<br /> *jquery<br /> *CSS3<br /> <br /> ==Props==<br /> Vielen Dank an Marcel Karnapke, welcher viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuert hat.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61033 2013-10-19T13:13:40Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viewer==<br /> <br /> [[Image:pitoti.png]]<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> <br /> Im Rahmen des Digital Heritage EU-Projekts wurden in Val Camonica, in den italienischen Alpen, 5000 Jahre alte Steinzeichnungen genannt Pitoti, digitalisiert. Dies geschah unter anderem mit der Zusammenarbeit der Bauhaus-Universität Weimar und Archeologen aus Cambridge. Die Digitalisierung gescha vor allem mit 3D-Laserscanning und Photogrametrie. <br /> <br /> Die daraus resultierenden 3D-Modelle konnten daraufhin für vielfältige Anwendungen verwendet werden. Die Akquirierung der Daten, deren Verarbeitung und Verwendung, waren Gegenstand der Bachelorarbeit Marcel Karnapkes.<br /> So wurden nicht nur die Oberflächen rekonstruierten Rohdaten des Steins verwendet, sondern auch neue &quot;Skulpturen&quot; aus den Daten modelliert.<br /> <br /> Bisherige Viewer die für diese Daten geschaffen wurden, liefen nur auf vorher eingerichteten Rechnern und waren nur einen kleinen Personenkreis vorbehalten.<br /> Ziel dieses Projekts war eine neue Art Viewer in WebGL zu konzipieren, sodass auch Laien diesen ohne komplizierte Einrichtung von externer Software benutzen können. Jeder mit einem WebGl fähigen Browser ist nun in der Lage sich die Figuren anzusehen und das sogar auf mobilen Tablets. Außerdem sorgt eine intuitive Steuerung ohne viel Erklärung für eine einfache Benutzbarkeit. <br /> <br /> <br /> ==Aufbau==<br /> <br /> Der Viewer teilt sich in zwei Modi ein. Man startet zunächst im &quot;Map Mode&quot;, welcher ein photogrametrisches Modell eines größeren Steins enthält. Auf diesem Modell verteilt finden sich Figuren der Steinzeichnungen, welche auf den Felsen eingehauen wurden. Fährt man mit dem Curor über eine der Figuren, werden zusätzliche Informationen zu der zugehörigen Steinzeichnung angezeigt. Beim Klick auf die Figure wird der entsprechende View Mode geladen.<br /> <br /> [[Image:map_mode.png|upright=0.1]]<br /> <br /> Im View <br /> <br /> [[Image:view_mode.png]]<br /> <br /> ===Funktionen===<br /> <br /> [[Image:controls.png]]<br /> <br /> [[Image:controls2.png]]<br /> <br /> ==Hinweise und Sonstiges==<br /> <br /> ==Technologien==<br /> *three.js<br /> *jquery<br /> *CSS3<br /> <br /> ==Props==<br /> Vielen Dank an Marcel Karnapke, welcher viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuert hat.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61032 2013-10-19T13:13:18Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viewer==<br /> <br /> [[Image:pitoti.png]]<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> <br /> Im Rahmen des Digital Heritage EU-Projekts wurden in Val Camonica, in den italienischen Alpen, 5000 Jahre alte Steinzeichnungen genannt Pitoti, digitalisiert. Dies geschah unter anderem mit der Zusammenarbeit der Bauhaus-Universität Weimar und Archeologen aus Cambridge. Die Digitalisierung gescha vor allem mit 3D-Laserscanning und Photogrametrie. <br /> <br /> Die daraus resultierenden 3D-Modelle konnten daraufhin für vielfältige Anwendungen verwendet werden. Die Akquirierung der Daten, deren Verarbeitung und Verwendung, waren Gegenstand der Bachelorarbeit Marcel Karnapkes.<br /> So wurden nicht nur die Oberflächen rekonstruierten Rohdaten des Steins verwendet, sondern auch neue &quot;Skulpturen&quot; aus den Daten modelliert.<br /> <br /> Bisherige Viewer die für diese Daten geschaffen wurden, liefen nur auf vorher eingerichteten Rechnern und waren nur einen kleinen Personenkreis vorbehalten.<br /> Ziel dieses Projekts war eine neue Art Viewer in WebGL zu konzipieren, sodass auch Laien diesen ohne komplizierte Einrichtung von externer Software benutzen können. Jeder mit einem WebGl fähigen Browser ist nun in der Lage sich die Figuren anzusehen und das sogar auf mobilen Tablets. Außerdem sorgt eine intuitive Steuerung ohne viel Erklärung für eine einfache Benutzbarkeit. <br /> <br /> <br /> ==Aufbau==<br /> <br /> Der Viewer teilt sich in zwei Modi ein. Man startet zunächst im &quot;Map Mode&quot;, welcher ein photogrametrisches Modell eines größeren Steins enthält. Auf diesem Modell verteilt finden sich Figuren der Steinzeichnungen, welche auf den Felsen eingehauen wurden. Fährt man mit dem Curor über eine der Figuren, werden zusätzliche Informationen zu der zugehörigen Steinzeichnung angezeigt. Beim Klick auf die Figure wird der entsprechende View Mode geladen.<br /> <br /> [[Image:map_mode.png|upright=0.5]]<br /> <br /> Im View <br /> <br /> [[Image:view_mode.png]]<br /> <br /> ===Funktionen===<br /> <br /> [[Image:controls.png]]<br /> <br /> [[Image:controls2.png]]<br /> <br /> ==Hinweise und Sonstiges==<br /> <br /> ==Technologien==<br /> *three.js<br /> *jquery<br /> *CSS3<br /> <br /> ==Props==<br /> Vielen Dank an Marcel Karnapke, welcher viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuert hat.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:Controls2.png&diff=61031 2013-10-19T13:11:12Z

<p>Azzaroff: </p> <hr /> <div>== Summary ==<br /> <br /> == Copyright status: ==<br /> <br /> == Licensing ==<br /> {{self|c}}<br /> == Source: ==</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:View_mode.png&diff=61030 2013-10-19T13:10:33Z

<p>Azzaroff: </p> <hr /> <div>== Summary ==<br /> <br /> == Copyright status: ==<br /> <br /> == Licensing ==<br /> {{self|c}}<br /> == Source: ==</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:Map_mode.png&diff=61029 2013-10-19T13:09:28Z

<p>Azzaroff: uploaded a new version of &amp;quot;File:Map mode.png&amp;quot;</p> <hr /> <div>== Summary ==<br /> <br /> == Copyright status: ==<br /> <br /> == Licensing ==<br /> {{self|c}}<br /> == Source: ==</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61028 2013-10-19T13:06:38Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viewer==<br /> <br /> [[Image:pitoti.png]]<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> <br /> Im Rahmen des Digital Heritage EU-Projekts wurden in Val Camonica, in den italienischen Alpen, 5000 Jahre alte Steinzeichnungen genannt Pitoti, digitalisiert. Dies geschah unter anderem mit der Zusammenarbeit der Bauhaus-Universität Weimar und Archeologen aus Cambridge. Die Digitalisierung gescha vor allem mit 3D-Laserscanning und Photogrametrie. <br /> <br /> Die daraus resultierenden 3D-Modelle konnten daraufhin für vielfältige Anwendungen verwendet werden. Die Akquirierung der Daten, deren Verarbeitung und Verwendung, waren Gegenstand der Bachelorarbeit Marcel Karnapkes.<br /> So wurden nicht nur die Oberflächen rekonstruierten Rohdaten des Steins verwendet, sondern auch neue &quot;Skulpturen&quot; aus den Daten modelliert.<br /> <br /> Bisherige Viewer die für diese Daten geschaffen wurden, liefen nur auf vorher eingerichteten Rechnern und waren nur einen kleinen Personenkreis vorbehalten.<br /> Ziel dieses Projekts war eine neue Art Viewer in WebGL zu konzipieren, sodass auch Laien diesen ohne komplizierte Einrichtung von externer Software benutzen können. Jeder mit einem WebGl fähigen Browser ist nun in der Lage sich die Figuren anzusehen und das sogar auf mobilen Tablets. Außerdem sorgt eine intuitive Steuerung ohne viel Erklärung für eine einfache Benutzbarkeit. <br /> <br /> <br /> ==Aufbau==<br /> <br /> Der Viewer teilt sich in zwei Modi ein. Man startet zunächst im &quot;Map Mode&quot;, welcher ein photogrametrisches Modell eines größeren Steins enthält. Auf diesem Modell verteilt finden sich Figuren der Steinzeichnungen, welche auf den Felsen eingehauen wurden. Fährt man mit dem Curor über eine der Figuren, werden zusätzliche Informationen zu der zugehörigen Steinzeichnung angezeigt. Beim Klick auf die Figure wird der entsprechende View Mode geladen.<br /> <br /> [[Image:map_mode.png]]<br /> <br /> Im View <br /> <br /> [[Image:view_mode.png]]<br /> <br /> ===Funktionen===<br /> <br /> [[Image:controls.png]]<br /> <br /> [[Image:controls2.png]]<br /> <br /> ==Hinweise und Sonstiges==<br /> <br /> ==Technologien==<br /> *three.js<br /> *jquery<br /> *CSS3<br /> <br /> ==Props==<br /> Vielen Dank an Marcel Karnapke, welcher viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuert hat.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61027 2013-10-19T13:05:25Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viewer==<br /> <br /> [[Image:pitoti.png]]<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> <br /> Im Rahmen des Digital Heritage EU-Projekts wurden in Val Camonica, in den italienischen Alpen, 5000 Jahre alte Steinzeichnungen genannt Pitoti, digitalisiert. Dies geschah unter anderem mit der Zusammenarbeit der Bauhaus-Universität Weimar und Archeologen aus Cambridge. Die Digitalisierung gescha vor allem mit 3D-Laserscanning und Photogrametrie. <br /> <br /> Die daraus resultierenden 3D-Modelle konnten daraufhin für vielfältige Anwendungen verwendet werden. Die Akquirierung der Daten, deren Verarbeitung und Verwendung, waren Gegenstand der Bachelorarbeit Marcel Karnapkes.<br /> So wurden nicht nur die Oberflächen rekonstruierten Rohdaten des Steins verwendet, sondern auch neue &quot;Skulpturen&quot; aus den Daten modelliert.<br /> <br /> Bisherige Viewer die für diese Daten geschaffen wurden, liefen nur auf vorher eingerichteten Rechnern und waren nur einen kleinen Personenkreis vorbehalten.<br /> Ziel dieses Projekts war eine neue Art Viewer in WebGL zu konzipieren, sodass auch Laien diesen ohne komplizierte Einrichtung von externer Software benutzen können. Jeder mit einem WebGl fähigen Browser ist nun in der Lage sich die Figuren anzusehen und das sogar auf mobilen Tablets. Außerdem sorgt eine intuitive Steuerung ohne viel Erklärung für eine einfache Benutzbarkeit. <br /> <br /> <br /> ==Aufbau==<br /> <br /> Der Viewer teilt sich in zwei Modi ein. Man startet zunächst im &quot;Map Mode&quot;, welcher ein photogrametrisches Modell eines größeren Steins enthält. Auf diesem Modell verteilt finden sich Figuren der Steinzeichnungen, welche auf den Felsen eingehauen wurden. Fährt man mit dem Curor über eine der Figuren, werden zusätzliche Informationen zu der zugehörigen Steinzeichnung angezeigt. Beim Klick auf die Figure wird der entsprechende View Mode geladen.<br /> <br /> [[Image:map_mode.png]]<br /> <br /> Im View <br /> <br /> [[Image:view_mode.png]]<br /> <br /> =Funktionen=<br /> <br /> [[Image:controls.png]]<br /> <br /> [[Image:controls2.png]]<br /> <br /> ===Hinweise und Sonstiges===<br /> <br /> ===Technologien===<br /> *three.js<br /> *jquery<br /> *CSS3<br /> <br /> ===Props===<br /> Vielen Dank an Marcel Karnapke, welcher viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuert hat.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:Controls.png&diff=61026 2013-10-19T13:03:32Z

<p>Azzaroff: </p> <hr /> <div>== Summary ==<br /> <br /> == Copyright status: ==<br /> <br /> == Source: ==</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:Map_mode.png&diff=61025 2013-10-19T13:01:41Z

<p>Azzaroff: </p> <hr /> <div>== Summary ==<br /> <br /> == Copyright status: ==<br /> <br /> == Licensing ==<br /> {{self|c}}<br /> == Source: ==</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:Pitoti.png&diff=61024 2013-10-19T13:00:56Z

<p>Azzaroff: </p> <hr /> <div>== Summary ==<br /> <br /> == Copyright status: ==<br /> <br /> == Source: ==</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61023 2013-10-19T13:00:19Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viewer==<br /> <br /> [[Image:pitoti.png]]<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> <br /> Im Rahmen des Digital Heritage EU-Projekts wurden in Val Camonica, in den italienischen Alpen, 5000 Jahre alte Steinzeichnungen genannt Pitoti, digitalisiert. Dies geschah unter anderem mit der Zusammenarbeit der Bauhaus-Universität Weimar und Archeologen aus Cambridge. Die Digitalisierung gescha vor allem mit 3D-Laserscanning und Photogrametrie. <br /> <br /> Die daraus resultierenden 3D-Modelle konnten daraufhin für vielfältige Anwendungen verwendet werden. Die Akquirierung der Daten, deren Verarbeitung und Verwendung, waren Gegenstand der Bachelorarbeit Marcel Karnapkes.<br /> So wurden nicht nur die Oberflächen rekonstruierten Rohdaten des Steins verwendet, sondern auch neue &quot;Skulpturen&quot; aus den Daten modelliert.<br /> <br /> Bisherige Viewer die für diese Daten geschaffen wurden, liefen nur auf vorher eingerichteten Rechnern und waren nur einen kleinen Personenkreis vorbehalten.<br /> Ziel dieses Projekts war eine neue Art Viewer in WebGL zu konzipieren, sodass auch Laien diesen ohne komplizierte Einrichtung von externer Software benutzen können. Jeder mit einem WebGl fähigen Browser ist nun in der Lage sich die Figuren anzusehen und das sogar auf mobilen Tablets. Außerdem sorgt eine intuitive Steuerung ohne viel Erklärung für eine einfache Benutzbarkeit. <br /> <br /> <br /> ==Aufbau==<br /> <br /> Der Viewer teilt sich in zwei Modi ein. Man startet zunächst im &quot;Map Mode&quot;, welcher ein photogrametrisches Modell eines größeren Steins enthält. Auf diesem Modell verteilt finden sich Figuren der Steinzeichnungen, welche auf den Felsen eingehauen wurden. Fährt man mit dem Curor über eine der Figuren, werden zusätzliche Informationen zu der zugehörigen Steinzeichnung angezeigt. Beim Klick auf die Figure wird der entsprechende View Mode geladen.<br /> <br /> [[Image:map_mode.png]]<br /> <br /> Im View <br /> <br /> [[Image:view_mode.png]]<br /> <br /> =Funktionen=<br /> <br /> <br /> [[Image:controls.png]]<br /> <br /> ==Hinweise und Sonstiges==<br /> <br /> ===Technologien===<br /> *three.js<br /> *jquery<br /> *CSS3<br /> <br /> ===Props===<br /> Vielen Dank an Marcel Karnapke, welcher viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuert hat.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61022 2013-10-19T12:47:27Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viewer==<br /> <br /> [[Image:pitoti.png]]<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> <br /> Im Rahmen des Digital Heritage EU-Projekts wurden in Val Camonica, in den italienischen Alpen, 5000 Jahre alte Steinzeichnungen genannt Pitoti, digitalisiert. Dies geschah unter anderem mit der Zusammenarbeit der Bauhaus-Universität Weimar und Archeologen aus Cambridge. Die Digitalisierung gescha vor allem mit 3D-Laserscanning und Photogrametrie. <br /> <br /> Die daraus resultierenden 3D-Modelle konnten daraufhin für vielfältige Anwendungen verwendet werden. Die Akquirierung der Daten, deren Verarbeitung und Verwendung, waren Gegenstand der Bachelorarbeit Marcel Karnapkes.<br /> So wurden nicht nur die Oberflächen rekonstruierten Rohdaten des Steins verwendet, sondern auch neue &quot;Skulpturen&quot; aus den Daten modelliert.<br /> <br /> Bisherige Viewer die für diese Daten geschaffen wurden, liefen nur auf vorher eingerichteten Rechnern und waren nur einen kleinen Personenkreis vorbehalten.<br /> Ziel dieses Projekts war eine neue Art Viewer in WebGL zu konzipieren, sodass auch Laien diesen ohne komplizierte Einrichtung von externer Software benutzen können. Jeder mit einem WebGl fähigen Browser ist nun in der Lage sich die Figuren anzusehen und dass sogar auf mobilen Tablets. Außerdem sorgt eine intuitive Steuerung ohne viel Erklärung für eine einfache Benutzbarkeit. <br /> <br /> <br /> ==Aufbau==<br /> <br /> <br /> <br /> ===Technologien===<br /> *three.js<br /> *jquery<br /> *CSS3<br /> <br /> ===Props===<br /> Vielen Dank an Marcel Karnapke, welcher viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuert hat.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61021 2013-10-19T12:40:49Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viewer==<br /> <br /> [[Image:pitoti.png]]<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> <br /> Im Rahmen des Digital Heritage EU-Projekts wurden in Val Camonica, in den italienischen Alpen, 5000 Jahre alte Steinzeichnungen genannt Pitoti, digitalisiert. Dies geschah unter anderem mit der Zusammenarbeit der Bauhaus-Universität Weimar und Archeologen aus Cambridge. Die Digitalisierung gescha vor allem mit 3D-Laserscanning und Photogrametrie. <br /> <br /> Die daraus resultierenden 3D-Modelle konnten daraufhin für vielfältige Anwendungen verwendet werden. Die Akquirierung der Daten, deren Verarbeitung und Verwendung, waren Gegenstand der Bachelorarbeit Marcel Karnapkes.<br /> So wurden nicht nur die Oberflächen rekonstruierten Rohdaten des Steins verwendet, sondern auch neue &quot;Skulpturen&quot; aus den Daten modelliert.<br /> <br /> Bisherige Viewer <br /> <br /> <br /> ==Aufbau==<br /> <br /> <br /> <br /> ===Technologien===<br /> *three.js<br /> *jquery<br /> *CSS3<br /> <br /> ===Props===<br /> Vielen Dank an Marcel Karnapke, welcher viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuert hat.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61020 2013-10-19T12:40:31Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viewer==<br /> <br /> [[Image:pitoti.png]]<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> Im Rahmen des Digital Heritage EU-Projekts wurden in Val Camonica, in den italienischen Alpen, 5000 Jahre alte Steinzeichnungen genannt Pitoti, digitalisiert. Dies geschah unter anderem mit der Zusammenarbeit der Bauhaus-Universität Weimar und Archeologen aus Cambridge. Die Digitalisierung gescha vor allem mit 3D-Laserscanning und Photogrametrie. <br /> <br /> Die daraus resultierenden 3D-Modelle konnten daraufhin für vielfältige Anwendungen verwendet werden. Die Akquirierung der Daten, deren Verarbeitung und Verwendung, waren Gegenstand der Bachelorarbeit Marcel Karnapkes.<br /> So wurden nicht nur die Oberflächen rekonstruierten Rohdaten des Steins verwendet, sondern auch neue &quot;Skulpturen&quot; aus den Daten modelliert.<br /> <br /> Bisherige Viewer <br /> <br /> <br /> ==Aufbau==<br /> <br /> <br /> <br /> ===Technologien===<br /> *three.js<br /> *jquery<br /> *CSS3<br /> <br /> ===Props===<br /> Vielen Dank an Marcel Karnapke, welcher viele Ideen zur Konzeption des Pitoti Viewers und der Benutzeroberfläche beigesteuert hat.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:Toolchain.png&diff=61019 2013-10-19T12:16:21Z

<p>Azzaroff: Auszug aus Bachelorarbeit von Marcel Karnapke</p> <hr /> <div>== Summary ==<br /> Auszug aus Bachelorarbeit von Marcel Karnapke<br /> == Copyright status: ==<br /> Copyright by Marcel Karnapke<br /> == Licensing ==<br /> {{self|c}}<br /> == Source: ==</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61018 2013-10-19T12:14:29Z

<p>Azzaroff: </p> <hr /> <div>==Pitoti Viwer==<br /> <br /> <br /> ==Idee und Motivation==<br /> [[Image:toolchain.png]]<br /> <br /> ==Aufbau==<br /> <br /> <br /> <br /> ===Technologien===<br /> *three.js<br /> *jquery<br /> *CSS3</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Felix_Trojan&diff=61017 2013-10-19T12:01:49Z

<p>Azzaroff: Created page with &quot;==Pitoti Viwer== ==Idee und Motivation== ==Aufbau== ===Technologien=== *three.js *jquery *CSS3&quot;</p> <hr /> <div>==Pitoti Viwer==<br /> <br /> <br /> ==Idee und Motivation==<br /> <br /> <br /> ==Aufbau==<br /> <br /> <br /> <br /> ===Technologien===<br /> *three.js<br /> *jquery<br /> *CSS3</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=User:Azzaroff&diff=61016 2013-10-19T11:59:05Z

<p>Azzaroff: </p> <hr /> <div>= Projekte =<br /> * [[IFD:WebApps/Felix Trojan|Friend Carpet]]<br /> * [[IFD:Web_Advanced_II_SS13/Felix Trojan|Pitoti Viewer]]</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=User:Azzaroff&diff=58536 2013-06-14T15:00:39Z

<p>Azzaroff: </p> <hr /> <div>= Projekte =<br /> * [[IFD:WebApps/Felix Trojan|Friend Carpet]]</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=User:Azzaroff&diff=58535 2013-06-14T15:00:29Z

<p>Azzaroff: </p> <hr /> <div>= Projekte =<br /> ** [[IFD:WebApps/Felix Trojan|Friend Carpet]]</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=User:Azzaroff&diff=58534 2013-06-14T15:00:15Z

<p>Azzaroff: </p> <hr /> <div><br /> = Projekte =<br /> <br /> [[IFD:WebApps/Felix Trojan|Friend Carpet]]</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=User:Azzaroff&diff=58533 2013-06-14T14:54:17Z

<p>Azzaroff: </p> <hr /> <div>Here be Dragons.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Kursplan_Web_Advanced_II&diff=58532 2013-06-14T14:52:58Z

<p>Azzaroff: </p> <hr /> <div>'''08.04.2013'''<br /> * Einführungsveranstaltung<br /> ** [[Media:20130408_web_adv_II_introduction.pdf|Material]]<br /> <br /> '''15. 04.2013'''<br /> * Vektor / Bitmap, Piktogramme und Icons I<br /> ** [[Media:20130415_web_advanced_II_material.pdf|Material]]<br /> * Toolthemen<br /> ** Colorhandling<br /> ** Snippettools<br /> ** [[Media:20130415_web_modul_toolthemen_color_snippets.zip|Toolthemen]]<br /> <br /> '''22.04.2013'''<br /> * Piktogramme und Icons II, CSS3 Fonts vs. SVG<br /> ** [[Media:20130421_web_advanced_II_material.zip|Material]]<br /> * Toolthemen<br /> ** responsives Webdesign (Ditmar)<br /> ** Animierte Gif (Christian)<br /> ** [[Media:20130421_web_advanced_II_toolthemen.zip|Toolthemen Material]]<br /> <br /> '''29.04.2013'''<br /> * XML &amp; SVG<br /> ** [[Media:20130429_web_advanced_II_material.zip|Material]]<br /> * Toolthemen<br /> ** CSS Preprocessors (Benjamin)<br /> ** Zeichen Frameworks: [[Media:paperJS.zip|paper.js]](Alex)<br /> ** [[Media:20130429_web_advanced_II_toolthemen.zip|Toolthemen Material]]<br /> <br /> '''06.05.2013'''<br /> * fällt aus (Workshop)<br /> <br /> '''13.05.2013'''<br /> * SVG II<br /> ** [[Media:20130513_web_advanced_II_material.zip|Material]]<br /> * Toolthemen<br /> ** Prototyping<br /> ** Editoren<br /> <br /> '''20.05.2013'''<br /> * fällt aus (Feiertag)<br /> <br /> '''27.05.2013'''<br /> * 3D WebDevelopment I<br /> ** [[Media:20130527_web_advanced_II_material.zip|Material]]<br /> * Toolthema<br /> ** Templating Lösungen<br /> '''03.06.2013'''<br /> * Zwischenpräsentation – Einzeltermine<br /> <br /> '''10.06.2013'''<br /> * 3D WebDevelopment II<br /> ** [[Media:20130610_web_advanced_II_material.zip|Material]]<br /> ** [http://www.blender.org/download/get-blender/ Blender]]<br /> ** [https://github.com/mrdoob/three.js/ ThreeJs Lib &amp; Examples]]<br /> ** [[Media:20130610_web_advanced_II_workaround.zip|Workaround]]<br /> * Toolthema<br /> ** [[Media:Js_validierung_kompression_obfuscation.pdf|JS: Validierung, Komprimierung, Obfuscation (Felix)]]<br /> ** [[Media:20130610_web_advanced_II_toolthemen.zip|Toolthemen Material]]<br /> <br /> '''17.06.2013'''<br /> * 3D WebDevelopment III<br /> * Toolthema<br /> ** MVC, Backbone.js/Ember (Jan)<br /> <br /> '''24.06.2013'''<br /> * Arbeitsprozesse Webentwickler / -designer I<br /> <br /> '''01.07.2013'''<br /> * Arbeitsprozesse Webentwickler / -designer II<br /> <br /> '''08.06.2013'''<br /> * Kursinterne Zwischenpräsentation<br /> <br /> '''Freitag, 12. Juli 2013, ab 15:30 Uhr'''<br /> * Endpräsentation Showreel (Belvederer Allee 5, Raum 007)<br /> <br /> <br /> '''30.09.2013'''<br /> * Projektabgabe (offene Sourcefiles + gehostet Webprojekt)<br /> <br /> ==...auch interessant==<br /> * Urheberrecht – [https://upload.wikimedia.org/wikipedia/commons/d/db/Licensing_tutorial_de.svg was darf ich hochladen]? (Bei Wikimedia Commons)</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Kursplan_Web_Advanced_II&diff=58531 2013-06-14T14:51:27Z

<p>Azzaroff: </p> <hr /> <div>'''08.04.2013'''<br /> * Einführungsveranstaltung<br /> ** [[Media:20130408_web_adv_II_introduction.pdf|Material]]<br /> <br /> '''15. 04.2013'''<br /> * Vektor / Bitmap, Piktogramme und Icons I<br /> ** [[Media:20130415_web_advanced_II_material.pdf|Material]]<br /> * Toolthemen<br /> ** Colorhandling<br /> ** Snippettools<br /> ** [[Media:20130415_web_modul_toolthemen_color_snippets.zip|Toolthemen]]<br /> <br /> '''22.04.2013'''<br /> * Piktogramme und Icons II, CSS3 Fonts vs. SVG<br /> ** [[Media:20130421_web_advanced_II_material.zip|Material]]<br /> * Toolthemen<br /> ** responsives Webdesign (Ditmar)<br /> ** Animierte Gif (Christian)<br /> ** [[Media:20130421_web_advanced_II_toolthemen.zip|Toolthemen Material]]<br /> <br /> '''29.04.2013'''<br /> * XML &amp; SVG<br /> ** [[Media:20130429_web_advanced_II_material.zip|Material]]<br /> * Toolthemen<br /> ** CSS Preprocessors (Benjamin)<br /> ** Zeichen Frameworks: [[Media:paperJS.zip|paper.js]](Alex)<br /> ** [[Media:20130429_web_advanced_II_toolthemen.zip|Toolthemen Material]]<br /> <br /> '''06.05.2013'''<br /> * fällt aus (Workshop)<br /> <br /> '''13.05.2013'''<br /> * SVG II<br /> ** [[Media:20130513_web_advanced_II_material.zip|Material]]<br /> * Toolthemen<br /> ** Prototyping<br /> ** Editoren<br /> <br /> '''20.05.2013'''<br /> * fällt aus (Feiertag)<br /> <br /> '''27.05.2013'''<br /> * 3D WebDevelopment I<br /> ** [[Media:20130527_web_advanced_II_material.zip|Material]]<br /> * Toolthema<br /> ** Templating Lösungen<br /> '''03.06.2013'''<br /> * Zwischenpräsentation – Einzeltermine<br /> <br /> '''10.06.2013'''<br /> * 3D WebDevelopment II<br /> ** [[Media:20130610_web_advanced_II_material.zip|Material]]<br /> ** [http://www.blender.org/download/get-blender/ Blender]]<br /> ** [https://github.com/mrdoob/three.js/ ThreeJs Lib &amp; Examples]]<br /> ** [[Media:20130610_web_advanced_II_workaround.zip|Workaround]]<br /> * Toolthema<br /> ** [[Media:Js_validierung_kompression_obfuscation.pdf|JS: Validierung, Komprimieren, Encrypten (Felix)]]<br /> ** [[Media:20130610_web_advanced_II_toolthemen.zip|Toolthemen Material]]<br /> <br /> '''17.06.2013'''<br /> * 3D WebDevelopment III<br /> * Toolthema<br /> ** MVC, Backbone.js/Ember (Jan)<br /> <br /> '''24.06.2013'''<br /> * Arbeitsprozesse Webentwickler / -designer I<br /> <br /> '''01.07.2013'''<br /> * Arbeitsprozesse Webentwickler / -designer II<br /> <br /> '''08.06.2013'''<br /> * Kursinterne Zwischenpräsentation<br /> <br /> '''Freitag, 12. Juli 2013, ab 15:30 Uhr'''<br /> * Endpräsentation Showreel (Belvederer Allee 5, Raum 007)<br /> <br /> <br /> '''30.09.2013'''<br /> * Projektabgabe (offene Sourcefiles + gehostet Webprojekt)<br /> <br /> ==...auch interessant==<br /> * Urheberrecht – [https://upload.wikimedia.org/wikipedia/commons/d/db/Licensing_tutorial_de.svg was darf ich hochladen]? (Bei Wikimedia Commons)</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:Js_validierung_kompression_obfuscation.pdf&diff=58530 2013-06-14T14:50:40Z

<p>Azzaroff: Vortrag über JS-Validierung/Kompression/Obfuscaition</p> <hr /> <div>== Summary ==<br /> Vortrag über JS-Validierung/Kompression/Obfuscaition<br /> == Copyright status: ==<br /> Macht damit was ihr wollt :-)<br /> == Licensing ==<br /> {{self|c}}<br /> == Source: ==</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:Web_Advanced_II_SS13/Kursplan_Web_Advanced_II&diff=58529 2013-06-14T14:46:00Z

<p>Azzaroff: </p> <hr /> <div>'''08.04.2013'''<br /> * Einführungsveranstaltung<br /> ** [[Media:20130408_web_adv_II_introduction.pdf|Material]]<br /> <br /> '''15. 04.2013'''<br /> * Vektor / Bitmap, Piktogramme und Icons I<br /> ** [[Media:20130415_web_advanced_II_material.pdf|Material]]<br /> * Toolthemen<br /> ** Colorhandling<br /> ** Snippettools<br /> ** [[Media:20130415_web_modul_toolthemen_color_snippets.zip|Toolthemen]]<br /> <br /> '''22.04.2013'''<br /> * Piktogramme und Icons II, CSS3 Fonts vs. SVG<br /> ** [[Media:20130421_web_advanced_II_material.zip|Material]]<br /> * Toolthemen<br /> ** responsives Webdesign (Ditmar)<br /> ** Animierte Gif (Christian)<br /> ** [[Media:20130421_web_advanced_II_toolthemen.zip|Toolthemen Material]]<br /> <br /> '''29.04.2013'''<br /> * XML &amp; SVG<br /> ** [[Media:20130429_web_advanced_II_material.zip|Material]]<br /> * Toolthemen<br /> ** CSS Preprocessors (Benjamin)<br /> ** Zeichen Frameworks: [[Media:paperJS.zip|paper.js]](Alex)<br /> ** [[Media:20130429_web_advanced_II_toolthemen.zip|Toolthemen Material]]<br /> <br /> '''06.05.2013'''<br /> * fällt aus (Workshop)<br /> <br /> '''13.05.2013'''<br /> * SVG II<br /> ** [[Media:20130513_web_advanced_II_material.zip|Material]]<br /> * Toolthemen<br /> ** Prototyping<br /> ** Editoren<br /> <br /> '''20.05.2013'''<br /> * fällt aus (Feiertag)<br /> <br /> '''27.05.2013'''<br /> * 3D WebDevelopment I<br /> ** [[Media:20130527_web_advanced_II_material.zip|Material]]<br /> * Toolthema<br /> ** Templating Lösungen<br /> '''03.06.2013'''<br /> * Zwischenpräsentation – Einzeltermine<br /> <br /> '''10.06.2013'''<br /> * 3D WebDevelopment II<br /> ** [[Media:20130610_web_advanced_II_material.zip|Material]]<br /> ** [http://www.blender.org/download/get-blender/ Blender]]<br /> ** [https://github.com/mrdoob/three.js/ ThreeJs Lib &amp; Examples]]<br /> ** [[Media:20130610_web_advanced_II_workaround.zip|Workaround]]<br /> * Toolthema<br /> ** [[Media:20130610_web_advanced_II_toolthemen.zip|JS: Validierung, Komprimieren, Encrypten (Felix)]]<br /> ** [[Media:20130610_web_advanced_II_toolthemen.zip|Toolthemen Material]]<br /> <br /> '''17.06.2013'''<br /> * 3D WebDevelopment III<br /> * Toolthema<br /> ** MVC, Backbone.js/Ember (Jan)<br /> <br /> '''24.06.2013'''<br /> * Arbeitsprozesse Webentwickler / -designer I<br /> <br /> '''01.07.2013'''<br /> * Arbeitsprozesse Webentwickler / -designer II<br /> <br /> '''08.06.2013'''<br /> * Kursinterne Zwischenpräsentation<br /> <br /> '''Freitag, 12. Juli 2013, ab 15:30 Uhr'''<br /> * Endpräsentation Showreel (Belvederer Allee 5, Raum 007)<br /> <br /> <br /> '''30.09.2013'''<br /> * Projektabgabe (offene Sourcefiles + gehostet Webprojekt)<br /> <br /> ==...auch interessant==<br /> * Urheberrecht – [https://upload.wikimedia.org/wikipedia/commons/d/db/Licensing_tutorial_de.svg was darf ich hochladen]? (Bei Wikimedia Commons)</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:WebApps/Felix_Trojan&diff=26269 2011-04-17T13:19:08Z

<p>Azzaroff: /* Anhang: Crawling Magic */</p> <hr /> <div>==Friend Carpet==<br /> <br /> [[Image:Fc_logo.png]]<br /> <br /> ==Idee und Motivation==<br /> Social Networks erfreuen sich immer größerer Beliebtheit. Je nach Region,<br /> Hobbies, Popularität, Beruf oder Karriere kann man das für sich passende Netzwerk auswählen. Dabei komm es häufig vor, dass Freunde oder Bekannte andere Netzwerke bevorzugen als man selbst, was oft dazu führt das man in mehreren Social Networks anmeldet und nicht überall die selben Freunde hat.<br /> Bei der Webanwendung &quot;Friend Carpet&quot; geht es zum einen darum eine Brücke zwischen diesen verschiedenen Netzwerken zu schlagen, indem ein virtueller Teppich dessen Flicken Bilder von Freunden aus Netzwerken verschiedener Accounts bestehen.<br /> Zum anderen geht es um eine andere Art seine Freundeskreis zu betrachten und spielerisch zu entdecken.<br /> <br /> ==Aufbau==<br /> <br /> Der Grundlegende Ablauf:<br /> #Login Daten für 1-n Accounts in 1-m Netzwerken abfragen<br /> ##es können sich auch mehrere Accounts im selben Netzwerk befinden<br /> #einen Account auswählen und dessen Freunde crawlen<br /> #für jeden ermittelten Freund Profil-Link und Profilbild URL extrahieren<br /> ##eventuell Qualität der Bilder anpassen<br /> #Div-Container mit Bild,Link und sonstigen Informationen generieren und ausgeben <br /> #1-4 solange wiederholen bis alle Accounts abgearbeitet sind<br /> <br /> ===Technologien===<br /> *HTML4.1<br /> *PHP (crawlen der Netzwerke und generieren des Teppichs)<br /> *JavaScript (auf Usereingaben zu reagieren)<br /> *Lampp (Apache Webserver mit PHP)<br /> *phpThumb (PHP Library zur Bildmanipulation)<br /> *cURL Unterstützung für PHP(umfangreiche HTTP Anfragen zum crawlen + CookieJar)<br /> <br /> ===Login===<br /> <br /> [[Image:Fc_login_form.png]]<br /> <br /> Der Nutzer wird begrüßt mit dem &quot;Friend Carpet&quot;-Logo und einer Login Box.<br /> Dort kann er für ein bestimmtes Netzwerk(im momment Facebook oder StudiVZ) seine<br /> Login-Daten eingeben und per &quot;add&quot;-Button in eine Liste einfügen. Dies kann beliebig oft wiederholt werden um mehrere Accounts und Netzwerke in die Erstellung des Teppichs einfließen zu lassen. Ist der Nutzer zufrieden mit <br /> der Zusammenstellung kann er mit &quot;Create Carpet&quot; seinen persöhnlich Teppich erstellen lassen.<br /> <br /> ===Carpet und Interaktion===<br /> <br /> [[Image:Fc_carpet.png|600px|]]<br /> <br /> Der Nutzer kann den direkten Aufbau des Carpets(je nach Internetverbindung nun miterleben). Sollten die Login-Daten nicht korrekt sein, wird der Nutzer darauf hingewiesen, sind in der Liste aber korrekte Daten neben inkorrekten enthalten werden die korrekten trotzdem verarbeitet und angezeigt. Nach dem Aufbau stehen dem Nutzer einige Interaktionsmöglichkeiten zur Verfügung. Bei einem Mouseover über ein Profilbild erhält er zusätzliche Information zur Person(Name, Netzwerk, Account unter dem er gefunden wurde). Bei einen Klick auf ein Pofilbild wird die entsprechende Profilseite des zugehörigen Netzwerkes in einer neuen Browserseite bzw. Tab aufgerufen. Weiterhin ist es möglich die Größe der Profilbilder zu ändern. Die Profilbilder werden auf ein bestimmtes Format &quot;zugeschnitten&quot;, was manchmal dazu führt, dass man nicht das komplette Bild sieht, deshalb gibt es die Option das originale Bildverhältnis für alle Bilder anzuzeigen. Weiterhin gibt es ein Suchfeld, welches die Bilder während der Eingabe filtern kann. Der Teppich reduziert sich auf die Profilnamen die Teile der Eingabe enthalten.<br /> <br /> ===Friend Carptet auf mobilen Geräten===<br /> <br /> <br /> [[Image:Fc_mobil3.png|200px]] [[Image:Fc_mobil2.png|200px]]<br /> <br /> Auf mobilen Geräten läuft &quot;Friend Carpet&quot; ohne Probleme. Getestet wurde mit<br /> einem Motorola Defy(Display 480x854) und mit dem Emulator aus dem Android SDK.<br /> CSS wurde mit '''''@media only screen and (max-device-width: 480px)''''' angepasst. Das Login-Feld sowie der Carpet selbst werden auf komplette Breite des mobilen Geräts angeglichen. Das Einzige was nicht funktioniert ist die Anzeige der Infobox bei einem Mouseover.<br /> <br /> ===Erfahrungen und Fazit===<br /> <br /> &quot;Friend Carpet&quot; habe ich einigen Leuten vorgeführt und die meisten fanden die Idee cool und haben einige Zeit mit dem erkunden des Carpets verbracht.Ich denke mit vielleicht noch ein paar mehr Features könnte man es so ins Netz stellen. Nur leider wäre das dass Problem mit den Nutzungsbedingungen der Betreiber der sozialen Netzwerke, die i.d.R. verbieten nämlich die automatische Durchsuchung ihrer Seiten. Manche bieten zwar APIs an, aber man ist dann gezwungen deren Interfaces zu benutzen, die nicht unbedingt das tun was man möchte. Einzige Möglichkeit wäre eine Art Lizenz für diese Art der Nutzung zu bekommen, ich fürchte aber so etwas wird sehr teuer oder garnicht erst angeboten. Was mich noch gestört hat, ist dass man an der Uni zwar relativ einfach PHP-Unterstützung bekommt, aber keine speziellen Apache-Module oder Apache-Versionen. So musste ich das Projekt privat hosten, was schade ist, weil ich es gerne als Anregung präsentiert hätte.<br /> <br /> ===Anhang: Crawling Magic===<br /> Für Interessierte hier einmal wie ich StudiVZ crawle.<br /> Facebook funktioniert ziemlich analog, davon findet man auch genug wenn man mal danach googelt. Bei Facebook crawle ich übrigens die Mobile-Version, weil ich kein Javascript unterstützen kann. Es gibt zwar eine Art &quot;noscript-Flag&quot; als GET-Request, nur der funktioniert nicht mehr allzu gut. <br /> Außerdem ist die mobile Seite wesentlich schneller abzufragen.<br /> <br /> <br /> &lt;source lang=&quot;php&quot; &gt;<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'https://secure.studivz.net/Login');<br /> curl_setopt($ch, CURLOPT_POSTFIELDS,'email='.urlencode($login_email).'&amp;password='.urlencode($login_pass).'&amp;ipRestriction=1&amp;login=Einloggen&amp;jsEnabled=true&amp;formkey=156b5e49efad4132cbe29d20939778376b0a44edc7d74fac47862a82338411a65dc24b586321a542bf7f95592a0371913275f9ceb9708e99bff5c0192f70bfaeccd6cd59c304bda62e9cd2a835ff7786a5ac330bc6a74baa9a177ce9ee6f2cad&amp;iv=8419a4452f139ba570dd856be3b1c522');<br /> curl_setopt($ch, CURLOPT_POST, 1);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> $html = curl_exec($ch);<br /> $err = 0;<br /> $err = curl_errno($ch); <br /> curl_close($ch);<br /> <br /> if ($err == 0){<br /> sleep(2); <br /> //Get Friend Link<br /> $dom = new DOMDocument();<br /> @$dom-&gt;loadHTML($html);<br /> $xpath = new DOMXPath($dom);<br /> $links = $xpath-&gt;query(&quot;/html/body//a[@title='Meine Freunde']&quot;);<br /> <br /> if(($links-&gt;length) &gt; 0) { <br /> $hash = $links-&gt;item(0)-&gt;getAttribute(&quot;href&quot;);<br /> preg_match(&quot;/\/Friends\/All\/(.*)\/tid\/103/&quot;, $hash, $matches);<br /> $hash = $matches[1]; <br /> <br /> $logout = $xpath-&gt;query(&quot;//a[text()='Raus hier']&quot;);<br /> <br /> <br /> //get Friends<br /> for ($j = 1; $j &lt; $limit; $j++) {<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'http://www.studivz.net/Friends/All/'.$hash.'/p/'.$j);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> $html = curl_exec($ch);<br /> <br /> curl_close($ch);<br /> //create DOM object<br /> $dom = new DOMDocument();<br /> @$dom-&gt;loadHTML($html);<br /> //use xpath to find stuff<br /> $xpath = new DOMXPath($dom);<br /> $imgs = $xpath-&gt;query(&quot;/html/body//img&quot;);<br /> //create img tags<br /> for ($i = 0; $i &lt; $imgs-&gt;length; $i++) {<br /> $img = $imgs-&gt;item($i);<br /> $img_str = &quot;&lt;img src='../phpthumb/phpThumb.php?src=&quot;.substr_replace($img-&gt;getAttribute(&quot;src&quot;), &quot;.jpg&quot;, -6).&quot;&amp;w=170&amp;h=170&amp;zc=1' &quot;;<br /> if(strpos($img_str,&quot;imagevz.net&quot;)){<br /> $name = $img-&gt;getAttribute(&quot;alt&quot;);<br /> $profileLink = $img-&gt;parentNode-&gt;getAttribute(&quot;href&quot;);<br /> <br /> echo &quot;&lt;div class='friend'&gt;&lt;a href='http://www.studivz.net&quot;.$profileLink.&quot;' target=”_blank”&gt;<br /> &quot;.$img_str.&quot;alt='&quot;.$name.&quot;'&gt;&lt;/a&gt;<br /> &lt;div class='friend_txt'&gt; <br /> &lt;p&gt;&quot;.$name.&quot;&lt;br&gt;StudiVZ&lt;br&gt;&quot;.$login_email.&quot;&lt;/p&gt; <br /> &lt;/div&gt; <br /> &lt;/div&gt;&quot;;<br /> }<br /> }<br /> }<br /> <br /> if(($logout-&gt;length) &gt; 0){ <br /> $logout = $logout-&gt;item(0)-&gt;getAttribute(&quot;href&quot;);<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'http://www.studivz.net'.$logout);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/fb_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/fb_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> curl_exec($ch);<br /> curl_close($ch);<br /> }<br /> }<br /> else{<br /> //if no links found<br /> echo &quot;&lt;p&gt;Could not find any friends for &quot;.$login_email.&quot;, maybe wrong password or email!&lt;p&gt;&quot;;<br /> }<br /> }<br /> &lt;/source&gt;<br /> <br /> Das Ausloggen am Ende ist sehr wichtig, andernfalls kann es dazu führen dass bei schnellen wiederholten Anfragen StudiVZ einem Captchas wesentlich schneller aufzwingt und man dadurch nicht richtig angemeldet wird.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:WebApps/Felix_Trojan&diff=26268 2011-04-17T13:18:33Z

<p>Azzaroff: /* Anhang: Crawling Magic */</p> <hr /> <div>==Friend Carpet==<br /> <br /> [[Image:Fc_logo.png]]<br /> <br /> ==Idee und Motivation==<br /> Social Networks erfreuen sich immer größerer Beliebtheit. Je nach Region,<br /> Hobbies, Popularität, Beruf oder Karriere kann man das für sich passende Netzwerk auswählen. Dabei komm es häufig vor, dass Freunde oder Bekannte andere Netzwerke bevorzugen als man selbst, was oft dazu führt das man in mehreren Social Networks anmeldet und nicht überall die selben Freunde hat.<br /> Bei der Webanwendung &quot;Friend Carpet&quot; geht es zum einen darum eine Brücke zwischen diesen verschiedenen Netzwerken zu schlagen, indem ein virtueller Teppich dessen Flicken Bilder von Freunden aus Netzwerken verschiedener Accounts bestehen.<br /> Zum anderen geht es um eine andere Art seine Freundeskreis zu betrachten und spielerisch zu entdecken.<br /> <br /> ==Aufbau==<br /> <br /> Der Grundlegende Ablauf:<br /> #Login Daten für 1-n Accounts in 1-m Netzwerken abfragen<br /> ##es können sich auch mehrere Accounts im selben Netzwerk befinden<br /> #einen Account auswählen und dessen Freunde crawlen<br /> #für jeden ermittelten Freund Profil-Link und Profilbild URL extrahieren<br /> ##eventuell Qualität der Bilder anpassen<br /> #Div-Container mit Bild,Link und sonstigen Informationen generieren und ausgeben <br /> #1-4 solange wiederholen bis alle Accounts abgearbeitet sind<br /> <br /> ===Technologien===<br /> *HTML4.1<br /> *PHP (crawlen der Netzwerke und generieren des Teppichs)<br /> *JavaScript (auf Usereingaben zu reagieren)<br /> *Lampp (Apache Webserver mit PHP)<br /> *phpThumb (PHP Library zur Bildmanipulation)<br /> *cURL Unterstützung für PHP(umfangreiche HTTP Anfragen zum crawlen + CookieJar)<br /> <br /> ===Login===<br /> <br /> [[Image:Fc_login_form.png]]<br /> <br /> Der Nutzer wird begrüßt mit dem &quot;Friend Carpet&quot;-Logo und einer Login Box.<br /> Dort kann er für ein bestimmtes Netzwerk(im momment Facebook oder StudiVZ) seine<br /> Login-Daten eingeben und per &quot;add&quot;-Button in eine Liste einfügen. Dies kann beliebig oft wiederholt werden um mehrere Accounts und Netzwerke in die Erstellung des Teppichs einfließen zu lassen. Ist der Nutzer zufrieden mit <br /> der Zusammenstellung kann er mit &quot;Create Carpet&quot; seinen persöhnlich Teppich erstellen lassen.<br /> <br /> ===Carpet und Interaktion===<br /> <br /> [[Image:Fc_carpet.png|600px|]]<br /> <br /> Der Nutzer kann den direkten Aufbau des Carpets(je nach Internetverbindung nun miterleben). Sollten die Login-Daten nicht korrekt sein, wird der Nutzer darauf hingewiesen, sind in der Liste aber korrekte Daten neben inkorrekten enthalten werden die korrekten trotzdem verarbeitet und angezeigt. Nach dem Aufbau stehen dem Nutzer einige Interaktionsmöglichkeiten zur Verfügung. Bei einem Mouseover über ein Profilbild erhält er zusätzliche Information zur Person(Name, Netzwerk, Account unter dem er gefunden wurde). Bei einen Klick auf ein Pofilbild wird die entsprechende Profilseite des zugehörigen Netzwerkes in einer neuen Browserseite bzw. Tab aufgerufen. Weiterhin ist es möglich die Größe der Profilbilder zu ändern. Die Profilbilder werden auf ein bestimmtes Format &quot;zugeschnitten&quot;, was manchmal dazu führt, dass man nicht das komplette Bild sieht, deshalb gibt es die Option das originale Bildverhältnis für alle Bilder anzuzeigen. Weiterhin gibt es ein Suchfeld, welches die Bilder während der Eingabe filtern kann. Der Teppich reduziert sich auf die Profilnamen die Teile der Eingabe enthalten.<br /> <br /> ===Friend Carptet auf mobilen Geräten===<br /> <br /> <br /> [[Image:Fc_mobil3.png|200px]] [[Image:Fc_mobil2.png|200px]]<br /> <br /> Auf mobilen Geräten läuft &quot;Friend Carpet&quot; ohne Probleme. Getestet wurde mit<br /> einem Motorola Defy(Display 480x854) und mit dem Emulator aus dem Android SDK.<br /> CSS wurde mit '''''@media only screen and (max-device-width: 480px)''''' angepasst. Das Login-Feld sowie der Carpet selbst werden auf komplette Breite des mobilen Geräts angeglichen. Das Einzige was nicht funktioniert ist die Anzeige der Infobox bei einem Mouseover.<br /> <br /> ===Erfahrungen und Fazit===<br /> <br /> &quot;Friend Carpet&quot; habe ich einigen Leuten vorgeführt und die meisten fanden die Idee cool und haben einige Zeit mit dem erkunden des Carpets verbracht.Ich denke mit vielleicht noch ein paar mehr Features könnte man es so ins Netz stellen. Nur leider wäre das dass Problem mit den Nutzungsbedingungen der Betreiber der sozialen Netzwerke, die i.d.R. verbieten nämlich die automatische Durchsuchung ihrer Seiten. Manche bieten zwar APIs an, aber man ist dann gezwungen deren Interfaces zu benutzen, die nicht unbedingt das tun was man möchte. Einzige Möglichkeit wäre eine Art Lizenz für diese Art der Nutzung zu bekommen, ich fürchte aber so etwas wird sehr teuer oder garnicht erst angeboten. Was mich noch gestört hat, ist dass man an der Uni zwar relativ einfach PHP-Unterstützung bekommt, aber keine speziellen Apache-Module oder Apache-Versionen. So musste ich das Projekt privat hosten, was schade ist, weil ich es gerne als Anregung präsentiert hätte.<br /> <br /> ===Anhang: Crawling Magic===<br /> Für Interessierte hier einmal wie ich StudiVZ crawle.<br /> Facebook funktioniert ziemlich analog, davon findet man auch genug wenn man mal danach googelt. Bei Facebook crawle ich übrigens die Mobile-Version, weil ich kein Javascript unterstützen kann. Es gibt zwar eine Art &quot;noscript-Flag&quot; als GET-Request, nur das funktioniert nicht mehr allzu gut. <br /> Außerdem ist die Mobile Seite wesentlich schneller abzufragen.<br /> <br /> <br /> &lt;source lang=&quot;php&quot; &gt;<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'https://secure.studivz.net/Login');<br /> curl_setopt($ch, CURLOPT_POSTFIELDS,'email='.urlencode($login_email).'&amp;password='.urlencode($login_pass).'&amp;ipRestriction=1&amp;login=Einloggen&amp;jsEnabled=true&amp;formkey=156b5e49efad4132cbe29d20939778376b0a44edc7d74fac47862a82338411a65dc24b586321a542bf7f95592a0371913275f9ceb9708e99bff5c0192f70bfaeccd6cd59c304bda62e9cd2a835ff7786a5ac330bc6a74baa9a177ce9ee6f2cad&amp;iv=8419a4452f139ba570dd856be3b1c522');<br /> curl_setopt($ch, CURLOPT_POST, 1);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> $html = curl_exec($ch);<br /> $err = 0;<br /> $err = curl_errno($ch); <br /> curl_close($ch);<br /> <br /> if ($err == 0){<br /> sleep(2); <br /> //Get Friend Link<br /> $dom = new DOMDocument();<br /> @$dom-&gt;loadHTML($html);<br /> $xpath = new DOMXPath($dom);<br /> $links = $xpath-&gt;query(&quot;/html/body//a[@title='Meine Freunde']&quot;);<br /> <br /> if(($links-&gt;length) &gt; 0) { <br /> $hash = $links-&gt;item(0)-&gt;getAttribute(&quot;href&quot;);<br /> preg_match(&quot;/\/Friends\/All\/(.*)\/tid\/103/&quot;, $hash, $matches);<br /> $hash = $matches[1]; <br /> <br /> $logout = $xpath-&gt;query(&quot;//a[text()='Raus hier']&quot;);<br /> <br /> <br /> //get Friends<br /> for ($j = 1; $j &lt; $limit; $j++) {<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'http://www.studivz.net/Friends/All/'.$hash.'/p/'.$j);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> $html = curl_exec($ch);<br /> <br /> curl_close($ch);<br /> //create DOM object<br /> $dom = new DOMDocument();<br /> @$dom-&gt;loadHTML($html);<br /> //use xpath to find stuff<br /> $xpath = new DOMXPath($dom);<br /> $imgs = $xpath-&gt;query(&quot;/html/body//img&quot;);<br /> //create img tags<br /> for ($i = 0; $i &lt; $imgs-&gt;length; $i++) {<br /> $img = $imgs-&gt;item($i);<br /> $img_str = &quot;&lt;img src='../phpthumb/phpThumb.php?src=&quot;.substr_replace($img-&gt;getAttribute(&quot;src&quot;), &quot;.jpg&quot;, -6).&quot;&amp;w=170&amp;h=170&amp;zc=1' &quot;;<br /> if(strpos($img_str,&quot;imagevz.net&quot;)){<br /> $name = $img-&gt;getAttribute(&quot;alt&quot;);<br /> $profileLink = $img-&gt;parentNode-&gt;getAttribute(&quot;href&quot;);<br /> <br /> echo &quot;&lt;div class='friend'&gt;&lt;a href='http://www.studivz.net&quot;.$profileLink.&quot;' target=”_blank”&gt;<br /> &quot;.$img_str.&quot;alt='&quot;.$name.&quot;'&gt;&lt;/a&gt;<br /> &lt;div class='friend_txt'&gt; <br /> &lt;p&gt;&quot;.$name.&quot;&lt;br&gt;StudiVZ&lt;br&gt;&quot;.$login_email.&quot;&lt;/p&gt; <br /> &lt;/div&gt; <br /> &lt;/div&gt;&quot;;<br /> }<br /> }<br /> }<br /> <br /> if(($logout-&gt;length) &gt; 0){ <br /> $logout = $logout-&gt;item(0)-&gt;getAttribute(&quot;href&quot;);<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'http://www.studivz.net'.$logout);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/fb_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/fb_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> curl_exec($ch);<br /> curl_close($ch);<br /> }<br /> }<br /> else{<br /> //if no links found<br /> echo &quot;&lt;p&gt;Could not find any friends for &quot;.$login_email.&quot;, maybe wrong password or email!&lt;p&gt;&quot;;<br /> }<br /> }<br /> &lt;/source&gt;<br /> <br /> Das Ausloggen am Ende ist sehr wichtig, andernfalls kann es dazu führen dass bei schnellen wiederholten Anfragen StudiVZ einem Captchas wesentlich schneller aufzwingt und man dadurch nicht richtig angemeldet wird.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:WebApps/Felix_Trojan&diff=26267 2011-04-17T13:15:36Z

<p>Azzaroff: /* Friend Carptet auf mobilen Geräten */</p> <hr /> <div>==Friend Carpet==<br /> <br /> [[Image:Fc_logo.png]]<br /> <br /> ==Idee und Motivation==<br /> Social Networks erfreuen sich immer größerer Beliebtheit. Je nach Region,<br /> Hobbies, Popularität, Beruf oder Karriere kann man das für sich passende Netzwerk auswählen. Dabei komm es häufig vor, dass Freunde oder Bekannte andere Netzwerke bevorzugen als man selbst, was oft dazu führt das man in mehreren Social Networks anmeldet und nicht überall die selben Freunde hat.<br /> Bei der Webanwendung &quot;Friend Carpet&quot; geht es zum einen darum eine Brücke zwischen diesen verschiedenen Netzwerken zu schlagen, indem ein virtueller Teppich dessen Flicken Bilder von Freunden aus Netzwerken verschiedener Accounts bestehen.<br /> Zum anderen geht es um eine andere Art seine Freundeskreis zu betrachten und spielerisch zu entdecken.<br /> <br /> ==Aufbau==<br /> <br /> Der Grundlegende Ablauf:<br /> #Login Daten für 1-n Accounts in 1-m Netzwerken abfragen<br /> ##es können sich auch mehrere Accounts im selben Netzwerk befinden<br /> #einen Account auswählen und dessen Freunde crawlen<br /> #für jeden ermittelten Freund Profil-Link und Profilbild URL extrahieren<br /> ##eventuell Qualität der Bilder anpassen<br /> #Div-Container mit Bild,Link und sonstigen Informationen generieren und ausgeben <br /> #1-4 solange wiederholen bis alle Accounts abgearbeitet sind<br /> <br /> ===Technologien===<br /> *HTML4.1<br /> *PHP (crawlen der Netzwerke und generieren des Teppichs)<br /> *JavaScript (auf Usereingaben zu reagieren)<br /> *Lampp (Apache Webserver mit PHP)<br /> *phpThumb (PHP Library zur Bildmanipulation)<br /> *cURL Unterstützung für PHP(umfangreiche HTTP Anfragen zum crawlen + CookieJar)<br /> <br /> ===Login===<br /> <br /> [[Image:Fc_login_form.png]]<br /> <br /> Der Nutzer wird begrüßt mit dem &quot;Friend Carpet&quot;-Logo und einer Login Box.<br /> Dort kann er für ein bestimmtes Netzwerk(im momment Facebook oder StudiVZ) seine<br /> Login-Daten eingeben und per &quot;add&quot;-Button in eine Liste einfügen. Dies kann beliebig oft wiederholt werden um mehrere Accounts und Netzwerke in die Erstellung des Teppichs einfließen zu lassen. Ist der Nutzer zufrieden mit <br /> der Zusammenstellung kann er mit &quot;Create Carpet&quot; seinen persöhnlich Teppich erstellen lassen.<br /> <br /> ===Carpet und Interaktion===<br /> <br /> [[Image:Fc_carpet.png|600px|]]<br /> <br /> Der Nutzer kann den direkten Aufbau des Carpets(je nach Internetverbindung nun miterleben). Sollten die Login-Daten nicht korrekt sein, wird der Nutzer darauf hingewiesen, sind in der Liste aber korrekte Daten neben inkorrekten enthalten werden die korrekten trotzdem verarbeitet und angezeigt. Nach dem Aufbau stehen dem Nutzer einige Interaktionsmöglichkeiten zur Verfügung. Bei einem Mouseover über ein Profilbild erhält er zusätzliche Information zur Person(Name, Netzwerk, Account unter dem er gefunden wurde). Bei einen Klick auf ein Pofilbild wird die entsprechende Profilseite des zugehörigen Netzwerkes in einer neuen Browserseite bzw. Tab aufgerufen. Weiterhin ist es möglich die Größe der Profilbilder zu ändern. Die Profilbilder werden auf ein bestimmtes Format &quot;zugeschnitten&quot;, was manchmal dazu führt, dass man nicht das komplette Bild sieht, deshalb gibt es die Option das originale Bildverhältnis für alle Bilder anzuzeigen. Weiterhin gibt es ein Suchfeld, welches die Bilder während der Eingabe filtern kann. Der Teppich reduziert sich auf die Profilnamen die Teile der Eingabe enthalten.<br /> <br /> ===Friend Carptet auf mobilen Geräten===<br /> <br /> <br /> [[Image:Fc_mobil3.png|200px]] [[Image:Fc_mobil2.png|200px]]<br /> <br /> Auf mobilen Geräten läuft &quot;Friend Carpet&quot; ohne Probleme. Getestet wurde mit<br /> einem Motorola Defy(Display 480x854) und mit dem Emulator aus dem Android SDK.<br /> CSS wurde mit '''''@media only screen and (max-device-width: 480px)''''' angepasst. Das Login-Feld sowie der Carpet selbst werden auf komplette Breite des mobilen Geräts angeglichen. Das Einzige was nicht funktioniert ist die Anzeige der Infobox bei einem Mouseover.<br /> <br /> ===Erfahrungen und Fazit===<br /> <br /> &quot;Friend Carpet&quot; habe ich einigen Leuten vorgeführt und die meisten fanden die Idee cool und haben einige Zeit mit dem erkunden des Carpets verbracht.Ich denke mit vielleicht noch ein paar mehr Features könnte man es so ins Netz stellen. Nur leider wäre das dass Problem mit den Nutzungsbedingungen der Betreiber der sozialen Netzwerke, die i.d.R. verbieten nämlich die automatische Durchsuchung ihrer Seiten. Manche bieten zwar APIs an, aber man ist dann gezwungen deren Interfaces zu benutzen, die nicht unbedingt das tun was man möchte. Einzige Möglichkeit wäre eine Art Lizenz für diese Art der Nutzung zu bekommen, ich fürchte aber so etwas wird sehr teuer oder garnicht erst angeboten. Was mich noch gestört hat, ist dass man an der Uni zwar relativ einfach PHP-Unterstützung bekommt, aber keine speziellen Apache-Module oder Apache-Versionen. So musste ich das Projekt privat hosten, was schade ist, weil ich es gerne als Anregung präsentiert hätte.<br /> <br /> ===Anhang: Crawling Magic===<br /> Für interessierte hier einmal wie ich StudiVZ crawle.<br /> Facebook funktioniert ziemlich analog, davon findet man auch genug wenn man mal danach googelt. Bei Facebook crawle ich übrigens die Mobile-Version, weil ich kein Javascript unterstützen kann. Es gibt zwar eine Art &quot;noscript-Flag&quot; als GET-Request, nur das funktioniert nicht mehr allzu gut. <br /> Außerdem ist die Mobile Seite wesentlich schneller abzufragen.<br /> <br /> <br /> &lt;source lang=&quot;php&quot; &gt;<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'https://secure.studivz.net/Login');<br /> curl_setopt($ch, CURLOPT_POSTFIELDS,'email='.urlencode($login_email).'&amp;password='.urlencode($login_pass).'&amp;ipRestriction=1&amp;login=Einloggen&amp;jsEnabled=true&amp;formkey=156b5e49efad4132cbe29d20939778376b0a44edc7d74fac47862a82338411a65dc24b586321a542bf7f95592a0371913275f9ceb9708e99bff5c0192f70bfaeccd6cd59c304bda62e9cd2a835ff7786a5ac330bc6a74baa9a177ce9ee6f2cad&amp;iv=8419a4452f139ba570dd856be3b1c522');<br /> curl_setopt($ch, CURLOPT_POST, 1);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> $html = curl_exec($ch);<br /> $err = 0;<br /> $err = curl_errno($ch); <br /> curl_close($ch);<br /> <br /> if ($err == 0){<br /> sleep(2); <br /> //Get Friend Link<br /> $dom = new DOMDocument();<br /> @$dom-&gt;loadHTML($html);<br /> $xpath = new DOMXPath($dom);<br /> $links = $xpath-&gt;query(&quot;/html/body//a[@title='Meine Freunde']&quot;);<br /> <br /> if(($links-&gt;length) &gt; 0) { <br /> $hash = $links-&gt;item(0)-&gt;getAttribute(&quot;href&quot;);<br /> preg_match(&quot;/\/Friends\/All\/(.*)\/tid\/103/&quot;, $hash, $matches);<br /> $hash = $matches[1]; <br /> <br /> $logout = $xpath-&gt;query(&quot;//a[text()='Raus hier']&quot;);<br /> <br /> <br /> //get Friends<br /> for ($j = 1; $j &lt; $limit; $j++) {<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'http://www.studivz.net/Friends/All/'.$hash.'/p/'.$j);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> $html = curl_exec($ch);<br /> <br /> curl_close($ch);<br /> //create DOM object<br /> $dom = new DOMDocument();<br /> @$dom-&gt;loadHTML($html);<br /> //use xpath to find stuff<br /> $xpath = new DOMXPath($dom);<br /> $imgs = $xpath-&gt;query(&quot;/html/body//img&quot;);<br /> //create img tags<br /> for ($i = 0; $i &lt; $imgs-&gt;length; $i++) {<br /> $img = $imgs-&gt;item($i);<br /> $img_str = &quot;&lt;img src='../phpthumb/phpThumb.php?src=&quot;.substr_replace($img-&gt;getAttribute(&quot;src&quot;), &quot;.jpg&quot;, -6).&quot;&amp;w=170&amp;h=170&amp;zc=1' &quot;;<br /> if(strpos($img_str,&quot;imagevz.net&quot;)){<br /> $name = $img-&gt;getAttribute(&quot;alt&quot;);<br /> $profileLink = $img-&gt;parentNode-&gt;getAttribute(&quot;href&quot;);<br /> <br /> echo &quot;&lt;div class='friend'&gt;&lt;a href='http://www.studivz.net&quot;.$profileLink.&quot;' target=”_blank”&gt;<br /> &quot;.$img_str.&quot;alt='&quot;.$name.&quot;'&gt;&lt;/a&gt;<br /> &lt;div class='friend_txt'&gt; <br /> &lt;p&gt;&quot;.$name.&quot;&lt;br&gt;StudiVZ&lt;br&gt;&quot;.$login_email.&quot;&lt;/p&gt; <br /> &lt;/div&gt; <br /> &lt;/div&gt;&quot;;<br /> }<br /> }<br /> }<br /> <br /> if(($logout-&gt;length) &gt; 0){ <br /> $logout = $logout-&gt;item(0)-&gt;getAttribute(&quot;href&quot;);<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'http://www.studivz.net'.$logout);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/fb_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/fb_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> curl_exec($ch);<br /> curl_close($ch);<br /> }<br /> }<br /> else{<br /> //if no links found<br /> echo &quot;&lt;p&gt;Could not find any friends for &quot;.$login_email.&quot;, maybe wrong password or email!&lt;p&gt;&quot;;<br /> }<br /> }<br /> &lt;/source&gt;<br /> <br /> Das Ausloggen am Ende ist sehr wichtig, andernfalls kann es dazu führen dass bei schnellen wiederholten Anfragen StudiVZ einem Captchas wesentlich schneller aufzwingt und man dadurch nicht richtig angemeldet wird.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:WebApps/Felix_Trojan&diff=26266 2011-04-17T13:15:24Z

<p>Azzaroff: /* Erfahrungen und Fazit */</p> <hr /> <div>==Friend Carpet==<br /> <br /> [[Image:Fc_logo.png]]<br /> <br /> ==Idee und Motivation==<br /> Social Networks erfreuen sich immer größerer Beliebtheit. Je nach Region,<br /> Hobbies, Popularität, Beruf oder Karriere kann man das für sich passende Netzwerk auswählen. Dabei komm es häufig vor, dass Freunde oder Bekannte andere Netzwerke bevorzugen als man selbst, was oft dazu führt das man in mehreren Social Networks anmeldet und nicht überall die selben Freunde hat.<br /> Bei der Webanwendung &quot;Friend Carpet&quot; geht es zum einen darum eine Brücke zwischen diesen verschiedenen Netzwerken zu schlagen, indem ein virtueller Teppich dessen Flicken Bilder von Freunden aus Netzwerken verschiedener Accounts bestehen.<br /> Zum anderen geht es um eine andere Art seine Freundeskreis zu betrachten und spielerisch zu entdecken.<br /> <br /> ==Aufbau==<br /> <br /> Der Grundlegende Ablauf:<br /> #Login Daten für 1-n Accounts in 1-m Netzwerken abfragen<br /> ##es können sich auch mehrere Accounts im selben Netzwerk befinden<br /> #einen Account auswählen und dessen Freunde crawlen<br /> #für jeden ermittelten Freund Profil-Link und Profilbild URL extrahieren<br /> ##eventuell Qualität der Bilder anpassen<br /> #Div-Container mit Bild,Link und sonstigen Informationen generieren und ausgeben <br /> #1-4 solange wiederholen bis alle Accounts abgearbeitet sind<br /> <br /> ===Technologien===<br /> *HTML4.1<br /> *PHP (crawlen der Netzwerke und generieren des Teppichs)<br /> *JavaScript (auf Usereingaben zu reagieren)<br /> *Lampp (Apache Webserver mit PHP)<br /> *phpThumb (PHP Library zur Bildmanipulation)<br /> *cURL Unterstützung für PHP(umfangreiche HTTP Anfragen zum crawlen + CookieJar)<br /> <br /> ===Login===<br /> <br /> [[Image:Fc_login_form.png]]<br /> <br /> Der Nutzer wird begrüßt mit dem &quot;Friend Carpet&quot;-Logo und einer Login Box.<br /> Dort kann er für ein bestimmtes Netzwerk(im momment Facebook oder StudiVZ) seine<br /> Login-Daten eingeben und per &quot;add&quot;-Button in eine Liste einfügen. Dies kann beliebig oft wiederholt werden um mehrere Accounts und Netzwerke in die Erstellung des Teppichs einfließen zu lassen. Ist der Nutzer zufrieden mit <br /> der Zusammenstellung kann er mit &quot;Create Carpet&quot; seinen persöhnlich Teppich erstellen lassen.<br /> <br /> ===Carpet und Interaktion===<br /> <br /> [[Image:Fc_carpet.png|600px|]]<br /> <br /> Der Nutzer kann den direkten Aufbau des Carpets(je nach Internetverbindung nun miterleben). Sollten die Login-Daten nicht korrekt sein, wird der Nutzer darauf hingewiesen, sind in der Liste aber korrekte Daten neben inkorrekten enthalten werden die korrekten trotzdem verarbeitet und angezeigt. Nach dem Aufbau stehen dem Nutzer einige Interaktionsmöglichkeiten zur Verfügung. Bei einem Mouseover über ein Profilbild erhält er zusätzliche Information zur Person(Name, Netzwerk, Account unter dem er gefunden wurde). Bei einen Klick auf ein Pofilbild wird die entsprechende Profilseite des zugehörigen Netzwerkes in einer neuen Browserseite bzw. Tab aufgerufen. Weiterhin ist es möglich die Größe der Profilbilder zu ändern. Die Profilbilder werden auf ein bestimmtes Format &quot;zugeschnitten&quot;, was manchmal dazu führt, dass man nicht das komplette Bild sieht, deshalb gibt es die Option das originale Bildverhältnis für alle Bilder anzuzeigen. Weiterhin gibt es ein Suchfeld, welches die Bilder während der Eingabe filtern kann. Der Teppich reduziert sich auf die Profilnamen die Teile der Eingabe enthalten.<br /> <br /> ===Friend Carptet auf mobilen Geräten===<br /> <br /> Auf mobilen Geräten läuft &quot;Friend Carpet&quot; ohne Probleme. Getestet wurde mit<br /> einem Motorola Defy(Display 480x854) und mit dem Emulator aus dem Android SDK.<br /> CSS wurde mit '''''@media only screen and (max-device-width: 480px)''''' angepasst. Das Login-Feld sowie der Carpet selbst werden auf komplette Breite des mobilen Geräts angeglichen. Das Einzige was nicht funktioniert ist die Anzeige der Infobox bei einem Mouseover.<br /> <br /> ===Erfahrungen und Fazit===<br /> <br /> &quot;Friend Carpet&quot; habe ich einigen Leuten vorgeführt und die meisten fanden die Idee cool und haben einige Zeit mit dem erkunden des Carpets verbracht.Ich denke mit vielleicht noch ein paar mehr Features könnte man es so ins Netz stellen. Nur leider wäre das dass Problem mit den Nutzungsbedingungen der Betreiber der sozialen Netzwerke, die i.d.R. verbieten nämlich die automatische Durchsuchung ihrer Seiten. Manche bieten zwar APIs an, aber man ist dann gezwungen deren Interfaces zu benutzen, die nicht unbedingt das tun was man möchte. Einzige Möglichkeit wäre eine Art Lizenz für diese Art der Nutzung zu bekommen, ich fürchte aber so etwas wird sehr teuer oder garnicht erst angeboten. Was mich noch gestört hat, ist dass man an der Uni zwar relativ einfach PHP-Unterstützung bekommt, aber keine speziellen Apache-Module oder Apache-Versionen. So musste ich das Projekt privat hosten, was schade ist, weil ich es gerne als Anregung präsentiert hätte.<br /> <br /> ===Anhang: Crawling Magic===<br /> Für interessierte hier einmal wie ich StudiVZ crawle.<br /> Facebook funktioniert ziemlich analog, davon findet man auch genug wenn man mal danach googelt. Bei Facebook crawle ich übrigens die Mobile-Version, weil ich kein Javascript unterstützen kann. Es gibt zwar eine Art &quot;noscript-Flag&quot; als GET-Request, nur das funktioniert nicht mehr allzu gut. <br /> Außerdem ist die Mobile Seite wesentlich schneller abzufragen.<br /> <br /> <br /> &lt;source lang=&quot;php&quot; &gt;<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'https://secure.studivz.net/Login');<br /> curl_setopt($ch, CURLOPT_POSTFIELDS,'email='.urlencode($login_email).'&amp;password='.urlencode($login_pass).'&amp;ipRestriction=1&amp;login=Einloggen&amp;jsEnabled=true&amp;formkey=156b5e49efad4132cbe29d20939778376b0a44edc7d74fac47862a82338411a65dc24b586321a542bf7f95592a0371913275f9ceb9708e99bff5c0192f70bfaeccd6cd59c304bda62e9cd2a835ff7786a5ac330bc6a74baa9a177ce9ee6f2cad&amp;iv=8419a4452f139ba570dd856be3b1c522');<br /> curl_setopt($ch, CURLOPT_POST, 1);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> $html = curl_exec($ch);<br /> $err = 0;<br /> $err = curl_errno($ch); <br /> curl_close($ch);<br /> <br /> if ($err == 0){<br /> sleep(2); <br /> //Get Friend Link<br /> $dom = new DOMDocument();<br /> @$dom-&gt;loadHTML($html);<br /> $xpath = new DOMXPath($dom);<br /> $links = $xpath-&gt;query(&quot;/html/body//a[@title='Meine Freunde']&quot;);<br /> <br /> if(($links-&gt;length) &gt; 0) { <br /> $hash = $links-&gt;item(0)-&gt;getAttribute(&quot;href&quot;);<br /> preg_match(&quot;/\/Friends\/All\/(.*)\/tid\/103/&quot;, $hash, $matches);<br /> $hash = $matches[1]; <br /> <br /> $logout = $xpath-&gt;query(&quot;//a[text()='Raus hier']&quot;);<br /> <br /> <br /> //get Friends<br /> for ($j = 1; $j &lt; $limit; $j++) {<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'http://www.studivz.net/Friends/All/'.$hash.'/p/'.$j);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> $html = curl_exec($ch);<br /> <br /> curl_close($ch);<br /> //create DOM object<br /> $dom = new DOMDocument();<br /> @$dom-&gt;loadHTML($html);<br /> //use xpath to find stuff<br /> $xpath = new DOMXPath($dom);<br /> $imgs = $xpath-&gt;query(&quot;/html/body//img&quot;);<br /> //create img tags<br /> for ($i = 0; $i &lt; $imgs-&gt;length; $i++) {<br /> $img = $imgs-&gt;item($i);<br /> $img_str = &quot;&lt;img src='../phpthumb/phpThumb.php?src=&quot;.substr_replace($img-&gt;getAttribute(&quot;src&quot;), &quot;.jpg&quot;, -6).&quot;&amp;w=170&amp;h=170&amp;zc=1' &quot;;<br /> if(strpos($img_str,&quot;imagevz.net&quot;)){<br /> $name = $img-&gt;getAttribute(&quot;alt&quot;);<br /> $profileLink = $img-&gt;parentNode-&gt;getAttribute(&quot;href&quot;);<br /> <br /> echo &quot;&lt;div class='friend'&gt;&lt;a href='http://www.studivz.net&quot;.$profileLink.&quot;' target=”_blank”&gt;<br /> &quot;.$img_str.&quot;alt='&quot;.$name.&quot;'&gt;&lt;/a&gt;<br /> &lt;div class='friend_txt'&gt; <br /> &lt;p&gt;&quot;.$name.&quot;&lt;br&gt;StudiVZ&lt;br&gt;&quot;.$login_email.&quot;&lt;/p&gt; <br /> &lt;/div&gt; <br /> &lt;/div&gt;&quot;;<br /> }<br /> }<br /> }<br /> <br /> if(($logout-&gt;length) &gt; 0){ <br /> $logout = $logout-&gt;item(0)-&gt;getAttribute(&quot;href&quot;);<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'http://www.studivz.net'.$logout);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/fb_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/fb_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> curl_exec($ch);<br /> curl_close($ch);<br /> }<br /> }<br /> else{<br /> //if no links found<br /> echo &quot;&lt;p&gt;Could not find any friends for &quot;.$login_email.&quot;, maybe wrong password or email!&lt;p&gt;&quot;;<br /> }<br /> }<br /> &lt;/source&gt;<br /> <br /> Das Ausloggen am Ende ist sehr wichtig, andernfalls kann es dazu führen dass bei schnellen wiederholten Anfragen StudiVZ einem Captchas wesentlich schneller aufzwingt und man dadurch nicht richtig angemeldet wird.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:WebApps/Felix_Trojan&diff=26265 2011-04-17T13:11:24Z

<p>Azzaroff: /* Erfahrungen und Fazit */</p> <hr /> <div>==Friend Carpet==<br /> <br /> [[Image:Fc_logo.png]]<br /> <br /> ==Idee und Motivation==<br /> Social Networks erfreuen sich immer größerer Beliebtheit. Je nach Region,<br /> Hobbies, Popularität, Beruf oder Karriere kann man das für sich passende Netzwerk auswählen. Dabei komm es häufig vor, dass Freunde oder Bekannte andere Netzwerke bevorzugen als man selbst, was oft dazu führt das man in mehreren Social Networks anmeldet und nicht überall die selben Freunde hat.<br /> Bei der Webanwendung &quot;Friend Carpet&quot; geht es zum einen darum eine Brücke zwischen diesen verschiedenen Netzwerken zu schlagen, indem ein virtueller Teppich dessen Flicken Bilder von Freunden aus Netzwerken verschiedener Accounts bestehen.<br /> Zum anderen geht es um eine andere Art seine Freundeskreis zu betrachten und spielerisch zu entdecken.<br /> <br /> ==Aufbau==<br /> <br /> Der Grundlegende Ablauf:<br /> #Login Daten für 1-n Accounts in 1-m Netzwerken abfragen<br /> ##es können sich auch mehrere Accounts im selben Netzwerk befinden<br /> #einen Account auswählen und dessen Freunde crawlen<br /> #für jeden ermittelten Freund Profil-Link und Profilbild URL extrahieren<br /> ##eventuell Qualität der Bilder anpassen<br /> #Div-Container mit Bild,Link und sonstigen Informationen generieren und ausgeben <br /> #1-4 solange wiederholen bis alle Accounts abgearbeitet sind<br /> <br /> ===Technologien===<br /> *HTML4.1<br /> *PHP (crawlen der Netzwerke und generieren des Teppichs)<br /> *JavaScript (auf Usereingaben zu reagieren)<br /> *Lampp (Apache Webserver mit PHP)<br /> *phpThumb (PHP Library zur Bildmanipulation)<br /> *cURL Unterstützung für PHP(umfangreiche HTTP Anfragen zum crawlen + CookieJar)<br /> <br /> ===Login===<br /> <br /> [[Image:Fc_login_form.png]]<br /> <br /> Der Nutzer wird begrüßt mit dem &quot;Friend Carpet&quot;-Logo und einer Login Box.<br /> Dort kann er für ein bestimmtes Netzwerk(im momment Facebook oder StudiVZ) seine<br /> Login-Daten eingeben und per &quot;add&quot;-Button in eine Liste einfügen. Dies kann beliebig oft wiederholt werden um mehrere Accounts und Netzwerke in die Erstellung des Teppichs einfließen zu lassen. Ist der Nutzer zufrieden mit <br /> der Zusammenstellung kann er mit &quot;Create Carpet&quot; seinen persöhnlich Teppich erstellen lassen.<br /> <br /> ===Carpet und Interaktion===<br /> <br /> [[Image:Fc_carpet.png|600px|]]<br /> <br /> Der Nutzer kann den direkten Aufbau des Carpets(je nach Internetverbindung nun miterleben). Sollten die Login-Daten nicht korrekt sein, wird der Nutzer darauf hingewiesen, sind in der Liste aber korrekte Daten neben inkorrekten enthalten werden die korrekten trotzdem verarbeitet und angezeigt. Nach dem Aufbau stehen dem Nutzer einige Interaktionsmöglichkeiten zur Verfügung. Bei einem Mouseover über ein Profilbild erhält er zusätzliche Information zur Person(Name, Netzwerk, Account unter dem er gefunden wurde). Bei einen Klick auf ein Pofilbild wird die entsprechende Profilseite des zugehörigen Netzwerkes in einer neuen Browserseite bzw. Tab aufgerufen. Weiterhin ist es möglich die Größe der Profilbilder zu ändern. Die Profilbilder werden auf ein bestimmtes Format &quot;zugeschnitten&quot;, was manchmal dazu führt, dass man nicht das komplette Bild sieht, deshalb gibt es die Option das originale Bildverhältnis für alle Bilder anzuzeigen. Weiterhin gibt es ein Suchfeld, welches die Bilder während der Eingabe filtern kann. Der Teppich reduziert sich auf die Profilnamen die Teile der Eingabe enthalten.<br /> <br /> ===Friend Carptet auf mobilen Geräten===<br /> <br /> Auf mobilen Geräten läuft &quot;Friend Carpet&quot; ohne Probleme. Getestet wurde mit<br /> einem Motorola Defy(Display 480x854) und mit dem Emulator aus dem Android SDK.<br /> CSS wurde mit '''''@media only screen and (max-device-width: 480px)''''' angepasst. Das Login-Feld sowie der Carpet selbst werden auf komplette Breite des mobilen Geräts angeglichen. Das Einzige was nicht funktioniert ist die Anzeige der Infobox bei einem Mouseover.<br /> <br /> ===Erfahrungen und Fazit===<br /> <br /> [[Image:Fc_mobil3.png|200px]] [[Image:Fc_mobil2.png|200px]]<br /> <br /> &quot;Friend Carpet&quot; habe ich einigen Leuten vorgeführt und die meisten fanden die Idee cool und haben einige Zeit mit dem erkunden des Carpets verbracht.Ich denke mit vielleicht noch ein paar mehr Features könnte man es so ins Netz stellen. Nur leider wäre das dass Problem mit den Nutzungsbedingungen der Betreiber der sozialen Netzwerke, die i.d.R. verbieten nämlich die automatische Durchsuchung ihrer Seiten. Manche bieten zwar APIs an, aber man ist dann gezwungen deren Interfaces zu benutzen, die nicht unbedingt das tun was man möchte. Einzige Möglichkeit wäre eine Art Lizenz für diese Art der Nutzung zu bekommen, ich fürchte aber so etwas wird sehr teuer oder garnicht erst angeboten. Was mich noch gestört hat, ist dass man an der Uni zwar relativ einfach PHP-Unterstützung bekommt, aber keine speziellen Apache-Module oder Apache-Versionen. So musste ich das Projekt privat hosten, was schade ist, weil ich es gerne als Anregung präsentiert hätte.<br /> <br /> ===Anhang: Crawling Magic===<br /> Für interessierte hier einmal wie ich StudiVZ crawle.<br /> Facebook funktioniert ziemlich analog, davon findet man auch genug wenn man mal danach googelt. Bei Facebook crawle ich übrigens die Mobile-Version, weil ich kein Javascript unterstützen kann. Es gibt zwar eine Art &quot;noscript-Flag&quot; als GET-Request, nur das funktioniert nicht mehr allzu gut. <br /> Außerdem ist die Mobile Seite wesentlich schneller abzufragen.<br /> <br /> <br /> &lt;source lang=&quot;php&quot; &gt;<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'https://secure.studivz.net/Login');<br /> curl_setopt($ch, CURLOPT_POSTFIELDS,'email='.urlencode($login_email).'&amp;password='.urlencode($login_pass).'&amp;ipRestriction=1&amp;login=Einloggen&amp;jsEnabled=true&amp;formkey=156b5e49efad4132cbe29d20939778376b0a44edc7d74fac47862a82338411a65dc24b586321a542bf7f95592a0371913275f9ceb9708e99bff5c0192f70bfaeccd6cd59c304bda62e9cd2a835ff7786a5ac330bc6a74baa9a177ce9ee6f2cad&amp;iv=8419a4452f139ba570dd856be3b1c522');<br /> curl_setopt($ch, CURLOPT_POST, 1);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> $html = curl_exec($ch);<br /> $err = 0;<br /> $err = curl_errno($ch); <br /> curl_close($ch);<br /> <br /> if ($err == 0){<br /> sleep(2); <br /> //Get Friend Link<br /> $dom = new DOMDocument();<br /> @$dom-&gt;loadHTML($html);<br /> $xpath = new DOMXPath($dom);<br /> $links = $xpath-&gt;query(&quot;/html/body//a[@title='Meine Freunde']&quot;);<br /> <br /> if(($links-&gt;length) &gt; 0) { <br /> $hash = $links-&gt;item(0)-&gt;getAttribute(&quot;href&quot;);<br /> preg_match(&quot;/\/Friends\/All\/(.*)\/tid\/103/&quot;, $hash, $matches);<br /> $hash = $matches[1]; <br /> <br /> $logout = $xpath-&gt;query(&quot;//a[text()='Raus hier']&quot;);<br /> <br /> <br /> //get Friends<br /> for ($j = 1; $j &lt; $limit; $j++) {<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'http://www.studivz.net/Friends/All/'.$hash.'/p/'.$j);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> $html = curl_exec($ch);<br /> <br /> curl_close($ch);<br /> //create DOM object<br /> $dom = new DOMDocument();<br /> @$dom-&gt;loadHTML($html);<br /> //use xpath to find stuff<br /> $xpath = new DOMXPath($dom);<br /> $imgs = $xpath-&gt;query(&quot;/html/body//img&quot;);<br /> //create img tags<br /> for ($i = 0; $i &lt; $imgs-&gt;length; $i++) {<br /> $img = $imgs-&gt;item($i);<br /> $img_str = &quot;&lt;img src='../phpthumb/phpThumb.php?src=&quot;.substr_replace($img-&gt;getAttribute(&quot;src&quot;), &quot;.jpg&quot;, -6).&quot;&amp;w=170&amp;h=170&amp;zc=1' &quot;;<br /> if(strpos($img_str,&quot;imagevz.net&quot;)){<br /> $name = $img-&gt;getAttribute(&quot;alt&quot;);<br /> $profileLink = $img-&gt;parentNode-&gt;getAttribute(&quot;href&quot;);<br /> <br /> echo &quot;&lt;div class='friend'&gt;&lt;a href='http://www.studivz.net&quot;.$profileLink.&quot;' target=”_blank”&gt;<br /> &quot;.$img_str.&quot;alt='&quot;.$name.&quot;'&gt;&lt;/a&gt;<br /> &lt;div class='friend_txt'&gt; <br /> &lt;p&gt;&quot;.$name.&quot;&lt;br&gt;StudiVZ&lt;br&gt;&quot;.$login_email.&quot;&lt;/p&gt; <br /> &lt;/div&gt; <br /> &lt;/div&gt;&quot;;<br /> }<br /> }<br /> }<br /> <br /> if(($logout-&gt;length) &gt; 0){ <br /> $logout = $logout-&gt;item(0)-&gt;getAttribute(&quot;href&quot;);<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'http://www.studivz.net'.$logout);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/fb_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/fb_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> curl_exec($ch);<br /> curl_close($ch);<br /> }<br /> }<br /> else{<br /> //if no links found<br /> echo &quot;&lt;p&gt;Could not find any friends for &quot;.$login_email.&quot;, maybe wrong password or email!&lt;p&gt;&quot;;<br /> }<br /> }<br /> &lt;/source&gt;<br /> <br /> Das Ausloggen am Ende ist sehr wichtig, andernfalls kann es dazu führen dass bei schnellen wiederholten Anfragen StudiVZ einem Captchas wesentlich schneller aufzwingt und man dadurch nicht richtig angemeldet wird.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:Fc_mobil3.png&diff=26264 2011-04-17T13:10:46Z

<p>Azzaroff: FC auf dem Defy</p> <hr /> <div>== Summary ==<br /> FC auf dem Defy<br /> == Copyright status: ==<br /> <br /> == Licensing ==<br /> {{self|c}}<br /> == Source: ==</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:WebApps/Felix_Trojan&diff=26263 2011-04-17T13:10:16Z

<p>Azzaroff: /* Erfahrungen und Fazit */</p> <hr /> <div>==Friend Carpet==<br /> <br /> [[Image:Fc_logo.png]]<br /> <br /> ==Idee und Motivation==<br /> Social Networks erfreuen sich immer größerer Beliebtheit. Je nach Region,<br /> Hobbies, Popularität, Beruf oder Karriere kann man das für sich passende Netzwerk auswählen. Dabei komm es häufig vor, dass Freunde oder Bekannte andere Netzwerke bevorzugen als man selbst, was oft dazu führt das man in mehreren Social Networks anmeldet und nicht überall die selben Freunde hat.<br /> Bei der Webanwendung &quot;Friend Carpet&quot; geht es zum einen darum eine Brücke zwischen diesen verschiedenen Netzwerken zu schlagen, indem ein virtueller Teppich dessen Flicken Bilder von Freunden aus Netzwerken verschiedener Accounts bestehen.<br /> Zum anderen geht es um eine andere Art seine Freundeskreis zu betrachten und spielerisch zu entdecken.<br /> <br /> ==Aufbau==<br /> <br /> Der Grundlegende Ablauf:<br /> #Login Daten für 1-n Accounts in 1-m Netzwerken abfragen<br /> ##es können sich auch mehrere Accounts im selben Netzwerk befinden<br /> #einen Account auswählen und dessen Freunde crawlen<br /> #für jeden ermittelten Freund Profil-Link und Profilbild URL extrahieren<br /> ##eventuell Qualität der Bilder anpassen<br /> #Div-Container mit Bild,Link und sonstigen Informationen generieren und ausgeben <br /> #1-4 solange wiederholen bis alle Accounts abgearbeitet sind<br /> <br /> ===Technologien===<br /> *HTML4.1<br /> *PHP (crawlen der Netzwerke und generieren des Teppichs)<br /> *JavaScript (auf Usereingaben zu reagieren)<br /> *Lampp (Apache Webserver mit PHP)<br /> *phpThumb (PHP Library zur Bildmanipulation)<br /> *cURL Unterstützung für PHP(umfangreiche HTTP Anfragen zum crawlen + CookieJar)<br /> <br /> ===Login===<br /> <br /> [[Image:Fc_login_form.png]]<br /> <br /> Der Nutzer wird begrüßt mit dem &quot;Friend Carpet&quot;-Logo und einer Login Box.<br /> Dort kann er für ein bestimmtes Netzwerk(im momment Facebook oder StudiVZ) seine<br /> Login-Daten eingeben und per &quot;add&quot;-Button in eine Liste einfügen. Dies kann beliebig oft wiederholt werden um mehrere Accounts und Netzwerke in die Erstellung des Teppichs einfließen zu lassen. Ist der Nutzer zufrieden mit <br /> der Zusammenstellung kann er mit &quot;Create Carpet&quot; seinen persöhnlich Teppich erstellen lassen.<br /> <br /> ===Carpet und Interaktion===<br /> <br /> [[Image:Fc_carpet.png|600px|]]<br /> <br /> Der Nutzer kann den direkten Aufbau des Carpets(je nach Internetverbindung nun miterleben). Sollten die Login-Daten nicht korrekt sein, wird der Nutzer darauf hingewiesen, sind in der Liste aber korrekte Daten neben inkorrekten enthalten werden die korrekten trotzdem verarbeitet und angezeigt. Nach dem Aufbau stehen dem Nutzer einige Interaktionsmöglichkeiten zur Verfügung. Bei einem Mouseover über ein Profilbild erhält er zusätzliche Information zur Person(Name, Netzwerk, Account unter dem er gefunden wurde). Bei einen Klick auf ein Pofilbild wird die entsprechende Profilseite des zugehörigen Netzwerkes in einer neuen Browserseite bzw. Tab aufgerufen. Weiterhin ist es möglich die Größe der Profilbilder zu ändern. Die Profilbilder werden auf ein bestimmtes Format &quot;zugeschnitten&quot;, was manchmal dazu führt, dass man nicht das komplette Bild sieht, deshalb gibt es die Option das originale Bildverhältnis für alle Bilder anzuzeigen. Weiterhin gibt es ein Suchfeld, welches die Bilder während der Eingabe filtern kann. Der Teppich reduziert sich auf die Profilnamen die Teile der Eingabe enthalten.<br /> <br /> ===Friend Carptet auf mobilen Geräten===<br /> <br /> Auf mobilen Geräten läuft &quot;Friend Carpet&quot; ohne Probleme. Getestet wurde mit<br /> einem Motorola Defy(Display 480x854) und mit dem Emulator aus dem Android SDK.<br /> CSS wurde mit '''''@media only screen and (max-device-width: 480px)''''' angepasst. Das Login-Feld sowie der Carpet selbst werden auf komplette Breite des mobilen Geräts angeglichen. Das Einzige was nicht funktioniert ist die Anzeige der Infobox bei einem Mouseover.<br /> <br /> ===Erfahrungen und Fazit===<br /> <br /> [[Image:Fc_mobil2.png]] [[Image:Fc_mobil3.png]]<br /> <br /> &quot;Friend Carpet&quot; habe ich einigen Leuten vorgeführt und die meisten fanden die Idee cool und haben einige Zeit mit dem erkunden des Carpets verbracht.Ich denke mit vielleicht noch ein paar mehr Features könnte man es so ins Netz stellen. Nur leider wäre das dass Problem mit den Nutzungsbedingungen der Betreiber der sozialen Netzwerke, die i.d.R. verbieten nämlich die automatische Durchsuchung ihrer Seiten. Manche bieten zwar APIs an, aber man ist dann gezwungen deren Interfaces zu benutzen, die nicht unbedingt das tun was man möchte. Einzige Möglichkeit wäre eine Art Lizenz für diese Art der Nutzung zu bekommen, ich fürchte aber so etwas wird sehr teuer oder garnicht erst angeboten. Was mich noch gestört hat, ist dass man an der Uni zwar relativ einfach PHP-Unterstützung bekommt, aber keine speziellen Apache-Module oder Apache-Versionen. So musste ich das Projekt privat hosten, was schade ist, weil ich es gerne als Anregung präsentiert hätte.<br /> <br /> ===Anhang: Crawling Magic===<br /> Für interessierte hier einmal wie ich StudiVZ crawle.<br /> Facebook funktioniert ziemlich analog, davon findet man auch genug wenn man mal danach googelt. Bei Facebook crawle ich übrigens die Mobile-Version, weil ich kein Javascript unterstützen kann. Es gibt zwar eine Art &quot;noscript-Flag&quot; als GET-Request, nur das funktioniert nicht mehr allzu gut. <br /> Außerdem ist die Mobile Seite wesentlich schneller abzufragen.<br /> <br /> <br /> &lt;source lang=&quot;php&quot; &gt;<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'https://secure.studivz.net/Login');<br /> curl_setopt($ch, CURLOPT_POSTFIELDS,'email='.urlencode($login_email).'&amp;password='.urlencode($login_pass).'&amp;ipRestriction=1&amp;login=Einloggen&amp;jsEnabled=true&amp;formkey=156b5e49efad4132cbe29d20939778376b0a44edc7d74fac47862a82338411a65dc24b586321a542bf7f95592a0371913275f9ceb9708e99bff5c0192f70bfaeccd6cd59c304bda62e9cd2a835ff7786a5ac330bc6a74baa9a177ce9ee6f2cad&amp;iv=8419a4452f139ba570dd856be3b1c522');<br /> curl_setopt($ch, CURLOPT_POST, 1);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> $html = curl_exec($ch);<br /> $err = 0;<br /> $err = curl_errno($ch); <br /> curl_close($ch);<br /> <br /> if ($err == 0){<br /> sleep(2); <br /> //Get Friend Link<br /> $dom = new DOMDocument();<br /> @$dom-&gt;loadHTML($html);<br /> $xpath = new DOMXPath($dom);<br /> $links = $xpath-&gt;query(&quot;/html/body//a[@title='Meine Freunde']&quot;);<br /> <br /> if(($links-&gt;length) &gt; 0) { <br /> $hash = $links-&gt;item(0)-&gt;getAttribute(&quot;href&quot;);<br /> preg_match(&quot;/\/Friends\/All\/(.*)\/tid\/103/&quot;, $hash, $matches);<br /> $hash = $matches[1]; <br /> <br /> $logout = $xpath-&gt;query(&quot;//a[text()='Raus hier']&quot;);<br /> <br /> <br /> //get Friends<br /> for ($j = 1; $j &lt; $limit; $j++) {<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'http://www.studivz.net/Friends/All/'.$hash.'/p/'.$j);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> $html = curl_exec($ch);<br /> <br /> curl_close($ch);<br /> //create DOM object<br /> $dom = new DOMDocument();<br /> @$dom-&gt;loadHTML($html);<br /> //use xpath to find stuff<br /> $xpath = new DOMXPath($dom);<br /> $imgs = $xpath-&gt;query(&quot;/html/body//img&quot;);<br /> //create img tags<br /> for ($i = 0; $i &lt; $imgs-&gt;length; $i++) {<br /> $img = $imgs-&gt;item($i);<br /> $img_str = &quot;&lt;img src='../phpthumb/phpThumb.php?src=&quot;.substr_replace($img-&gt;getAttribute(&quot;src&quot;), &quot;.jpg&quot;, -6).&quot;&amp;w=170&amp;h=170&amp;zc=1' &quot;;<br /> if(strpos($img_str,&quot;imagevz.net&quot;)){<br /> $name = $img-&gt;getAttribute(&quot;alt&quot;);<br /> $profileLink = $img-&gt;parentNode-&gt;getAttribute(&quot;href&quot;);<br /> <br /> echo &quot;&lt;div class='friend'&gt;&lt;a href='http://www.studivz.net&quot;.$profileLink.&quot;' target=”_blank”&gt;<br /> &quot;.$img_str.&quot;alt='&quot;.$name.&quot;'&gt;&lt;/a&gt;<br /> &lt;div class='friend_txt'&gt; <br /> &lt;p&gt;&quot;.$name.&quot;&lt;br&gt;StudiVZ&lt;br&gt;&quot;.$login_email.&quot;&lt;/p&gt; <br /> &lt;/div&gt; <br /> &lt;/div&gt;&quot;;<br /> }<br /> }<br /> }<br /> <br /> if(($logout-&gt;length) &gt; 0){ <br /> $logout = $logout-&gt;item(0)-&gt;getAttribute(&quot;href&quot;);<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'http://www.studivz.net'.$logout);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/fb_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/fb_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> curl_exec($ch);<br /> curl_close($ch);<br /> }<br /> }<br /> else{<br /> //if no links found<br /> echo &quot;&lt;p&gt;Could not find any friends for &quot;.$login_email.&quot;, maybe wrong password or email!&lt;p&gt;&quot;;<br /> }<br /> }<br /> &lt;/source&gt;<br /> <br /> Das Ausloggen am Ende ist sehr wichtig, andernfalls kann es dazu führen dass bei schnellen wiederholten Anfragen StudiVZ einem Captchas wesentlich schneller aufzwingt und man dadurch nicht richtig angemeldet wird.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=File:Fc_mobil2.png&diff=26262 2011-04-17T13:09:01Z

<p>Azzaroff: FC auf dem Defy login</p> <hr /> <div>== Summary ==<br /> FC auf dem Defy login<br /> == Copyright status: ==<br /> <br /> == Licensing ==<br /> {{self|c}}<br /> == Source: ==</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:WebApps/Felix_Trojan&diff=26261 2011-04-17T12:42:21Z

<p>Azzaroff: /* Anhang: Crawling Magic */</p> <hr /> <div>==Friend Carpet==<br /> <br /> [[Image:Fc_logo.png]]<br /> <br /> ==Idee und Motivation==<br /> Social Networks erfreuen sich immer größerer Beliebtheit. Je nach Region,<br /> Hobbies, Popularität, Beruf oder Karriere kann man das für sich passende Netzwerk auswählen. Dabei komm es häufig vor, dass Freunde oder Bekannte andere Netzwerke bevorzugen als man selbst, was oft dazu führt das man in mehreren Social Networks anmeldet und nicht überall die selben Freunde hat.<br /> Bei der Webanwendung &quot;Friend Carpet&quot; geht es zum einen darum eine Brücke zwischen diesen verschiedenen Netzwerken zu schlagen, indem ein virtueller Teppich dessen Flicken Bilder von Freunden aus Netzwerken verschiedener Accounts bestehen.<br /> Zum anderen geht es um eine andere Art seine Freundeskreis zu betrachten und spielerisch zu entdecken.<br /> <br /> ==Aufbau==<br /> <br /> Der Grundlegende Ablauf:<br /> #Login Daten für 1-n Accounts in 1-m Netzwerken abfragen<br /> ##es können sich auch mehrere Accounts im selben Netzwerk befinden<br /> #einen Account auswählen und dessen Freunde crawlen<br /> #für jeden ermittelten Freund Profil-Link und Profilbild URL extrahieren<br /> ##eventuell Qualität der Bilder anpassen<br /> #Div-Container mit Bild,Link und sonstigen Informationen generieren und ausgeben <br /> #1-4 solange wiederholen bis alle Accounts abgearbeitet sind<br /> <br /> ===Technologien===<br /> *HTML4.1<br /> *PHP (crawlen der Netzwerke und generieren des Teppichs)<br /> *JavaScript (auf Usereingaben zu reagieren)<br /> *Lampp (Apache Webserver mit PHP)<br /> *phpThumb (PHP Library zur Bildmanipulation)<br /> *cURL Unterstützung für PHP(umfangreiche HTTP Anfragen zum crawlen + CookieJar)<br /> <br /> ===Login===<br /> <br /> [[Image:Fc_login_form.png]]<br /> <br /> Der Nutzer wird begrüßt mit dem &quot;Friend Carpet&quot;-Logo und einer Login Box.<br /> Dort kann er für ein bestimmtes Netzwerk(im momment Facebook oder StudiVZ) seine<br /> Login-Daten eingeben und per &quot;add&quot;-Button in eine Liste einfügen. Dies kann beliebig oft wiederholt werden um mehrere Accounts und Netzwerke in die Erstellung des Teppichs einfließen zu lassen. Ist der Nutzer zufrieden mit <br /> der Zusammenstellung kann er mit &quot;Create Carpet&quot; seinen persöhnlich Teppich erstellen lassen.<br /> <br /> ===Carpet und Interaktion===<br /> <br /> [[Image:Fc_carpet.png|600px|]]<br /> <br /> Der Nutzer kann den direkten Aufbau des Carpets(je nach Internetverbindung nun miterleben). Sollten die Login-Daten nicht korrekt sein, wird der Nutzer darauf hingewiesen, sind in der Liste aber korrekte Daten neben inkorrekten enthalten werden die korrekten trotzdem verarbeitet und angezeigt. Nach dem Aufbau stehen dem Nutzer einige Interaktionsmöglichkeiten zur Verfügung. Bei einem Mouseover über ein Profilbild erhält er zusätzliche Information zur Person(Name, Netzwerk, Account unter dem er gefunden wurde). Bei einen Klick auf ein Pofilbild wird die entsprechende Profilseite des zugehörigen Netzwerkes in einer neuen Browserseite bzw. Tab aufgerufen. Weiterhin ist es möglich die Größe der Profilbilder zu ändern. Die Profilbilder werden auf ein bestimmtes Format &quot;zugeschnitten&quot;, was manchmal dazu führt, dass man nicht das komplette Bild sieht, deshalb gibt es die Option das originale Bildverhältnis für alle Bilder anzuzeigen. Weiterhin gibt es ein Suchfeld, welches die Bilder während der Eingabe filtern kann. Der Teppich reduziert sich auf die Profilnamen die Teile der Eingabe enthalten.<br /> <br /> ===Friend Carptet auf mobilen Geräten===<br /> <br /> Auf mobilen Geräten läuft &quot;Friend Carpet&quot; ohne Probleme. Getestet wurde mit<br /> einem Motorola Defy(Display 480x854) und mit dem Emulator aus dem Android SDK.<br /> CSS wurde mit '''''@media only screen and (max-device-width: 480px)''''' angepasst. Das Login-Feld sowie der Carpet selbst werden auf komplette Breite des mobilen Geräts angeglichen. Das Einzige was nicht funktioniert ist die Anzeige der Infobox bei einem Mouseover.<br /> <br /> ===Erfahrungen und Fazit===<br /> <br /> &quot;Friend Carpet&quot; habe ich einigen Leuten vorgeführt und die meisten fanden die Idee cool und haben einige Zeit mit dem erkunden des Carpets verbracht.Ich denke mit vielleicht noch ein paar mehr Features könnte man es so ins Netz stellen. Nur leider wäre das dass Problem mit den Nutzungsbedingungen der Betreiber der sozialen Netzwerke, die i.d.R. verbieten nämlich die automatische Durchsuchung ihrer Seiten. Manche bieten zwar APIs an, aber man ist dann gezwungen deren Interfaces zu benutzen, die nicht unbedingt das tun was man möchte. Einzige Möglichkeit wäre eine Art Lizenz für diese Art der Nutzung zu bekommen, ich fürchte aber so etwas wird sehr teuer oder garnicht erst angeboten. Was mich noch gestört hat, ist dass man an der Uni zwar relativ einfach PHP-Unterstützung bekommt, aber keine speziellen Apache-Module oder Apache-Versionen. So musste ich das Projekt privat hosten, was schade ist, weil ich es gerne als Anregung präsentiert hätte.<br /> <br /> ===Anhang: Crawling Magic===<br /> Für interessierte hier einmal wie ich StudiVZ crawle.<br /> Facebook funktioniert ziemlich analog, davon findet man auch genug wenn man mal danach googelt. Bei Facebook crawle ich übrigens die Mobile-Version, weil ich kein Javascript unterstützen kann. Es gibt zwar eine Art &quot;noscript-Flag&quot; als GET-Request, nur das funktioniert nicht mehr allzu gut. <br /> Außerdem ist die Mobile Seite wesentlich schneller abzufragen.<br /> <br /> <br /> &lt;source lang=&quot;php&quot; &gt;<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'https://secure.studivz.net/Login');<br /> curl_setopt($ch, CURLOPT_POSTFIELDS,'email='.urlencode($login_email).'&amp;password='.urlencode($login_pass).'&amp;ipRestriction=1&amp;login=Einloggen&amp;jsEnabled=true&amp;formkey=156b5e49efad4132cbe29d20939778376b0a44edc7d74fac47862a82338411a65dc24b586321a542bf7f95592a0371913275f9ceb9708e99bff5c0192f70bfaeccd6cd59c304bda62e9cd2a835ff7786a5ac330bc6a74baa9a177ce9ee6f2cad&amp;iv=8419a4452f139ba570dd856be3b1c522');<br /> curl_setopt($ch, CURLOPT_POST, 1);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> $html = curl_exec($ch);<br /> $err = 0;<br /> $err = curl_errno($ch); <br /> curl_close($ch);<br /> <br /> if ($err == 0){<br /> sleep(2); <br /> //Get Friend Link<br /> $dom = new DOMDocument();<br /> @$dom-&gt;loadHTML($html);<br /> $xpath = new DOMXPath($dom);<br /> $links = $xpath-&gt;query(&quot;/html/body//a[@title='Meine Freunde']&quot;);<br /> <br /> if(($links-&gt;length) &gt; 0) { <br /> $hash = $links-&gt;item(0)-&gt;getAttribute(&quot;href&quot;);<br /> preg_match(&quot;/\/Friends\/All\/(.*)\/tid\/103/&quot;, $hash, $matches);<br /> $hash = $matches[1]; <br /> <br /> $logout = $xpath-&gt;query(&quot;//a[text()='Raus hier']&quot;);<br /> <br /> <br /> //get Friends<br /> for ($j = 1; $j &lt; $limit; $j++) {<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'http://www.studivz.net/Friends/All/'.$hash.'/p/'.$j);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> $html = curl_exec($ch);<br /> <br /> curl_close($ch);<br /> //create DOM object<br /> $dom = new DOMDocument();<br /> @$dom-&gt;loadHTML($html);<br /> //use xpath to find stuff<br /> $xpath = new DOMXPath($dom);<br /> $imgs = $xpath-&gt;query(&quot;/html/body//img&quot;);<br /> //create img tags<br /> for ($i = 0; $i &lt; $imgs-&gt;length; $i++) {<br /> $img = $imgs-&gt;item($i);<br /> $img_str = &quot;&lt;img src='../phpthumb/phpThumb.php?src=&quot;.substr_replace($img-&gt;getAttribute(&quot;src&quot;), &quot;.jpg&quot;, -6).&quot;&amp;w=170&amp;h=170&amp;zc=1' &quot;;<br /> if(strpos($img_str,&quot;imagevz.net&quot;)){<br /> $name = $img-&gt;getAttribute(&quot;alt&quot;);<br /> $profileLink = $img-&gt;parentNode-&gt;getAttribute(&quot;href&quot;);<br /> <br /> echo &quot;&lt;div class='friend'&gt;&lt;a href='http://www.studivz.net&quot;.$profileLink.&quot;' target=”_blank”&gt;<br /> &quot;.$img_str.&quot;alt='&quot;.$name.&quot;'&gt;&lt;/a&gt;<br /> &lt;div class='friend_txt'&gt; <br /> &lt;p&gt;&quot;.$name.&quot;&lt;br&gt;StudiVZ&lt;br&gt;&quot;.$login_email.&quot;&lt;/p&gt; <br /> &lt;/div&gt; <br /> &lt;/div&gt;&quot;;<br /> }<br /> }<br /> }<br /> <br /> if(($logout-&gt;length) &gt; 0){ <br /> $logout = $logout-&gt;item(0)-&gt;getAttribute(&quot;href&quot;);<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'http://www.studivz.net'.$logout);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/fb_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/fb_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> curl_exec($ch);<br /> curl_close($ch);<br /> }<br /> }<br /> else{<br /> //if no links found<br /> echo &quot;&lt;p&gt;Could not find any friends for &quot;.$login_email.&quot;, maybe wrong password or email!&lt;p&gt;&quot;;<br /> }<br /> }<br /> &lt;/source&gt;<br /> <br /> Das Ausloggen am Ende ist sehr wichtig, andernfalls kann es dazu führen dass bei schnellen wiederholten Anfragen StudiVZ einem Captchas wesentlich schneller aufzwingt und man dadurch nicht richtig angemeldet wird.</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:WebApps/Felix_Trojan&diff=26260 2011-04-17T12:40:07Z

<p>Azzaroff: /* Anhang: Crawling Magic */</p> <hr /> <div>==Friend Carpet==<br /> <br /> [[Image:Fc_logo.png]]<br /> <br /> ==Idee und Motivation==<br /> Social Networks erfreuen sich immer größerer Beliebtheit. Je nach Region,<br /> Hobbies, Popularität, Beruf oder Karriere kann man das für sich passende Netzwerk auswählen. Dabei komm es häufig vor, dass Freunde oder Bekannte andere Netzwerke bevorzugen als man selbst, was oft dazu führt das man in mehreren Social Networks anmeldet und nicht überall die selben Freunde hat.<br /> Bei der Webanwendung &quot;Friend Carpet&quot; geht es zum einen darum eine Brücke zwischen diesen verschiedenen Netzwerken zu schlagen, indem ein virtueller Teppich dessen Flicken Bilder von Freunden aus Netzwerken verschiedener Accounts bestehen.<br /> Zum anderen geht es um eine andere Art seine Freundeskreis zu betrachten und spielerisch zu entdecken.<br /> <br /> ==Aufbau==<br /> <br /> Der Grundlegende Ablauf:<br /> #Login Daten für 1-n Accounts in 1-m Netzwerken abfragen<br /> ##es können sich auch mehrere Accounts im selben Netzwerk befinden<br /> #einen Account auswählen und dessen Freunde crawlen<br /> #für jeden ermittelten Freund Profil-Link und Profilbild URL extrahieren<br /> ##eventuell Qualität der Bilder anpassen<br /> #Div-Container mit Bild,Link und sonstigen Informationen generieren und ausgeben <br /> #1-4 solange wiederholen bis alle Accounts abgearbeitet sind<br /> <br /> ===Technologien===<br /> *HTML4.1<br /> *PHP (crawlen der Netzwerke und generieren des Teppichs)<br /> *JavaScript (auf Usereingaben zu reagieren)<br /> *Lampp (Apache Webserver mit PHP)<br /> *phpThumb (PHP Library zur Bildmanipulation)<br /> *cURL Unterstützung für PHP(umfangreiche HTTP Anfragen zum crawlen + CookieJar)<br /> <br /> ===Login===<br /> <br /> [[Image:Fc_login_form.png]]<br /> <br /> Der Nutzer wird begrüßt mit dem &quot;Friend Carpet&quot;-Logo und einer Login Box.<br /> Dort kann er für ein bestimmtes Netzwerk(im momment Facebook oder StudiVZ) seine<br /> Login-Daten eingeben und per &quot;add&quot;-Button in eine Liste einfügen. Dies kann beliebig oft wiederholt werden um mehrere Accounts und Netzwerke in die Erstellung des Teppichs einfließen zu lassen. Ist der Nutzer zufrieden mit <br /> der Zusammenstellung kann er mit &quot;Create Carpet&quot; seinen persöhnlich Teppich erstellen lassen.<br /> <br /> ===Carpet und Interaktion===<br /> <br /> [[Image:Fc_carpet.png|600px|]]<br /> <br /> Der Nutzer kann den direkten Aufbau des Carpets(je nach Internetverbindung nun miterleben). Sollten die Login-Daten nicht korrekt sein, wird der Nutzer darauf hingewiesen, sind in der Liste aber korrekte Daten neben inkorrekten enthalten werden die korrekten trotzdem verarbeitet und angezeigt. Nach dem Aufbau stehen dem Nutzer einige Interaktionsmöglichkeiten zur Verfügung. Bei einem Mouseover über ein Profilbild erhält er zusätzliche Information zur Person(Name, Netzwerk, Account unter dem er gefunden wurde). Bei einen Klick auf ein Pofilbild wird die entsprechende Profilseite des zugehörigen Netzwerkes in einer neuen Browserseite bzw. Tab aufgerufen. Weiterhin ist es möglich die Größe der Profilbilder zu ändern. Die Profilbilder werden auf ein bestimmtes Format &quot;zugeschnitten&quot;, was manchmal dazu führt, dass man nicht das komplette Bild sieht, deshalb gibt es die Option das originale Bildverhältnis für alle Bilder anzuzeigen. Weiterhin gibt es ein Suchfeld, welches die Bilder während der Eingabe filtern kann. Der Teppich reduziert sich auf die Profilnamen die Teile der Eingabe enthalten.<br /> <br /> ===Friend Carptet auf mobilen Geräten===<br /> <br /> Auf mobilen Geräten läuft &quot;Friend Carpet&quot; ohne Probleme. Getestet wurde mit<br /> einem Motorola Defy(Display 480x854) und mit dem Emulator aus dem Android SDK.<br /> CSS wurde mit '''''@media only screen and (max-device-width: 480px)''''' angepasst. Das Login-Feld sowie der Carpet selbst werden auf komplette Breite des mobilen Geräts angeglichen. Das Einzige was nicht funktioniert ist die Anzeige der Infobox bei einem Mouseover.<br /> <br /> ===Erfahrungen und Fazit===<br /> <br /> &quot;Friend Carpet&quot; habe ich einigen Leuten vorgeführt und die meisten fanden die Idee cool und haben einige Zeit mit dem erkunden des Carpets verbracht.Ich denke mit vielleicht noch ein paar mehr Features könnte man es so ins Netz stellen. Nur leider wäre das dass Problem mit den Nutzungsbedingungen der Betreiber der sozialen Netzwerke, die i.d.R. verbieten nämlich die automatische Durchsuchung ihrer Seiten. Manche bieten zwar APIs an, aber man ist dann gezwungen deren Interfaces zu benutzen, die nicht unbedingt das tun was man möchte. Einzige Möglichkeit wäre eine Art Lizenz für diese Art der Nutzung zu bekommen, ich fürchte aber so etwas wird sehr teuer oder garnicht erst angeboten. Was mich noch gestört hat, ist dass man an der Uni zwar relativ einfach PHP-Unterstützung bekommt, aber keine speziellen Apache-Module oder Apache-Versionen. So musste ich das Projekt privat hosten, was schade ist, weil ich es gerne als Anregung präsentiert hätte.<br /> <br /> ===Anhang: Crawling Magic===<br /> Für interessierte hier einmal wie ich StudiVZ crawle.<br /> Facebook funktioniert ziemlich analog, davon findet man auch genug wenn man mal danach googelt. Bei Facebook crawle ich übrigens die Mobile-Version, weil ich kein Javascript unterstützen kann. Es gibt zwar eine Art &quot;noscript-Flag&quot; als GET-Request, nur das funktioniert nicht mehr allzu gut. <br /> Außerdem ist die Mobile Seite wesentlich schneller abzufragen.<br /> <br /> <br /> &lt;source lang=&quot;php&quot; &gt;<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'https://secure.studivz.net/Login');<br /> curl_setopt($ch, CURLOPT_POSTFIELDS,'email='.urlencode($login_email).'&amp;password='.urlencode($login_pass).'&amp;ipRestriction=1&amp;login=Einloggen&amp;jsEnabled=true&amp;formkey=156b5e49efad4132cbe29d20939778376b0a44edc7d74fac47862a82338411a65dc24b586321a542bf7f95592a0371913275f9ceb9708e99bff5c0192f70bfaeccd6cd59c304bda62e9cd2a835ff7786a5ac330bc6a74baa9a177ce9ee6f2cad&amp;iv=8419a4452f139ba570dd856be3b1c522');<br /> curl_setopt($ch, CURLOPT_POST, 1);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> $html = curl_exec($ch);<br /> $err = 0;<br /> $err = curl_errno($ch); <br /> curl_close($ch);<br /> <br /> if ($err == 0){<br /> sleep(2); <br /> //Get Friend Link<br /> $dom = new DOMDocument();<br /> @$dom-&gt;loadHTML($html);<br /> $xpath = new DOMXPath($dom);<br /> $links = $xpath-&gt;query(&quot;/html/body//a[@title='Meine Freunde']&quot;);<br /> <br /> if(($links-&gt;length) &gt; 0) { <br /> $hash = $links-&gt;item(0)-&gt;getAttribute(&quot;href&quot;);<br /> preg_match(&quot;/\/Friends\/All\/(.*)\/tid\/103/&quot;, $hash, $matches);<br /> $hash = $matches[1]; <br /> <br /> $logout = $xpath-&gt;query(&quot;//a[text()='Raus hier']&quot;);<br /> <br /> <br /> //get Friends<br /> for ($j = 1; $j &lt; $limit; $j++) {<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'http://www.studivz.net/Friends/All/'.$hash.'/p/'.$j);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> $html = curl_exec($ch);<br /> <br /> curl_close($ch);<br /> //create DOM object<br /> $dom = new DOMDocument();<br /> @$dom-&gt;loadHTML($html);<br /> //use xpath to find stuff<br /> $xpath = new DOMXPath($dom);<br /> $imgs = $xpath-&gt;query(&quot;/html/body//img&quot;);<br /> //create img tags<br /> for ($i = 0; $i &lt; $imgs-&gt;length; $i++) {<br /> $img = $imgs-&gt;item($i);<br /> $img_str = &quot;&lt;img src='../phpthumb/phpThumb.php?src=&quot;.substr_replace($img-&gt;getAttribute(&quot;src&quot;), &quot;.jpg&quot;, -6).&quot;&amp;w=170&amp;h=170&amp;zc=1' &quot;;<br /> if(strpos($img_str,&quot;imagevz.net&quot;)){<br /> $name = $img-&gt;getAttribute(&quot;alt&quot;);<br /> $profileLink = $img-&gt;parentNode-&gt;getAttribute(&quot;href&quot;);<br /> <br /> echo &quot;&lt;div class='friend'&gt;&lt;a href='http://www.studivz.net&quot;.$profileLink.&quot;' target=”_blank”&gt;<br /> &quot;.$img_str.&quot;alt='&quot;.$name.&quot;'&gt;&lt;/a&gt;<br /> &lt;div class='friend_txt'&gt; <br /> &lt;p&gt;&quot;.$name.&quot;&lt;br&gt;StudiVZ&lt;br&gt;&quot;.$login_email.&quot;&lt;/p&gt; <br /> &lt;/div&gt; <br /> &lt;/div&gt;&quot;;<br /> }<br /> }<br /> }<br /> <br /> if(($logout-&gt;length) &gt; 0){ <br /> $logout = $logout-&gt;item(0)-&gt;getAttribute(&quot;href&quot;);<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'http://www.studivz.net'.$logout);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/fb_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/fb_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> curl_exec($ch);<br /> curl_close($ch);<br /> }<br /> }<br /> else{<br /> //if no links found<br /> echo &quot;&lt;p&gt;Could not find any friends for &quot;.$login_email.&quot;, maybe wrong password or email!&lt;p&gt;&quot;;<br /> }<br /> }<br /> &lt;/source&gt;</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:WebApps/Felix_Trojan&diff=26259 2011-04-17T12:39:03Z

<p>Azzaroff: /* Anhang: Crawling Magic */</p> <hr /> <div>==Friend Carpet==<br /> <br /> [[Image:Fc_logo.png]]<br /> <br /> ==Idee und Motivation==<br /> Social Networks erfreuen sich immer größerer Beliebtheit. Je nach Region,<br /> Hobbies, Popularität, Beruf oder Karriere kann man das für sich passende Netzwerk auswählen. Dabei komm es häufig vor, dass Freunde oder Bekannte andere Netzwerke bevorzugen als man selbst, was oft dazu führt das man in mehreren Social Networks anmeldet und nicht überall die selben Freunde hat.<br /> Bei der Webanwendung &quot;Friend Carpet&quot; geht es zum einen darum eine Brücke zwischen diesen verschiedenen Netzwerken zu schlagen, indem ein virtueller Teppich dessen Flicken Bilder von Freunden aus Netzwerken verschiedener Accounts bestehen.<br /> Zum anderen geht es um eine andere Art seine Freundeskreis zu betrachten und spielerisch zu entdecken.<br /> <br /> ==Aufbau==<br /> <br /> Der Grundlegende Ablauf:<br /> #Login Daten für 1-n Accounts in 1-m Netzwerken abfragen<br /> ##es können sich auch mehrere Accounts im selben Netzwerk befinden<br /> #einen Account auswählen und dessen Freunde crawlen<br /> #für jeden ermittelten Freund Profil-Link und Profilbild URL extrahieren<br /> ##eventuell Qualität der Bilder anpassen<br /> #Div-Container mit Bild,Link und sonstigen Informationen generieren und ausgeben <br /> #1-4 solange wiederholen bis alle Accounts abgearbeitet sind<br /> <br /> ===Technologien===<br /> *HTML4.1<br /> *PHP (crawlen der Netzwerke und generieren des Teppichs)<br /> *JavaScript (auf Usereingaben zu reagieren)<br /> *Lampp (Apache Webserver mit PHP)<br /> *phpThumb (PHP Library zur Bildmanipulation)<br /> *cURL Unterstützung für PHP(umfangreiche HTTP Anfragen zum crawlen + CookieJar)<br /> <br /> ===Login===<br /> <br /> [[Image:Fc_login_form.png]]<br /> <br /> Der Nutzer wird begrüßt mit dem &quot;Friend Carpet&quot;-Logo und einer Login Box.<br /> Dort kann er für ein bestimmtes Netzwerk(im momment Facebook oder StudiVZ) seine<br /> Login-Daten eingeben und per &quot;add&quot;-Button in eine Liste einfügen. Dies kann beliebig oft wiederholt werden um mehrere Accounts und Netzwerke in die Erstellung des Teppichs einfließen zu lassen. Ist der Nutzer zufrieden mit <br /> der Zusammenstellung kann er mit &quot;Create Carpet&quot; seinen persöhnlich Teppich erstellen lassen.<br /> <br /> ===Carpet und Interaktion===<br /> <br /> [[Image:Fc_carpet.png|600px|]]<br /> <br /> Der Nutzer kann den direkten Aufbau des Carpets(je nach Internetverbindung nun miterleben). Sollten die Login-Daten nicht korrekt sein, wird der Nutzer darauf hingewiesen, sind in der Liste aber korrekte Daten neben inkorrekten enthalten werden die korrekten trotzdem verarbeitet und angezeigt. Nach dem Aufbau stehen dem Nutzer einige Interaktionsmöglichkeiten zur Verfügung. Bei einem Mouseover über ein Profilbild erhält er zusätzliche Information zur Person(Name, Netzwerk, Account unter dem er gefunden wurde). Bei einen Klick auf ein Pofilbild wird die entsprechende Profilseite des zugehörigen Netzwerkes in einer neuen Browserseite bzw. Tab aufgerufen. Weiterhin ist es möglich die Größe der Profilbilder zu ändern. Die Profilbilder werden auf ein bestimmtes Format &quot;zugeschnitten&quot;, was manchmal dazu führt, dass man nicht das komplette Bild sieht, deshalb gibt es die Option das originale Bildverhältnis für alle Bilder anzuzeigen. Weiterhin gibt es ein Suchfeld, welches die Bilder während der Eingabe filtern kann. Der Teppich reduziert sich auf die Profilnamen die Teile der Eingabe enthalten.<br /> <br /> ===Friend Carptet auf mobilen Geräten===<br /> <br /> Auf mobilen Geräten läuft &quot;Friend Carpet&quot; ohne Probleme. Getestet wurde mit<br /> einem Motorola Defy(Display 480x854) und mit dem Emulator aus dem Android SDK.<br /> CSS wurde mit '''''@media only screen and (max-device-width: 480px)''''' angepasst. Das Login-Feld sowie der Carpet selbst werden auf komplette Breite des mobilen Geräts angeglichen. Das Einzige was nicht funktioniert ist die Anzeige der Infobox bei einem Mouseover.<br /> <br /> ===Erfahrungen und Fazit===<br /> <br /> &quot;Friend Carpet&quot; habe ich einigen Leuten vorgeführt und die meisten fanden die Idee cool und haben einige Zeit mit dem erkunden des Carpets verbracht.Ich denke mit vielleicht noch ein paar mehr Features könnte man es so ins Netz stellen. Nur leider wäre das dass Problem mit den Nutzungsbedingungen der Betreiber der sozialen Netzwerke, die i.d.R. verbieten nämlich die automatische Durchsuchung ihrer Seiten. Manche bieten zwar APIs an, aber man ist dann gezwungen deren Interfaces zu benutzen, die nicht unbedingt das tun was man möchte. Einzige Möglichkeit wäre eine Art Lizenz für diese Art der Nutzung zu bekommen, ich fürchte aber so etwas wird sehr teuer oder garnicht erst angeboten. Was mich noch gestört hat, ist dass man an der Uni zwar relativ einfach PHP-Unterstützung bekommt, aber keine speziellen Apache-Module oder Apache-Versionen. So musste ich das Projekt privat hosten, was schade ist, weil ich es gerne als Anregung präsentiert hätte.<br /> <br /> ===Anhang: Crawling Magic===<br /> Für interessierte hier einmal wie ich StudiVZ crawle.<br /> Facebook funktioniert ziemlich analog, davon findet man auch genug wenn man mal danach googelt. Bei Facebook crawle ich übrigens die Mobile-Version, weil ich kein Javascript unterstützen kann. Es gibt zwar eine Art &quot;noscript-Flag&quot; als GET-Request, nur das funktioniert nicht mehr allzu gut. <br /> Außerdem ist die Mobile Seite wesentlich schneller abzufragen.<br /> <br /> <br /> &lt;source lang=&quot;php&quot; &gt;<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'https://secure.studivz.net/Login');<br /> curl_setopt($ch, CURLOPT_POSTFIELDS,'email='.urlencode($login_email).'&amp;password='.urlencode($login_pass).'&amp;ipRestriction=1&amp;login=Einloggen&amp;jsEnabled=true&amp;formkey=156b5e49efad4132cbe29d20939778376b0a44edc7d74fac47862a82338411a65dc24b586321a542bf7f95592a0371913275f9ceb9708e99bff5c0192f70bfaeccd6cd59c304bda62e9cd2a835ff7786a5ac330bc6a74baa9a177ce9ee6f2cad&amp;iv=8419a4452f139ba570dd856be3b1c522');<br /> curl_setopt($ch, CURLOPT_POST, 1);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> $html = curl_exec($ch);<br /> $err = 0;<br /> $err = curl_errno($ch); <br /> curl_close($ch);<br /> <br /> if ($err == 0){<br /> sleep(2); <br /> //Get Friend Link<br /> $dom = new DOMDocument();<br /> @$dom-&gt;loadHTML($html);<br /> $xpath = new DOMXPath($dom);<br /> $links = $xpath-&gt;query(&quot;/html/body//a[@title='Meine Freunde']&quot;);<br /> <br /> if(($links-&gt;length) &gt; 0) { <br /> $hash = $links-&gt;item(0)-&gt;getAttribute(&quot;href&quot;);<br /> preg_match(&quot;/\/Friends\/All\/(.*)\/tid\/103/&quot;, $hash, $matches);<br /> $hash = $matches[1]; <br /> <br /> $logout = $xpath-&gt;query(&quot;//a[text()='Raus hier']&quot;);<br /> <br /> <br /> //get Friends<br /> for ($j = 1; $j &lt; $limit; $j++) {<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'http://www.studivz.net/Friends/All/'.$hash.'/p/'.$j);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/sv_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> $html = curl_exec($ch);<br /> <br /> curl_close($ch);<br /> //create DOM object<br /> $dom = new DOMDocument();<br /> @$dom-&gt;loadHTML($html);<br /> //use xpath to find stuff<br /> $xpath = new DOMXPath($dom);<br /> $imgs = $xpath-&gt;query(&quot;/html/body//img&quot;);<br /> //$title = $dom-&gt;getElementsByTagName('title');<br /> //$title = $title-&gt;item(0)-&gt;nodeValue;<br /> //create img tags<br /> for ($i = 0; $i &lt; $imgs-&gt;length; $i++) {<br /> $img = $imgs-&gt;item($i);<br /> $img_str = &quot;&lt;img src='../phpthumb/phpThumb.php?src=&quot;.substr_replace($img-&gt;getAttribute(&quot;src&quot;), &quot;.jpg&quot;, -6).&quot;&amp;w=170&amp;h=170&amp;zc=1' &quot;;<br /> if(strpos($img_str,&quot;imagevz.net&quot;)){<br /> $name = $img-&gt;getAttribute(&quot;alt&quot;);<br /> $profileLink = $img-&gt;parentNode-&gt;getAttribute(&quot;href&quot;);<br /> <br /> echo &quot;&lt;div class='friend'&gt;&lt;a href='http://www.studivz.net&quot;.$profileLink.&quot;' target=”_blank”&gt;<br /> &quot;.$img_str.&quot;alt='&quot;.$name.&quot;'&gt;&lt;/a&gt;<br /> &lt;div class='friend_txt'&gt; <br /> &lt;p&gt;&quot;.$name.&quot;&lt;br&gt;StudiVZ&lt;br&gt;&quot;.$login_email.&quot;&lt;/p&gt; <br /> &lt;/div&gt; <br /> &lt;/div&gt;&quot;;<br /> }<br /> }<br /> }<br /> <br /> if(($logout-&gt;length) &gt; 0){ <br /> $logout = $logout-&gt;item(0)-&gt;getAttribute(&quot;href&quot;);<br /> $ch = curl_init();<br /> curl_setopt($ch, CURLOPT_URL, 'http://www.studivz.net'.$logout);<br /> curl_setopt($ch, CURLOPT_HEADER, 0);<br /> curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);<br /> curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);<br /> curl_setopt($ch, CURLOPT_COOKIEFILE, str_replace('\\','/',dirname(__FILE__)).'/fb_cookies.txt');<br /> curl_setopt($ch, CURLOPT_COOKIEJAR, str_replace('\\','/',dirname(__FILE__)).'/fb_cookies.txt');<br /> curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);<br /> curl_setopt($ch, CURLOPT_USERAGENT, &quot;Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)&quot;);<br /> curl_exec($ch);<br /> curl_close($ch);<br /> }<br /> }<br /> else{<br /> //if no links found<br /> echo &quot;&lt;p&gt;Could not find any friends for &quot;.$login_email.&quot;, maybe wrong password or email!&lt;p&gt;&quot;;<br /> }<br /> }<br /> &lt;/source&gt;</div>

Azzaroff https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:WebApps/Felix_Trojan&diff=26258 2011-04-17T12:32:06Z

<p>Azzaroff: /* Anhang: Crawling Magic */</p> <hr /> <div>==Friend Carpet==<br /> <br /> [[Image:Fc_logo.png]]<br /> <br /> ==Idee und Motivation==<br /> Social Networks erfreuen sich immer größerer Beliebtheit. Je nach Region,<br /> Hobbies, Popularität, Beruf oder Karriere kann man das für sich passende Netzwerk auswählen. Dabei komm es häufig vor, dass Freunde oder Bekannte andere Netzwerke bevorzugen als man selbst, was oft dazu führt das man in mehreren Social Networks anmeldet und nicht überall die selben Freunde hat.<br /> Bei der Webanwendung &quot;Friend Carpet&quot; geht es zum einen darum eine Brücke zwischen diesen verschiedenen Netzwerken zu schlagen, indem ein virtueller Teppich dessen Flicken Bilder von Freunden aus Netzwerken verschiedener Accounts bestehen.<br /> Zum anderen geht es um eine andere Art seine Freundeskreis zu betrachten und spielerisch zu entdecken.<br /> <br /> ==Aufbau==<br /> <br /> Der Grundlegende Ablauf:<br /> #Login Daten für 1-n Accounts in 1-m Netzwerken abfragen<br /> ##es können sich auch mehrere Accounts im selben Netzwerk befinden<br /> #einen Account auswählen und dessen Freunde crawlen<br /> #für jeden ermittelten Freund Profil-Link und Profilbild URL extrahieren<br /> ##eventuell Qualität der Bilder anpassen<br /> #Div-Container mit Bild,Link und sonstigen Informationen generieren und ausgeben <br /> #1-4 solange wiederholen bis alle Accounts abgearbeitet sind<br /> <br /> ===Technologien===<br /> *HTML4.1<br /> *PHP (crawlen der Netzwerke und generieren des Teppichs)<br /> *JavaScript (auf Usereingaben zu reagieren)<br /> *Lampp (Apache Webserver mit PHP)<br /> *phpThumb (PHP Library zur Bildmanipulation)<br /> *cURL Unterstützung für PHP(umfangreiche HTTP Anfragen zum crawlen + CookieJar)<br /> <br /> ===Login===<br /> <br /> [[Image:Fc_login_form.png]]<br /> <br /> Der Nutzer wird begrüßt mit dem &quot;Friend Carpet&quot;-Logo und einer Login Box.<br /> Dort kann er für ein bestimmtes Netzwerk(im momment Facebook oder StudiVZ) seine<br /> Login-Daten eingeben und per &quot;add&quot;-Button in eine Liste einfügen. Dies kann beliebig oft wiederholt werden um mehrere Accounts und Netzwerke in die Erstellung des Teppichs einfließen zu lassen. Ist der Nutzer zufrieden mit <br /> der Zusammenstellung kann er mit &quot;Create Carpet&quot; seinen persöhnlich Teppich erstellen lassen.<br /> <br /> ===Carpet und Interaktion===<br /> <br /> [[Image:Fc_carpet.png|600px|]]<br /> <br /> Der Nutzer kann den direkten Aufbau des Carpets(je nach Internetverbindung nun miterleben). Sollten die Login-Daten nicht korrekt sein, wird der Nutzer darauf hingewiesen, sind in der Liste aber korrekte Daten neben inkorrekten enthalten werden die korrekten trotzdem verarbeitet und angezeigt. Nach dem Aufbau stehen dem Nutzer einige Interaktionsmöglichkeiten zur Verfügung. Bei einem Mouseover über ein Profilbild erhält er zusätzliche Information zur Person(Name, Netzwerk, Account unter dem er gefunden wurde). Bei einen Klick auf ein Pofilbild wird die entsprechende Profilseite des zugehörigen Netzwerkes in einer neuen Browserseite bzw. Tab aufgerufen. Weiterhin ist es möglich die Größe der Profilbilder zu ändern. Die Profilbilder werden auf ein bestimmtes Format &quot;zugeschnitten&quot;, was manchmal dazu führt, dass man nicht das komplette Bild sieht, deshalb gibt es die Option das originale Bildverhältnis für alle Bilder anzuzeigen. Weiterhin gibt es ein Suchfeld, welches die Bilder während der Eingabe filtern kann. Der Teppich reduziert sich auf die Profilnamen die Teile der Eingabe enthalten.<br /> <br /> ===Friend Carptet auf mobilen Geräten===<br /> <br /> Auf mobilen Geräten läuft &quot;Friend Carpet&quot; ohne Probleme. Getestet wurde mit<br /> einem Motorola Defy(Display 480x854) und mit dem Emulator aus dem Android SDK.<br /> CSS wurde mit '''''@media only screen and (max-device-width: 480px)''''' angepasst. Das Login-Feld sowie der Carpet selbst werden auf komplette Breite des mobilen Geräts angeglichen. Das Einzige was nicht funktioniert ist die Anzeige der Infobox bei einem Mouseover.<br /> <br /> ===Erfahrungen und Fazit===<br /> <br /> &quot;Friend Carpet&quot; habe ich einigen Leuten vorgeführt und die meisten fanden die Idee cool und haben einige Zeit mit dem erkunden des Carpets verbracht.Ich denke mit vielleicht noch ein paar mehr Features könnte man es so ins Netz stellen. Nur leider wäre das dass Problem mit den Nutzungsbedingungen der Betreiber der sozialen Netzwerke, die i.d.R. verbieten nämlich die automatische Durchsuchung ihrer Seiten. Manche bieten zwar APIs an, aber man ist dann gezwungen deren Interfaces zu benutzen, die nicht unbedingt das tun was man möchte. Einzige Möglichkeit wäre eine Art Lizenz für diese Art der Nutzung zu bekommen, ich fürchte aber so etwas wird sehr teuer oder garnicht erst angeboten. Was mich noch gestört hat, ist dass man an der Uni zwar relativ einfach PHP-Unterstützung bekommt, aber keine speziellen Apache-Module oder Apache-Versionen. So musste ich das Projekt privat hosten, was schade ist, weil ich es gerne als Anregung präsentiert hätte.<br /> <br /> ===Anhang: Crawling Magic===<br /> <br /> &lt;source lang=&quot;php&quot; &gt;<br /> &lt;?php<br /> echo 'lol';<br /> &lt;/source&gt;</div>

Azzaroff