Tools & more - Mike Unckel
Schriftart "Arial Unicode" o.ä. verwenden.
for (var i=0; i<65536; i++) {
document.write(String.fromCharCode(i) + " ");
}
http://www.weblog-deluxe.de/sonderzeichen-und-symbole-ascii-art-fur-second-life/
August 2011 |
Permalink |
Feedback
Bruchzahlen zum einfachen copy'n'paste. Achtung: Unicode-Zeichensatz!
½ (0,5)
⅓ (0,333)
⅔ (0,667)
¼ (0,25)
¾ (0,75)
⅕ (0,2)
⅖ (0,4)
⅗ (0,6)
⅘ (0,8)
⅙ (0,167)
⅚ (0,833)
⅛ (0,125)
⅜ (0,375)
⅝ (0,625)
⅞ (0,875)
html
August 2011 |
Permalink |
Feedback
So werden aus einer Word-Tabelle zwei:
Cursor in irgendeiner Zelle positionieren und dann
[Strg] + [Shift] + [Enter]
Quelle: http://www.ratschlag24.com/index.php/word-tabellen-teilen_000006237/
August 2011 |
Permalink |
Feedback
Ein typisches Aufklappmenü, umgesetzt mit reinem CSS. Dem 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/Januar 2011 |
Permalink |
Feedback
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>
Januar 2011 |
Permalink |
Feedback
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);
//...
});
Januar 2011 |
Permalink |
Feedback
Mit CSS3 lassen sich auf sehr einfache Weise, Elemente gestalten, was üblicherweise nur mit Grafiken zu bewerkstelligen war. Leider müssen noch Prefixes für die einzelnen Browsertypen verwendet werden (-moz, -webkit, -o). Hier z.B. mal Buttons, ganz ohne Grafiken oder "dirty tricks" wie verschachtelte Tags.
.btn {
position:relative;
background:-webkit-gradient(linear, left top, left bottom, from(#7CD357), to(#5CA33E));
background:-moz-linear-gradient(center top, #7CD357, #5CA33E);
background-color:#5CA33E;
border:1px solid #5CA33E;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.4);
box-shadow:0 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255, 255, 255, 0.9);
font:bold 14px/14px sans-serif;
color:#fff;
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.3);
text-decoration:none;
display:inline;
padding:8px 16px;
margin:0;
cursor:pointer;
}
.btn:hover {
background:-moz-linear-gradient(center top, #5CA33E, #7CD357);
background:-webkit-gradient(linear, left top, left bottom, from(#5CA33E), to(#7CD357));
}
.btn:active {
top:1px;
}
<input class="btn" type="submit" value="Submit" />
<button class="btn">Button</button>
<a class="btn" href="#">Link</a>
<div class="btn">Div</div>
<span class="btn">Span</span>
css
November 2010 |
Permalink |
Feedback
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
}
PHP XML JSON
Oktober 2010 |
Permalink |
Feedback
Typische Auflösungen von Smartphones im Vergleich:
auflösung resolution
September 2010 |
Permalink |
Feedback
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:
<?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 } ?>
Wordpress, PHP
September 2010 |
Permalink |
Feedback
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
(Stichworte: google, street view, api, location, position, distance)JavaScript, API
September 2010 |
Permalink |
Feedback
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:
- 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.)
- Bei der Installation die vorgewählten Optionen belassen.
- Neues Windows Forms-Anwendung-Projekt anlegen und Timer und PictureBox in die Form setzen.
- 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();
}
}
}
}C# Tools
August 2010 |
Permalink |
Feedback
Kurz und bündig...
<?php
// Konfiguration
$csvFile = "daten.csv";
$firstRowHeader = true;
$maxRows = 10;
// Daten auslesen und Tabelle generieren
$handle = fopen($csvFile, "r");
$counter = 0;
echo "<table class=\"csvTable\">";
while(($data = fgetcsv($handle, 999, ";")) && ($counter < $maxRows)) {
echo "<tr>";
if(($counter == 0) && $firstRowHeader) {
echo "<th>".$data[0]."</th>";
echo "<th>".$data[1]."</th>";
echo "<th>".$data[2]."</th>";
}
else {
echo "<td>".$data[0]."</td>";
echo "<td>".$data[1]."</td>";
echo "<td>".$data[2]."</td>";
}
echo "</tr>";
$counter++;
}
echo "</table>";
fclose($handle);
?>
PHP
Juni 2010 |
Permalink |
Feedback
Einfacher aber effektiver Spamschutz für E-Mail-Adressen mit Javascript und jQuery.
Ist JavaScript deaktiviert, erscheint nur info [at] domain.com.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('.email').each(function(index) {
var s = $(this).text().replace(" [at] ", "@");
$(this).html("<a href=\"mailto:" + s + "\">" + s + "</a>");
});
});
</script>
Aus: info [at] domain.com
wird: info@domain.com
Im Quelltext die E-Mail-Adressen in span-Tags mit der Klasse "email" setzen:
<span class="email">info [at] domain.com</span>
D.h. alle Elemente mit der Klasse "email" werden in les- und klickbare E-Mail-Adressen umgewandelt.
Ohne jQuery könnte es z.B. so aussehen:
<script type="text/javascript">
function convertMailAddress() {
var emailElements;
if (document.getElementsByClassName)
emailElements = document.getElementsByClassName("email");
else
emailElements = document.getElementsByClassNameForOldies("email");
var elementContent, replaceContent;
for (var i=0; i<emailElements.length; i++) {
elementContent = emailElements[i].innerHTML;
replaceContent = elementContent.replace(" [at] ", "@");
emailElements[i].innerHTML =
"<a href=\"mailto:" + replaceContent + "\">" + replaceContent + "</a>";
}
}
// http://javascript.about.com/library/bldom08.htm
document.getElementsByClassNameForOldies = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
window.onload = convertMailAddress;
</script>
JavaScript jQuery
Mai 2010 |
Permalink |
Feedback
Ich musste mal ein PHP-Frameworks für englische, russische, chinesische und arabische Inhalte entwickeln. Im Internet findet sich dazu auch eine Vielzahl von Artikeln, über die "richtige" Kodierung von mehrsprachigen Websites. Wie lassen sich also z.B. kyrillische, chinesische oder auch arabische Zeichen korrekt darstellen. Leider widersprechen sich manche der Tipps.
Daher nun meine Vorgehendweise (getestet auf PC, MAC, Linux mit jeweils unterschiedlichen Browsern):
- erst mal muss eine Schrift mit entsprechende Zeichenumfang installiert sein (z.B. Arial Unicode)
- mit einem UTF-8-fähigen Editor arbeiten (sollen die Meisten können)
- alle Dateien als UTF-8 ohne BOM kodieren
- Tag-Attribute im HTML-Head entsprechend anpassen, hier z.B. für arabisch:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar" lang="ar" dir="rtl">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Code-Ausschnitt als Beispiel
Einstellungen zum Format im Freeware-Editor Notepad++
Mehr Infos dazu:
Unicode Open-Source-Editor Nodepad++
http://notepad-plus.sourceforge.net/
Infos zu UTF-8
http://de.wikipedia.org/wiki/UTF-8
Infos zu BOM (Byte Order Mark)
http://de.wikipedia.org/wiki/Byte_Order_Mark
Grundlagen der Zeichenkodierung
http://toscho.de/2008/grundlagen-zeichenkodierung/
PHP
Januar 2010 |
Permalink |
Feedback
Da es unter MS DOS (Windows XP!) leider keinen Befehl wie wait oder sleep gibt und auch kein choice mehr in der Standard-Installation vorhanden ist, kann man sich aber mit ping behelfen! Nicht die feine englische Art aber es funktionert.
Das X durch eine Zahl (= Sekunden) ersetzen:
ping -n X 127.0.0.1>nul
Tools
August 2009 |
Permalink |
Feedback
Hier eine absolut unvollständige, dafür aber persönlich getestete und für gut befundene Freeware-Liste zu Verschlüsselung und Datensicherheit:
Verschlüsselung von ganzen Verzeichnissen, Patitionen und Festplatten:
TrueCrypt
Mal schnell Notizen sicher verschlüsseln:
Steganos LockNote
Sicher Daten löschen:
Eraser
Passwortsafe für PC, MAC, Linux, Handy und und und...
KeePass Password Safe
Schnell und sicher Backups erstellen mit RoboCopy und DOS-Batch
Batch Datensicherung
Tools
Juli 2009 |
Permalink |
Feedback
Immer wieder die selben Daten per FTP auf den Server laden? Dann hilft vielleicht dieses kleine DOS-FTP-Batch weiter. Infos zum FTP-Upload gibt es hier.
FTP-Uploader.bat
echo off
:start
cls
color 17
echo.
echo FTP UPLOADER
echo.
echo =======================================
echo.
echo [1] Upload (and overwrite) database
echo [2] Upload (and overwrite) all pictures
echo [c] Cancel
echo.
echo =======================================
echo.
set choice=
set /p choice=Type key to start:
if not "%choice%"=="" set choice=%choice:~0,1%
if "%choice%"=="1" goto do1
if "%choice%"=="2" goto do2
if "%choice%"=="c" goto end
goto start
:do1
ftp -s:UploadDatabase.ftp
pause
goto end
:do2
ftp -s:UploadPictures.ftp
pause
goto end
:end
rem the end
UploadDatabase.ftp
open ftp.meinserver.de
Username
Password
cd data
put c:\database.db
disconnect
bye
UploadPictures.ftp
open ftp.meinserver.de
Username
Password
cd data
prompt
mput c:\pisc\*.jpg
disconnect
bye
Referenz:
http://www.supportnet.de/threads/1086379Tools
Mai 2009 |
Permalink |
Feedback
Öffnet ein ganz normales, schicki-micki-loses Javascript-Popup und zentriert es auf dem Bildschrim.
<script type="text/javascript">
function OpenPopup(url, pwidth, pheight) {
popup = window.open(url,
"Win",
"scrollbars=auto,status=no,toolbar=no,resizable=yes,location=no,menu=no," +
"width=" + pwidth + ",height=" + pheight + "," +
"left=" + ((screen.width/2)-(pwidth/2)) + ",top="+ ((screen.height/2)-(pheight/2)));
popup.focus();
}
</script>
Aufruf z.B.:
<a href="javascript:OpenPopup('http://google.de',600,300);">Popup öffnen</a>
JavaScript
April 2009 |
Permalink |
Feedback
Hinweis auf den veralteten Browser Internet Explorer 6 und älter auf Websites einblenden, unter Verwendung von Conditional Comments.
<!--[if lte IE 6]>
<div style="background-color:#ffff88; font-family:Arial, Sans-Serif;
font-size:11px; text-align:center; margin:0; padding:2px;
border:1px solid #999; color:#666;">
Sie benutzen eine veraltete Software, welche aktuelle Internetseiten
ggf. nicht mehr korrekt darstellen kann.
Aktualisieren Sie ihren <a style="color:#66f" href="http://www.microsoft.com/germany/windows/downloads/ie/getitnow.mspx">Internet Explorer</a>.
</div>
<![endif]-->
HTML
Februar 2009 |
Permalink |
Feedback
Übernimmt bzw. zeigt den Namen des Tabellenblattes in die gewünschte Zelle.
=TEIL(ZELLE("dateiname";A1);FINDEN("]";ZELLE("dateiname";A1))+1;255)
Super Quelle für noch viiiiiiiel mehr Excel-Formel:
http://www.excelformeln.deExcel
Januar 2009 |
Permalink |
Feedback
@echo off
set quelle="C:\Ordner\Test.mdb"
set ziel="Z:\Test.mdb"
rem Hindergrund blau färben
color 1f
echo.
if not exist %ziel% goto Zielproblem
xcopy %quelle% %ziel% /s /v /d /c /i /f /y
if errorlevel 1 goto Kopierproblem
echo.
rem alles ok = Hindergrund grün färben
color 2f
goto Ende
:Kopierproblem
rem Hindergrund rot färben
color cf
goto Ende
:Zielproblem
rem Hindergrund rot färben
color cf
echo Ziel nicht gefunden: %ziel%
goto Ende
:Ende
echo Anwendung beendet
echo.
pause
Tools
September 2008 |
Permalink |
Feedback
Start » Ausführen » cmd
systeminfo
Und bei z.B. bei deutschen Systemen nach "Systembetriebszeit" suchen oder gleich
systeminfo | find "Systembetriebszeit"
Tools
Oktober 2007 |
Permalink |
Feedback
Ein Zeilenumbruch in Excel wird mit [Alt] + [Enter] gesetzt.
Ein Zeilenumbruch in Access wird mit [Strg] + [Enter] erzeugt.
Excel
September 2007 |
Permalink |
Feedback
Mit Excel kann man sehr einfach einen UNIX-Timestamp in ein "lesbares" Datum umwandeln.
Z.B. 1179833116.413 = 22.05.2007 13:25:16 Uhr
Zu beachten ist, daß die letzten 3 Ziffern die Millisekunden sind (nicht immer mit einem Punkt getrennt). Die ersten 10 beinhalten Datum und Uhrzeit. Mit der Excel-Funktion LINKS(String, Anzahl) werden dann nur die ersten 10 Ziffern gelesen.
=DATUM(1970;1;1)+(LINKS([ZELLE];10)/86400)
Wichtig: Für die Zellen bzw. Spalte ein Datumsformat auswählen (nicht Standard, Text, ...).
Eine manuelle Umrechnung (hin und zurück) gibt's unter: http://www.michx.de/unix_time.php
Excel
Juni 2007 |
Permalink |
Feedback
Gerade kein FTP-Client zur Hand? Einfach den Windows-Explorer zum Datei-Upload bzw. -Download benutzen:
ftp://username:passwort@servername
Tools
Mai 2007 |
Permalink |
Feedback