Kategorien
Office & Co. Webdesign

Excel: Domainendung ermitteln

In Spalte B (Endung) sollen die nur die Domain-Endungen stehen:

Domain Endung
unckel.de .de
unckel.com .com
unckel.co.kr .co.kr
unckel.online .online

Formel in Spalte B: =RECHTS(A2; LÄNGE(A2) - FINDEN("."; A2) + 1)

Kategorien
Webdesign

Cron-Job für Arme unter Windows

Über „Geplante Tasks“ kann eine Website (mit oder ohne Skript) folgendermaßen aufgerufen werden: Erst einen Browser dann die Adresse angeben.
Beispiel: C:\Programme\Internet Explorer\iexplorer.exe http://www.website.de/test.php

Eine andere Möglichkeit, jedoch nur wenn die Adresse öffentlich zugänglich ist, besteht über den Service www.cron-job.org

Daß der Browser bzw. der neue Tab nicht dauerhaft beim Aufruf geöffnet bleibt, einfach per JavaScript schließen:

<script>
	window.open('', '_self', ''); // chrome bug fix
	window.close();
</script>

Da das JavaScript erst nach dem Abarbeiten des Serverskripts ausgeführt wird, muss mit dem Schließen per JavaScript nicht gewartet werden.

Das funktioniert natürlich auch mit anderen Skripts (PHP, ASPX, usw.)

Beispiel:

<?php
	// cool php stuff…
?>
<html><body>
<script>
	window.open('', '_self', '');
	window.close();
</script>
</body></html>

 

Kategorien
Webdesign

HTML-Attribut per CSS entfernen/zurücksetzen

Das HTML height-Attribut lässt sich per CSS folgendermaßen überschreiben:

{ height:auto !important; }
Kategorien
Webdesign

Einfache Dropdown-Navigation mit CSS und JavaScript

Ein typisches Aufklappmenü, umgesetzt mit reinem CSS. Internet Explorer bis Version 7 benötigt etwas Hilfe per JavaScript. Dazu habe ich die jQuery- Bibliothek eingesetzt (was zwar etwas übertrieben erscheint, ich jedoch meistens sowieso auf der Website einsetze).
Getestet mit IE 6-8, Firefox 3x und Google Chrome auf PC.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">

#nav, #nav ul {
  font-family:sans-serif;
  list-style:none;
  padding:0;
  margin:0;
}

#nav a {
  display:block;
  color:#000;
  text-decoration:none;
  padding:.5em;	
}

#nav li {
  float:left;
  background-color:#ddd;
}

#nav li ul {
  position:absolute;
  width:auto;
  left:-999em;
  padding:0;
}

#nav li ul li {
  clear:both;
}

#nav li:hover {
  background-color:#eee;
}

/* no support IE 6,7 see JavaScript */
#nav li:hover ul,  
#nav li.iehover ul {
  left:auto;
}

</style>
</head>
<body>

<ul id="nav">
  <li><a href="#">Parent 1</a></li>
  <li><a href="#">Parent 2</a>
    <ul>
      <li><a href="#">Child 2.1</a></li>
      <li><a href="#">Child 2.2</a></li>
      <li><a href="#">Child 2.3</a></li>
    </ul>
  </li>
  <li><a href="#">Parent 3</a>
    <ul>
      <li><a href="#">Child 3.1</a></li>
      <li><a href="#">Child 3.2</a></li>
      <li><a href="#">Child 3.3</a></li>
      <li><a href="#">Child 3.4</a></li>
    </ul>			
  </li>
  <li><a href="#">Parent 4</a></li>
</ul>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- Single-level Dropdowns: http://htmldog.com/articles/suckerfish/dropdowns/ -->
<!--[if lte IE 7]>
<script>
$(function() {
  $("#nav li").hover(
    function() { $(this).addClass("iehover"); },
    function() { $(this).removeClass("iehover"); }
  );
});
</script>
<![endif]-->

</body>
</html>

Quelle und ausführliche Beschreibung: http://htmldog.com/articles/suckerfish/dropdowns/

Kategorien
Webdesign

Onepager mit jQuery

