AnatoMe Hypermedia System, by Magdalena Fournillier « Alan N. Shapiro, Hypermodernism, Hyperreality, Posthumanism

AnatoMe Hypermedia System, by Magdalena Fournillier

Posted on September 3rd, 2014 by Alan N. Shapiro | in the Category: Offenbach Students: HTML & JavaScript Projects

Comments Off

„AnatoMe“ ist ein Programm / eine Applikation zur illustrativen Darstellung der morphologisch fassbaren, krankhaften Veränderung der menschlichen Organe. Das Programm ist in HTML, CSS und PHP geschrieben, die Gliederung und Aufteilung des Programms, so wie die einfache Steuerung durch Selektion sind an den Grundaufbau einer Webseite angelehnt – da ich mir die Möglichkeit einer Webpressentation offen halten wollte.

Der Aufbau: Durch einfache Selektion bewege ich mich durch das Programm. Ich entscheide mich zu Beginn für ein Geschlecht, danach für eine Altersgruppe. Habe ich diese Selektion getroffen bekomme ich die Illustration meiner Wahl mit Ansicht auf die anatomische Darstellung der Organe. Durch das bewegen der Computer maus über die Illustration kann ich meine weitere Auswahl treffen. Hier- bei wird mir durch den Hover-effect ermöglicht mich für ein Organ meiner Wahl zu entscheiden. Fahre ich mit der Maus über die Leber, erscheint mir die Auswahl „Leber“, bewege ich die Maus auf die Lunge er- scheint die Auswahl „Lunge“… usw. Habe ich mich nun für ein Organ entschieden bekomme ich die Illustration des Gesunden, selektierten Or- gans angezeigt und eine Liste mit möglichen psychischen bzw. pathologischen Veränderungen des Organs. Auch hier treffe ich wieder eine Auswahl. Ich suche mir eine Beliebige Krankheit aus der Liste aus und habe nun die Möglichkeit mir mit Hilfe des Programms jene Krankhafte Veränderung oder Missbildung an dem Organ meiner Wahl anzuschauen.

Zur Darstellung: Alle Bilder und Darstellungen sind Grafisch oder Illustrativ. Vorbild für die Illustrationen und Graphiken sind die medizinischen Studien und Zeichnungen aus Japan in der Zeit der Edo-periode (1603-1868), so wie Illustrationen und aufnahmen aus Europa des 20. Jahrhunderts. Die Illustrationen sind rein Informativ und nur zur visuellen Darstellung und aufzeigung, jedoch nicht zur medizinischen Untersuchung und Analyse geeignet. Sie haben ihren Ursprung in der Faszination für die anatomische Schönheit der Organe und Körper und deren Missbildungen und Veränderungen so wie dem Interesse alter medizinischer Illustrationen und Graphiken und sind somit nicht Medizinischem sondern rein Graphisch/illustrativem Ursprungs.

feemale_age.html

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>AnatoMe</title>
<meta name=”description” content=””>
<meta name=”viewport” content=”width=device-width”>

<!–[if lt IE 9]>
<script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<script>window.html5 || document.write(‘<script src=”js/vendor/html5shiv.js”><\/script>’)</script>
<![endif]–>
</head>
<body>

<div id=”header”>
<h1>ANATOME</h1>
<h2>FEMALE AGE</h2>
<div id=”navigation”><a href=”index.html”>HOME </a> </div>
</div>

<div id=”content”>
<div id=”femaleteenager”><a href=”female_girl.html”><img src=”img/female_teenager.png” alt=”FEMALE TEENAGER”/></a></div>
<div id=”femalewoman”><a href=”female_woman.html”><img src=”img/female_woman.png” alt=”FEMALE WOMAN”/></a></div>
<div id=”femalegranny”><a href=”female_granny.html”><img src=”img/female_granny.png” alt=”FEMALE GRANNY”/></a></div>
</div>
<div id=”footer”><a href=”impressum.html”>IMPRESSUM</a> | <a href=”http://magdalena.fournillier.de”>MAGDALENA FOURNILLIER</a> | <a href=”https://magdalena.fournillier.de/blog/”>BLOG</a> </div>

</div>

</body>
</html>

female_baby.html

<div id=”header”>
<h1>ANATOME</h1>
<h2>ANATOMY INFANT</h2>
<div id=”navigation”><a href=”female_age.html”><BACK</a> | <a href=”index.html”>HOME</a></div>
</div>

