Hallo zusammen,
ich würde gerne mal ein paar Meinungen zum Thema hören. Mittlerweile sind ja viele schöne Features in Webseiten ohne die Verwendung von JavaScript nicht mehr denkbar. Von Ajax-Anwendungen ganz zu schweigen.
Wie ist die Meinung hier zum Einsatz von JavaScript-Features in der Webseite, die z.B. aus Bibliotheken wie jQuery entstehen?
Demgegenüber das Argument, dass das ganze auf die Nase fällt, wenn JavaScript abgeschaltet ist.
Wie seht ihr das?
Was gibt es da für Erfahrungen und Ansichten?
Verwendung von JavaScript
- Mr. Magpie
- ConPresso-Profi
- Beiträge: 1004
- Registriert: 01.01.1970 01:00
- Wohnort: Wuppertal
- Hat sich bedankt: 274 Mal
- Danksagung erhalten: 59 Mal
Hallo Marky,
ich sehe den Einsatz von Javascript heute nicht mehr so kritisch wie früher.
Einschränkung:
1) Das Javascript sollte die Zugänglichkeit/Barrierefreiheit der Inhalte nicht wesentlich verringern.
2) Die Suchmaschinenindizierung sollte nicht behindert werden, d.h. die Inhalte sollten nicht nur über Javascript verlinkt sein, sondern auch auf anderem Weg erreichbar sein.
Fazit: Es spricht m.E. nichts dagegen, mit Javascript die Inhalte besser zu strukturieren und aufzuhübschen.
ich sehe den Einsatz von Javascript heute nicht mehr so kritisch wie früher.
Einschränkung:
1) Das Javascript sollte die Zugänglichkeit/Barrierefreiheit der Inhalte nicht wesentlich verringern.
2) Die Suchmaschinenindizierung sollte nicht behindert werden, d.h. die Inhalte sollten nicht nur über Javascript verlinkt sein, sondern auch auf anderem Weg erreichbar sein.
Fazit: Es spricht m.E. nichts dagegen, mit Javascript die Inhalte besser zu strukturieren und aufzuhübschen.
Günther Ludwig
-
- ConPresso-Checker
- Beiträge: 217
- Registriert: 15.12.2005 09:27
- Hat sich bedankt: 1 Mal
- Danksagung erhalten: 2 Mal
Newsslider
Ich habe ein tolles Skript gefunden.
Wie packe ich die ganzen Abfragen in das Skript?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Featured Content Slider Using jQuery - Web Developer Plus Demos</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... ery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... -ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
</head>
<body>
<h3>» Featured Content Slider Using jQuery</h3>
<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="images/image1.jpg" alt="" />
<div class="info" >
<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image3.jpg" alt="" />
<div class="info" >
<h2><a href="#" >35 Amazing Logo Designs</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image4.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
Wie packe ich die ganzen Abfragen in das Skript?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Featured Content Slider Using jQuery - Web Developer Plus Demos</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... ery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... -ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
</head>
<body>
<h3>» Featured Content Slider Using jQuery</h3>
<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="images/image1.jpg" alt="" />
<div class="info" >
<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image3.jpg" alt="" />
<div class="info" >
<h2><a href="#" >35 Amazing Logo Designs</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image4.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
- Mr. Magpie
- ConPresso-Profi
- Beiträge: 1004
- Registriert: 01.01.1970 01:00
- Wohnort: Wuppertal
- Hat sich bedankt: 274 Mal
- Danksagung erhalten: 59 Mal
Bitte eröffne für solche Fragen einen eigenen Thread!
Ansonsten: Es kommt darauf an, wie und wo du den content slider haben möchtest - statisch in Kopf-Zeile, Fuß-Zeile oder sonstiger Stelle einer ConPresso-Datei oder dynamisch, sodass die "Fragmente" über die gewöhnliche Artikelbearbeitung editiert werden können.
Im letzteren Fall würde ich EIN Artikeltemplate bauen, das die maximale Anzahl der Fragmente berücksichtigt. Der Enhanced Parser ist dabei äußerst hilfreich.
Ansonsten: Es kommt darauf an, wie und wo du den content slider haben möchtest - statisch in Kopf-Zeile, Fuß-Zeile oder sonstiger Stelle einer ConPresso-Datei oder dynamisch, sodass die "Fragmente" über die gewöhnliche Artikelbearbeitung editiert werden können.
Im letzteren Fall würde ich EIN Artikeltemplate bauen, das die maximale Anzahl der Fragmente berücksichtigt. Der Enhanced Parser ist dabei äußerst hilfreich.
Günther Ludwig