jQuery-Script um auf kleinen Webseiten (Web-Visitenkarten bzw. Onepager) zu navigieren. Inhalte werden ein- und ausgeblendet, ähnlich Accordion-Scripts. Einzelne Inhalte können aber auch über den Hash-Verweis direkt angesprungen werden, z.B. unckel.com/#kontakt.
Ist kein JavaScript verfügbar, werden alle Inhalte untereinander dargestellt. Über die Navigation können diese angesprungen werden.

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(function() {
	
  var navLinks = $('#nav a');	
  var pages = $('#pages > div');
	
  // rewrite ids to set hashes into address bar and hide all pages
  pages.each(function(i) {
    $(this).attr('id','js' + $(this).attr('id'));
  }).hide();
  $('.toplink').hide();
    
  navLinks.click(function(e) {
    // highlight navigation links
    navLinks.removeClass('active');
    $(this).addClass('active');

    // hide all pages and show requested page
    pages.hide();
    var page = $(this).attr('href').substring(1);
    $('#js' + page).fadeIn(); // .slideDown();
  });
	
  // read hash from address bar to show requested page
  var locationHash = window.location.hash.substring(1);
  if (locationHash == '') $('#nav a:first').click();
  else $('#nav a[href=#' + locationHash + ']').click();
	
});
</script>

Styles