<div id=”footer”><a href=”impressum.html”>IMPRESSUM</a> | <a href=”http://magdalena.fournillier.de”>MAGDALENA FOURNILLIER</a> | <a href=”https://magdalena.fournillier.de/blog/”>BLOG</a> </div>

</div>

</body>
</html>

female_girl.html

<div id=”header”>
<h1>ANATOME</h1>
<h2>ANATOMY GIRL</h2>
<div id=”navigation”><a href=”female_age.html”><BACK</a> | <a href=”index.html”>HOME</a></div>
</div>

</div>

</body>
</html>

female_granny.html

<div id=”header”>
<h1>ANATOME</h1>
<h2>ANATOMY GRANNY</h2>
<div id=”navigation”><a href=”female_age.html”><BACK</a> | <a href=”index.html”>HOME</a></div>
</div>

</div>

</body>
</html>

female_woman.html

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>AnatoMe</title>
<script src=”js/prefixfree.js”></script>
<meta name=”description” content=””>
<meta name=”viewport” content=”width=device-width”>

<div id=”header”>
<h1>ANATOME</h1>
<h2>ANATOMY WOMAN</h2>
<div id=”navigation”><a href=”female_age.html”><BACK</a> | <a href=”index.html”>HOME</a></div>
</div>

</div>

</body>
</html>

female_woman_heart.html

<div id=”header”>
<h1>ANATOME</h1>
<h2>ANATOMY WOMAN</h2>
<div id=”navigation”><a href=”female_woman.html”><BACK</a> | <a href=”index.html”>HOME</a></div>
</div>

<div id=”content”>
<h3>HEART</h3>
</div>

</div>

</body>
</html>

female_woman_lung.html

<div id=”header”>
<h1>ANATOME</h1>
<h2>ANATOMY WOMAN</h2>
<div id=”navigation”><a href=”female_woman.html”><BACK</a> | <a href=”index.html”>HOME</a></div>
</div>

</div>

</body>
</html>

Impressum.html

<div id=”header”>
<h1>ANATOME</h1>
<h2>IMPRESSUM</h2>
<div id=”navigation”><a href=”index.html”> HOME </a> </div>
</div>

<div id=”content”>
<p>Magdalena Fournillier<br/><br/>Vorstadt 25a<br/>61440 Oberursel<br/>magdalena@fournillier.de<br/>01719764863</p>
</div>

</div>

</body>
</html>

Index.html

<div id=”header”>
<h1>ANATOME</h1>
<h2>SEX</h2>
<div id=”navigation”><a href=”index.html”>HOME </a> </div>
</div>

</div>

</body>
</html>

male_age.html

<div id=”header”>
<h1>ANATOME</h1>
<h2>MALE AGE</h2>
<div id=”navigation”><a href=”index.html”>HOME </a> </div>
</div>

<div id=”content”>
<div id=”femaleteenager”><a href=”male_boy.html”><img src=”img/male_boy.png” alt=”MALE BOY”/></a></div>
<div id=”femalewoman”><a href=”male_man.html”><img src=”img/male_man.png” alt=”MALE MAN”/></a></div>
<div id=”femalegranny”><a href=”male_grandpa.html”><img src=”img/female_granny.png” alt=”MALE GRANDPA”/></a></div>
</div>
<div id=”footer”><a href=”impressum.html”>IMPRESSUM</a> | <a href=”http://magdalena.fournillier.de”>MAGDALENA FOURNILLIER</a> | <a href=”https://magdalena.fournillier.de/blog/”>BLOG</a> </div>

</div>

</body>
</html>

male_boy.html

<div id=”header”>
<h1>ANATOME</h1>
<h2>ANATOMY BOY</h2>
<div id=”navigation”><a href=”male_age.html”><BACK</a> | <a href=”index.html”>HOME</a></div>
</div>

</div>

</body>
</html>

male_grandpa.html

<div id=”header”>
<h1>ANATOME</h1>
<h2>ANATOMY GRANDPA</h2>
<div id=”navigation”><a href=”male_age.html”><BACK</a> | <a href=”index.html”>HOME</a></div>
</div>

</div>

</body>
</html>

male_man.html

<div id=”header”>
<h1>ANATOME</h1>
<h2>ANATOMY GRANDPA</h2>
<div id=”navigation”><a href=”male_age.html”><BACK</a> | <a href=”index.html”>HOME</a></div>
</div>

</div>

</body>
</html>

main.js

/* ==========================================================================
HTML5 Boilerplate styles – h5bp.com (generated via initializr.com)
========================================================================== */

html,
button,
input,
select,
textarea {
color: #222;
}

body {
font-family: “Gill Sans”, “Gill Sans MT”, Calibri, sans-serif;
font-size: 1em;
line-height: 1.4;
}

::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}

::selection {
background: #b3d4fc;
text-shadow: none;
}

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}

img {
vertical-align: middle;
}

fieldset {
border: 0;
margin: 0;
padding: 0;
}

textarea {
resize: vertical;
}

.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author’s custom styles
========================================================================== */

#container {
margin: 0 auto;
min-height: 1820px;
width: 1020px;
background: #fff;
}

#header {
float: left;
margin-top: 150px;
width: 1020px;

}

#content {
float: left;
min-height: 1000px;
width: 1020px;
}

#content p {
color: #585858;
font-size: 0.938em;
}

#footer {
color: #585858;
font-size: 0.625em;
float: left;
height: 25px;
padding: 0 10px;
width: 1000px;
}

#header h1,h2 { font-family: “Gill Sans”, “Gill Sans MT”, Calibri, sans-serif;
}

#header h1 {
margin: 0 0 20px 0;
font-weight: normal;
font-size: 3.125em;
text-align: center;

}

#header h2 {
color: #585858;
font-weight: lighter;
font-size: 0.938em;
margin: 0 0 25px 0 ;
text-align: center;
}

#navigation {
color: #585858;
font-size: 0.625em;
font-weight: normal;
text-align: center;
}

#navigation a, a:visited, a:link {
color: #585858;
text-decoration: none;

}

#navigation a:hover {
color: #000000;
}

#female {
float: left;
height: 550px;
margin: 100px 0 0 0;
width: 360px;

}

#male {
float: right;
height: 550px;
margin: 100px 0 0 0;
width: 360px;

}

#footer a, a:visited, a:link {
color: #585858;
font-size: 0.625em;

}

#footer a:hover {
color: #000000;
}

#femalebaby {
float: left;
height: 800px;
margin: 100px 0 0 0;
width: 255px;

}

#femaleteenager {
float: left;
height: 800px;
margin: 100px 0 0 127px;
width: 255px;

}

#femalewoman {
float: left;
height: 800px;
margin: 100px 0 0 0;
width: 255px;
}

#femalegranny {
float: left;
height: 800px;
margin: 100px 0 0 0;
width: 255px;

}

#femalebody {
height: 1000px;
width: 400px;
margin: 100px auto 0 auto;
}
/* ==========================================================================
Media Queries
========================================================================== */

@media only screen and (min-width: 35em) {

}

@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {

}

/* ==========================================================================
Helper classes
========================================================================== */

.ir {
background-color: transparent;
border: 0;
overflow: hidden;
*text-indent: -9999px;
}

.ir:before {
content: “”;
display: block;
width: 0;
height: 150%;
}

.hidden {
display: none !important;
visibility: hidden;
}

.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}

.invisible {
visibility: hidden;
}

.clearfix:before,
.clearfix:after {
content: ” “;
display: table;
}

.clearfix:after {
clear: both;
}

.clearfix {
*zoom: 1;
}

/* ==========================================================================
Print styles
========================================================================== */

@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}

a,
a:visited {
text-decoration: underline;
}

a[href]:after {
content: ” (” attr(href) “)”;
}

abbr[title]:after {
content: ” (” attr(title) “)”;
}

/*
* Don’t show links for images, or javascript/internal links
*/

.ir a:after,
a[href^=”javascript:”]:after,
a[href^=”#”]:after {
content: “”;
}

pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}

thead {
display: table-header-group; /* h5bp.com/t */
}

tr,
img {
page-break-inside: avoid;
}

img {
max-width: 100% !important;
}

@page {
margin: 0.5cm;
}

p,
h2,
h3 {
orphans: 3;
widows: 3;
}

h2,
h3 {
page-break-after: avoid;
}
}

Alan N. Shapiro, Hypermodernism, Hyperreality, Posthumanism

Blog and project archive about media theory, science fiction theory, and creative coding

AnatoMe Hypermedia System, by Magdalena Fournillier

Pages

Categories

Friends

Archives

Meta