<style>
  #pages div { background-color:#ddd; height:500px; }
  .active { font-weight:bold; color:#f00; }
</style>

HTML

<ul id="nav">
  <li><a href="#page1">Page 1</a></li>
  <li><a href="#page2">Page 2</a></li>
  <li><a href="#page3">Page 3</a></li>
</ul>

<div id="pages">
  <div id="page1">Page 1<p class="toplink"><a href="#nav">Nach oben</a></p></div>
  <div id="page2">Page 2<p class="toplink"><a href="#nav">Nach oben</a></p></div>
  <div id="page3">Page 3<p class="toplink"><a href="#nav">Nach oben</a></p></div>
</div>
Kategorien
Webdesign

jQuery: HTML ID-Attribute hinzufügen

Gegeben sind HTML-Elemente welche alle die Klasse ‚box‘ zugewiesen wurde. Will man nun gezielt z.B. das 3. Element ansprechen, ginge das auch mit ‚ $(„.box“).eq(2)‘.
Mit folgendem Code-Schnipsel füge ich jedoch jedem div-Element mit der Klasse ‚box‘ ein id-Attribut mit aufsteigender Zählung an (‚box1‘, ‚box2‘,…).

$(".box").each(function(index) {
  var boxId = "box" + index;
  $(this).attr("id", boxId);
  //...				
});
Kategorien
Webdesign

XML zu JSON umwandeln mit PHP

Hier ein einfaches Beispiel, wie aus folgender XML-Datei über das Attribut ‚id‘ ein Datensatz gelesen, und als Antwort ein JSON-Objekt zurück geliefert wird.

<?xml version="1.0" encoding="utf-8"?>
<articles>
<article id="1">
  <artid>A1001</artid>
  <descr>Description here</descr>
  <price>12.89</price>
</article>
<article id="2">
  <artid>B2002</artid>
  <descr>Description here</descr>
  <price>8.49</price>
</article>
</articles>

Per XPATH werden alle Knoten ‚article‘ mit dem Attribut id = 2 selektiert. (Sollte in diesem Beispiel eindeutig sein, d.h. der Primärschlüssel.)

<?php
header("Content-type: application/json");
echo "{";

if (isset($_GET["id"])) {
  
  $xml = simplexml_load_file("data.xml"); 
	
  foreach($xml->xpath("//article[" . $_GET["id"] . "]") as $item) {
    echo "\"artid\":\"" . $item->artid . "\",";
    echo "\"descr\":\"" . htmlspecialchars($item->descr) . "\",";
    echo "\"price\":"   . $item->price . "";		
  } 
}
else {
  echo "\"error\":\"no data\"";
}

echo "}";
?>

Die Antwort zur ID 2 ist ein JSON-Objekt:

{
  "artid": "B2002",
  "descr": "Description here",
  "price":  8.49	
}
Kategorien
Webdesign

WordPress: Untermenüpunkte nur bei Klick auf Elternpunkt sichtbar

Kleines Snippet zu einer Navigation mit 2 Ebenen in typischer Listenverschachtelung. Die Unterebenen sollen jedoch nur dann zu sehen sein, wenn der Eltern-Menüpunkt angeklickt wurde:

wp-menues

<?php
  global $post; // http://www.sitepoint.com/forums/showthread.php?t=668865
  $thispage = $post->ID; // grabs the current post id
  $pagekids = get_pages('child_of='.$thispage); // gets a list of pages that are sub pages
?>

<?php if ($pagekids || ($post->post_parent > 0)) { // exists sub pages OR selected a sub page ?>
  <ul>
    <?php wp_list_pages('title_li='); // display all pages ?>
  </ul>
<?php } else { ?>
  <ul>
    <?php wp_list_pages('depth=1&title_li='); // display only parent pages ?>
  </ul>
<?php } ?>
Kategorien
Webdesign

Position eines Street View-Panoramas über Panorama-ID ermitteln (Google Maps Javascript API V3)

Jedes Panorama hat eine eindeutige ID. (IDs sind nur während einer Session stabil!) Über die Methode getLinks() werden zum aktuellen Street View-Panorama ein Array der verbundenen Straßen mit Name, Richtung und IDs der nächsten Panoramen zurückgeliefert. Leider aber nicht die einzelnen Positionen.

Eine Möglichkeit bietet die StreetViewService-Klasse. Die Methode getPanoramaById() liefert dazu ein StreetViewPanoramaData-Objekt zurück welches unter anderem die Position enthält.

//...

var sv = new google.maps.StreetViewService();
var panoramaLinks = panorama.getLinks();
for (var i in panoramaLinks) {
  sv.getPanoramaById(panoramaLinks[i].pano, processSVData)
}

//...
 
function processSVData(data, status) {
  if (status == google.maps.StreetViewStatus.OK) {
    alert(data.location.latLng);
  }
}

Jetzt ist man in der Lage z.B. die Positionen der nächsten Panoramen auf einer Karte zu markieren oder die Entfernungen zur aktuellen Position auszurechnen. Letzteres ist wiederum wichtig wenn es um eine möglichste genaue Simulation einer virtuellen Fahrt durch Street View geht.

Bei kurzen Tests rund um den Globus, scheinen die Panoramen immer mindestens 10 m Abstand zu haben. Eine Unterschreitung habe ich nie gesehen. Auf Landstraßen können es auch schon mal über 40 m sein.

Link: Google Maps Javascript API V3

Kategorien
Webdesign

.NET: Webcam in Windows Forms-Anwendung mit OpenCV über Emgu CV-Wrapper integrieren

Hier ein „HelloWorld“-Beispiel, wie man eine USB-Cam in einer Visual Studio Windows Forms-Anwendung in C# einbindet. Über den Emgu CV-.Net-Wrapper wird die OpenCV Library (Open Source Computer Vision) verwenden. Diese enthält unzählige Algorithmen für die Bildverarbeitung und maschinelles Sehen. Also z.B. Filter, Gesichts- und Bewegungserkennung usw. Das ganze ist auch ziemlich schnell in der Verarbeitung.

Getestet und programmiert mit Visual Studio 2008 mit SP1 (ServicePack ist wichtig) auf Windows 7 (32) und Windows XP (32).

Vorgehen:

  1. Download Emgu inkl. OpenCV: libemgucv-2.1.0.793-win32.exe von http://sourceforge.net/projects/emgucv/files/ (prinzipiell benötigt man nur die paar DLLs beim Download sind aber noch Beispiele, eine Doku usw. dabei.)
  2. Bei der Installation die vorgewählten Optionen belassen.
  3. Neues Windows Forms-Anwendung-Projekt anlegen und Timer und PictureBox in die Form setzen.
  4. Alle relevanten OpenCV- und Emgu-DLLs in den Anwendungsordner (\bin) kopieren und auf die Emgu-DLLs in Visual Studio verweisen.
using System;
using System.Drawing;
using System.Windows.Forms;

using Emgu.CV;
using Emgu.CV.Structure;

namespace WebCamSimpleTest
{
  public partial class Form1 : Form
  {
    private Capture capture;

    public Form1()
    {
      InitializeComponent();
    }

    private void Form1_Load(object sender, EventArgs e)
    {
      capture = new Capture(0); // 0 = get first cam
      timer1.Interval = 40;     // 40 ms = 25 fps
      timer1.Enabled = true;
    }

    private void timer1_Tick(object sender, EventArgs e)
    {
      using (Image<Bgr, byte> nextFrame = capture.QueryFrame())
      {
        pictureBox1.Image = nextFrame2.ToBitmap();
      }
    }
  }
}