Posts
443
Comments
128
Trackbacks
0
Thursday, November 21, 2013
FUN mit Cisco VPN-Client

Heute wollte ich auf meinem Rechner einen VPN-Client von Cisco installieren. Die Installation brach ab und mein Rechner regierte nicht mehr.

Nach dem Neustart konnte ich den VPN-Client nicht starten und wollte die Installation wiederholen, bekam jedoch di folgende Fehlermeldung:

“Error 28000: Before installing the Cisco Systems VPN Client 5.0.07.0410, you must uninstall the prvious version of Cisco Systems VPN Client 5.0.07.0410, using the Add/Remove Program Files option in the Control Panel. Then restart your system”

vpn

Der VPN-Client ließ sich jedoch nicht über die Systemsteuerung entfernen. Auch der Versuch einer manuellen Deinstallation nach einer der Anleitungen im Netz ( z.B. How to uninstall Cisco VPN client) half nicht weiter.

Erst der Hinweis, dass man in der Setup-Datei “vpnclient_setup.ini” folgenden Eintrag ändern soll:

Remove Previous=1

half weiter.

Danach das Setup-Programm über die Konsole starten mit: vpnclient_setup.msi /quiet

Jetzt wird der VPN-Client installiert und dies schließt einen Neustart einen. Danach kann man den VPN-Client verwenden.

Danke an: http://fabi.me/sonstiges/cisco-vpn-client-install-problem/comment-page-1/#comment-21721

posted @ Thursday, November 21, 2013 8:22 PM | Feedback (0)
Tuesday, November 12, 2013
Import einer CSV-Datei in SQL-Server

Für mein Archiv ein Beispiel für den Import einer CSV-Datei in die Tabelle eines SQL-Servers:

                using (StreamReader sr = new StreamReader(fileName, System.Text.Encoding.UTF7))
                {
                    while (!sr.EndOfStream)
                    {
                        string line = sr.ReadLine();
 
                        if (countImport > 0)
                        {
                            string sqlStatement = "INSERT INTO TABLENAME " 
                                                    " (col_A, col_B, col_C, col_D, col_E, col_F, col_G) " +
                                                    " VALUES (" +
                                                    "'" + line.Split(';')[0] + "'," +
                                                    "'" + line.Split(';')[1] + "'," +
                                                    "'" + line.Split(';')[2] + "'," +
                                                    "'" + line.Split(';')[3] + "'," +
                                                    "'" + line.Split(';')[4] + "'," +
                                                    "'" + line.Split(';')[5] + "'," +
                                                    "'" + line.Split(';')[6] + "'" +
                                                    ")";
 
                            ExecuteNonQuery(sqlStatement);
                            Console.Write(".");
                        }
 
                        countImport++;
                    }
                }

 

Und die Methode ExecuteNonQuery():

        public static void ExecuteNonQuery(string sql)
        {
            SqlConnection conn = new SqlConnection(connectionstring);
            using (conn)
            {
                conn.Open();

                SqlCommand cmd = new SqlCommand(sql, conn);
                cmd.ExecuteNonQuery();
            }
        }
posted @ Tuesday, November 12, 2013 12:51 PM | Feedback (0)
Saturday, October 26, 2013
Datum im gewünschten Format zurückgeben

Fürs Archiv:

Manchmal ist es notwendig das Datum in einem bestimmten Format zurückzugeben, z.B. YYMMDD,

dies kann man mit der folgenden Codezeile erledigen:

string dateString = DateTime.Now.ToString("yyyyMMdd");

posted @ Saturday, October 26, 2013 12:41 PM | Feedback (0)
Wednesday, October 09, 2013
Per SQL eine Datenbankdokumentation erstellen

Hier ein kleines SQL-Skript welches alle Tabellen einer Datenbank mit Spalten und Datentypen ausgibt. Dieses Skript kann bei der Dokumentation einer Datenbank helfen:

SELECT schema_name=sys.schemas.name,
       table_name=sys.objects.name,
       column_name=sys.columns.name,
       colum_type=sys.types.name,
       length=sys.columns.max_length
FROM   sys.objects
       JOIN sys.columns
         ON sys.objects.[object_id] = sys.columns.[object_id]
       JOIN sys.schemas
         ON sys.schemas.schema_id = sys.objects.schema_id
       JOIN sys.types
         ON sys.columns.system_type_id = sys.types.system_type_id
WHERE  sys.objects.type = 'U'
       -- U=USER_TABLE, S=SYSTEM_TABLE
       -- V=VIEW, P=SQL_STORED_PROCEDURE
       AND sys.types.name <> 'sysname'
ORDER  BY sys.schemas.name,
          sys.objects.name,
          sys.columns.column_id 

posted @ Wednesday, October 09, 2013 12:37 PM | Feedback (0)
Wednesday, September 18, 2013
FUN mit der RadioButtonList von Devexpress

Bei der RadioButtonList von Devexpress ist es nicht möglich mit JavaScript im Client einen Radiobutton aus dieser Liste zu markieren.

Der Grund hierfür liegt darin, dass Devexpress für die Darstellung der Radiobuttons eine Hintergrundgrafik verwendet:

DXR

Zwar kann man per JavaScript/jQuery die Hintergrundgrafik entsprechend verschieben, jedoch bleibt die Grafik stehen wenn man einen anderen Radiobutton auswählt.

FAZIT: Wenn man eine RadioButtonList im Client per JavaScript updaten möchte dann besser die Finger vom der Komponente von Devexpress lassen.

posted @ Wednesday, September 18, 2013 12:32 PM | Feedback (0)
Wednesday, September 11, 2013
MCSD Web Applications Solutions Developer

MCSD

Inzwischen habe ich meine Zertifizierung zum MCSD Web Applications Solutions Developer abgeschlossen Smiley

posted @ Wednesday, September 11, 2013 5:52 PM | Feedback (0)
Thursday, August 22, 2013
Code-Formatierung in HTML

Hier zwei praktischer Links um Code in HTML zu konvertieren:
 
C#: http://www.manoli.net/csharpformat/
 
SQL: http://www.dpriver.com/pp/sqlformat.htm

posted @ Thursday, August 22, 2013 5:47 PM | Feedback (0)
Thursday, August 01, 2013
Sicherstellen, dass aktualisiert JavaScript-Dateien geladen werden

In der Praxis, vor allem in großen Firmennetzwerken kommt es vor dass auf der Route zum Webserver verschiedene Proxys liegen und man sich wundert, dass eine aktualisierte JavaScript-Datei auf dem Intranet-Webserver nicht im lokalen Browser ankommt.

Hier kann man sich helfen in dem man an den Aufruf der JavaScript-Datei mit “?” einen Parameter anhängt, die Parameter könnt z.B. eine Zufallszahl sein.

Am sinnvollsten ist es jedoch als Parameter das Datum der letzten Änderung der JavaScript-Datei zu verwenden, dann wird die Datei nur neu geladen, wenn sich wirklich etwas geändert hat:

/// <summary>
/// Handles the prerender event
/// </summary>
/// <param name="e">arguments for the event</param>
protected override void OnPreRender(EventArgs e)
{
   string path = Server.MapPath("~/Scripts/JavaScriptFile.js");
   FileInfo info = new FileInfo(path);
   ScriptManager.RegisterClientScriptInclude(
      this
,
      typeof(_Default),
      "mainScript"
,
      string.Format("{1}?id={0}", info.LastWriteTime, this.ResolveClientUrl("~/Scripts/ JavaScriptFile.js")));

   base.OnPreRender(e);
}

posted @ Thursday, August 01, 2013 11:38 AM | Feedback (0)
Wednesday, July 03, 2013
Kostenlose eBooks von Microsoft

Eine Übersicht über kostenlosen eBooks von Microsoft findet man hier:

http://blogs.msdn.com/b/mssmallbiz/archive/2013/06/18/huge-collection-of-free-microsoft-ebooks-for-you-including-office-office-365-sharepoint-sql-server-system-center-visual-studio-web-development-windows-windows-azure-and-windows-server.aspx

posted @ Wednesday, July 03, 2013 12:15 PM | Feedback (0)
Friday, June 28, 2013
Übersicht über die Entwicklung von C#

Diese Übersicht finde ich ganz interessant:

4113_DotNet_Difference_png-800x0

Gefunden bei: http://msmvps.com/blogs/kenlin/archive/2013/06/21/the-new-features-introduced-in-each-version-for-c-1-0-5-0.aspx

posted @ Friday, June 28, 2013 12:11 PM | Feedback (0)
Tuesday, June 04, 2013
Browserweiche für IE 8 mit jQuery

Fürs Archiv eine Beispiel wie man eine Browserweiche mit jQuery für IE 8 einbaut

<script language="javascript">
if ($.browser.msie && $.browser.version == 8) {
    document.createStyleSheet('/pfad/css/template-ie8.css');
}
</script>

posted @ Tuesday, June 04, 2013 5:13 PM | Feedback (1)
Friday, May 10, 2013
SQL: Daten in eine neue Tabelle kopieren

Damit ich mir das nicht immer wieder raussuchen muss:

“select * into tableB from tableA”

posted @ Friday, May 10, 2013 3:14 PM | Feedback (0)
Wednesday, May 08, 2013
Konsolen-Programm SC.exe

Dienste von der Konsole aus verwalten

Zum Verwalten (starten und stoppen) der Dienste von der Konsole aus gibt es neben dem Programm "net" auch das Programm "sc".

SC steht für Service Control und hat folgende Parameter:


BESCHREIBUNG:
        SC ist ein Befehlszeilenprogramm für die Kommunikation mit dem Dienststeuerungs-Manager und mit Diensten.

SYNTAX:
        sc <Server> [Befehl] [Dienstname] <Option1> <Option2>...


        Die Option <Server> hat das Format "\\ServerName"
        Weitere Hilfe zu Befehlen kann abgerufen werden durch Eingabe von:
        "sc [Befehl]"
        Befehle:
          query-----------Fragt den Status eines Diensts ab oder listet den Status für Typen von Diensten auf.
          queryex--------Fragt den erweiterten Status eines Diensts ab oder listet den Status für Typen von Diensten auf.
          start------------Startet einen Dienst.
          pause----------Sendet eine Steuerungsanfrage PAUSE an einen Dienst.
          interrogate------Sendet eine Steuerungsanfrage INTERROGATE an einen Dienst.
          continue--------Sendet eine Steuerungsanfrage CONTINUE an einen Dienst.
          stop------------Sendet eine Steuerungsanfrage STOP an einen Dienst.
          config----------Ändert die Konfiguration eines Diensts (beständig).
          description-----Ändert die Beschreibung eines Diensts.
          failure----------Ändert die Aktionen beim Scheitern eines Diensts.
          failureflag------Ändert das Fehleraktionskennzeichen eines Diensts.
          sidtype---------Ändert den Diensttyp SID eines Diensts.
          privs-----------Ändert die erforderlichen Berechtigungen eines Diensts.
          qc--------------Fragt die Konfigurationsinformationen eines Diensts ab.
          qdescription----Fragt die Beschreibung eines Diensts ab.
          qfailure--------Fragt die Aktionen ab, die bei einem Dienstfehler ausgeführt werden.
          qfailureflag----Fragt das Fehleraktionskennzeichen eines Diensts ab.
          qsidtype--------Fragt den Diensttyp SID eines Diensts ab.
          qprivs----------Fragt die erforderlichen Rechte eines Diensts ab.
          qtriggerinfo----Fragt die Triggerparameter eines Diensts ab.
          qpreferrednode--Fragt den bevorzugten Knoten NUMA eines Diensts ab.
          delete----------Löscht einen Dienst (aus der Registrierung).
          create----------Erstellt einen Dienst (fügt ihn zur Registrierung hinzu).
          control---------Sendet eine Steuerung an einen Dienst.
          sdshow----------Zeigt die Sicherheitsbeschreibung eines Diensts an.
          sdset-----------Legt die Sicherheitsbeschreibung eines Diensts fest.
          showsid---------Zeigt die SID des Diensts, passend zu einem zufälligen Namen an.
          triggerinfo-----Konfiguriert die Triggerparameter eines Diensts.
          preferrednode---Legt den bevorzugten Knoten NUMA eines Diensts fest.
          GetDisplayName--Ruft den DisplayName für einen Dienst ab.
          GetKeyName------Ruft den ServiceKeyName für einen Dienst ab.
          EnumDepend------Listet die Dienstabhängigkeiten auf.

        Die folgenden Befehle benötigen keinen Dienstnamen:
        sc <Server> <Befehl> <Option>
          boot------------(ok | bad) Zeigt an, ob der letzte Neustart als
                          letzte als funktionierend bekannte Konfiguration
                          gespeichert werden soll.
          Lock------------Sperrt die Dienstdatenbank.
          QueryLock-------Fragt den LockStatus der SCManager-Datenbank ab.
BEISPIEL:
        sc start MeinDienst

Soll die Hilfe für die Befehle QUERY und QUERYEX angezeigt werden?
[ j | n ]:


QUERY- und QUERYEX-OPTIONEN:
        Wenn auf die Abfrage ein Dienstname folgt, wird der Status fr
        diesen Dienst zurckgegeben.  In diesem Fall treten keinen weiteren
        Optionen auf.  Wenn auf die Abfrage nichts oder eine der unten
        aufgelisteten Optionen folgt, werden die Dienste aufgelistet
    type=    Typ der aufzulistenden Dienste (Treiber, Dienst, Alle)
             (Standard = Dienst)
    state=   Status der aufzulistenden Dienste (nicht aktiv, Alle)
             (Standard = Aktiv)\n"
    bufsize= Die Gröáe (in Bytes) des Auflistungspuffers
             (Standard = 4096)
    ri=      Die Indexnummer zum Fortsetzen, ab der die Auflistung beginnen
             soll\n"
             (Standard = 0)
    group=   Aufzulistende Dienstgruppe
             (Standard = Alle Gruppen)

SYNTAX BEISPIELE
sc query                - Listet den Status aktiver Dienste und Treiber
sc query messenger      - Zeigt den Status des Messenger-Dienstes
sc queryex messenger    - Zeigt den erweiterten Status des Messenger-Dienstes
sc query type= driver   - Listet nur aktive Treiber auf
sc query type= service  - Listet nur Win32-Treiber auf
sc query state= all     - Listet alle Dienste & Treiber auf
sc query bufsize= 50    - Listet mit einem 50 Byte Puffer auf
sc query ri= 14         - Listet mit Index zum Fortsetzen = 14
sc queryex group= \"\"  - Listet aktive Dienste die nicht einer Gruppe
                          angehören auf
sc query type= service type= Listet alle interaktiven Dienste auf
sc query type= driver group= NDIS     - Listet alle NDIS-Treiber

 

Interessant ist das Programm z.B. wenn man mit putty auf einem Server zugreift und einen Dienst starten möchte, jedoch dessen Namen nicht exakt weis:


"sc query type= service state= inactive"

listet alle Services auf die nicht gestartet sind.

Achtung: die Leerzeichen nach dem"=" beachten!

posted @ Wednesday, May 08, 2013 3:53 PM | Feedback (0)
Friday, April 19, 2013
ASP.NET: in der global.asax automatisch einen Benutzer mitloggen

In manchen Konstellationen kann es nützlich oder notwendig sein mitzuloggen wie lange eine Benutzer eine Anwendung benutzt hat.

Hier für bietet sich die Methode “Application_PostRequestHandlerExecute(object sender, EventArgs e)” in der Datei global.asax an:

private void Application_PostRequestHandlerExecute(object sender, EventArgs e)
{
   try
   {
      if (Request.Path.Contains(".aspx"))
      {
         string commandText = string.Empty;
         if (Session.IsNewSession)
         {
            commandText = "INSERT INTO DB.LOG (SESSION_ID, USER_NAME, LAST_ACTION) VALUES (@SESSIONID, @USERNAME, @LASTACTION)";
         }
         else
         {
            commandText = "UPDATE DB.LOG SET LAST_ACTION = @LASTACTION WHERE SESSION_ID = @SESSIONID AND USER_NAME = @USERNAME";
         }
         DBMapper.Instance.ExecuteNonQuery(commandText, new Dictionary<string, object>() { { "@SESSIONID", Session.SessionID }, { "@USERNAME", Session["CurrentUser"] }, { "@LASTACTION", DateTime.Now } });
      }
   }
   catch (Exception ex)
   {
      // Don't do anything in order not to let the application crash.
   }
}


Die dazugehörige Tabelle lässt sich mit dem folgendem Skript erstellen:

CREATE TABLE [DB].[LOG](
       [CTRLSY_IDENTIFIER] [uniqueidentifier] NOT NULL,
       [SESSION_ID] [nvarchar](50) NULL,
       [USER_NAME] [nvarchar](10) NULL,
       [SESSION_START] [datetime] NULL,
       [LAST_ACTION] [datetime] NULL,
 CONSTRAINT [PK_LOG] PRIMARY KEY CLUSTERED (
       [CTRLSY_IDENTIFIER] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

ALTER TABLE [DB].[LOG] ADD  CONSTRAINT [DF_LOG_CTRLSY_IDENTIFIER] 
DEFAULT (newid()) FOR [CTRLSY_IDENTIFIER] GO

ALTER TABLE [DB].[LOG] ADD  CONSTRAINT [DF_LOG_CTRLSY_TIMESTAMP] 
DEFAULT (getdate()) FOR [SESSION_START] GO

posted @ Friday, April 19, 2013 3:36 PM | Feedback (0)
Monday, April 01, 2013
Per jQuery Joomla Menü optimieren

Für’s Archiv, so kann man mit jQuery ein Menü in Joomla nachträglich formatieren:

$(document).ready(function(){               
     <?php if ($beitrag_Id ==1000): ?>
         $("#header ul.menu li.item-104").addClass("current").addClass("active");
     <?php elseif ($result->id ==11): ?>
         $("#header ul.menu li.item-101").addClass("current").addClass("active");
     <?php elseif ($result->id ==9): ?>
         $("#header ul.menu li.item-102").addClass("current").addClass("active");
     <?php elseif ($result->id ==10): ?>
         $("#header ul.menu li.item-103").addClass("current").addClass("active");
     <?php elseif ($result->id ==12): ?>
         $("#header ul.menu li.item-104").addClass("current").addClass("active");
<?php endif; ?>
});

posted @ Monday, April 01, 2013 3:42 PM | Feedback (0)
Thursday, March 21, 2013
Vorschau für das iPad

Unter der folgenden Adresse kann man testen ob eine Seite für das iPad optimiert ist:

http://ipadpeek.com/

posted @ Thursday, March 21, 2013 3:40 PM | Feedback (0)
Thursday, March 14, 2013
Einbinden von MP3 Musikfiles in Website (2013/02)

Für’s Archiv

Einbinden von MP3 Musikfiles in Website (2013/02)
•    Info: http://aktuell.de.selfhtml.org/artikel/grafik/flashmusik/#einleitung
•    Einfacher Musikplayer für Flash (EMFF) http://emff.sourceforge.net/
•    http://www.tutorialwelt.de/188/10-kostenlose-flash-mp3-player-fur-eure-webseite.htm
•    Codegenerator zur Anpassung des EMFF http://emff.sourceforge.net/codegenerator/
•    Beispielseite: http://www.drum-afrika.de/  (emff_standard.swf)
•    Eigene Seiten: http://www.kurpfalz-tourist.de

posted @ Thursday, March 14, 2013 3:06 PM | Feedback (0)
Tuesday, January 22, 2013
CSS3 eigene Fonts verwenden: @font-face

Mit CSS3 können nun eigene Fontarten in einer Website verwendet werden, d.h. man ist nicht mehr auf die Standard-Schriftarten wir Arial und Verdana angewiesen.

In CSS3 können folgende Font-typen verwendet werden:

  • Embedded OpenType (EOT)
  • TrueType (TTF)
  • OpenType (OTF)
  • Scalable Vector Graohics (SVG)
  • Web Open Font (WOFF)

Die Source-Dateien für die Fonts müssen auf einem Webserver zum Download mit der Seite zur Verfügung stehen (unter http://www.fontsquirrel.com/ gibt es freie Fonts)


Zunächst muss die neue Schriftart mittels CSS3 deklariert werden:

@font-face {
       font-family: 'MeineSchriftart';
       src: url('MeineSchriftart-webfont.eot');
       src: local(''), url('MeineSchriftart-webfont.woff') format('woff'), url('MeineSchriftart-webfont.ttf') format('truetype'), url('MeineSchriftart-webfont.svg') format('svg');
       font-weight: normal;
       font-style: normal;
}

Danach kann diese neue Schriftart wie eine Standard-Schriftart verschiedenen Styles zugewiesen werden:

p {
   font: 60px/68px 'MeineSchriftart', Arial, sans-serif;
}


Da diese Fonts mit der Webseite heruntergeladen werden müssen, bedeutet dies:
- längere Ladezeit
- Copyright beachten !

 

Links: 
http://www.fontsquirrel.com/
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
Cooles Beispiel: @font-face und a:hover Effekt >>

posted @ Tuesday, January 22, 2013 1:19 PM | Feedback (0)
Tuesday, February 12, 2013
CSS3 Beispiele im Web

Praktische Hilfsmittel zum Erlernen der neue CSS3- Features sind online CSS3 Generatoren im Web.

Übersichten gibt es hier:
http://www.webdesignerdepot.com/2012/04/15-great-html5-and-css3-generators/
http://www.sitepoint.com/10-best-css3-code-generators/

Hier eine Auswahl:
http://www.css3.me/ (Für Rahmen und Schatten)
http://css-tricks.com/examples/ButtonMaker/ (Buttons)
http://css3buttongenerator.com/ (Buttons)

Coole CSS3 Beispiele:
http://css-tricks.com/downloads/css-stuff/
http://www.designyourway.net/blog/inspiration/css3-html5-experiments-that-will-blow-your-mind-47-examples/
http://www.web3mantra.com/2011/04/13/50-best-css3-examples/

posted @ Tuesday, February 12, 2013 12:31 PM | Feedback (0)
Saturday, February 09, 2013
HTML5 und Web Storage

Mit HTML5 kommt im Browser  ein neues lokalen storage object  und einem session storage object. Dies ist eine Erweiterung und ein Ersatz für die Verwendung von Cookies.

Das lokale storage object erlaubt es benutzerspezifische Daten abzuspeichern und zu einem späteren Zeitpunkt wieder darauf zurückzugreifen (dieser lokale storage umfasst max. 5 MB). Die Daten im storage object bleiben nach dem Schließen des Browsers gespeichert und werden nicht automatisch gelöscht.

Die wichtigsten localStorage-Methoden sind:

  • localStorage.setItem(“Variable”, “Wert”)   - oder localStorage.Variable=”Wert”
  • localStorage.getItem(“Variable”)  - oder localStorage.Variable

Das session storage object kann die Daten nur für die Dauer der Browsersitzung speichern.

Die wichtigsten sessionStorage-Methoden sind:

  • sessionStorage.setItem(“Variable”, “Wert”)  - oder sessionStorage.Variable=”Wert”
  • sessionStorage.getItem(“Variable”)  - oder sessionStorage.Variable


Das folgende Beispiel speichert einen eingegeben Usernamen im local storage object und zeigt den Usernamen beim nächsten Aufruf der Seite wieder an:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(function () {
            load_settings();
            $('form[name=localStorageTest]').submit(function (e) {
                e.preventDefault();
                save_settings();
            });
        });
        function load_settings() {
            $("#alterUserName").val(localStorage.getItem("UserName"));
        }
        function save_settings() {
            localStorage.setItem("UserName", $("#UserName").val());
            alert('der neue UserName ' + $("#UserName").val() + ' wurde gespeichert');
        }
    </script>
</head>
<body>
    <form name="localStorageTest" action="#" method="post" accept-charset="utf-8">
        gespeicherter UserName:
  <input type="text" id="alterUserName" name="alterUserName" readonly="true">
        <br>
        neuer UserName:
  <input type="text" id="UserName" name="UserName">
        <br>
        <br>
        <input type="submit" value="speichern">
    </form>
</body>
</html>

posted @ Saturday, February 09, 2013 10:09 AM | Feedback (0)
HTML5 und Canvas

In HTML5 gibt es jetzt die Möglichkeit innerhalb der Webseite mit JavaScript zu zeichnen.

Hierzu dient das neue Element <canvas>, dieses stellt eine Fläche innerhalb der Webseite zur Verfügung innerhalb derer gezeichnet werden kann:

<canvas id="myCanvas" width="300" height="300"></canvas>

Die Größe muss vorher angegeben werden und kann anschließend nicht mehr geändert werden.

Mit der JavaScript-Methode document.getElementById() wird auf das canvas-Element zugegriffen werden.

Hiermit ließen sich z.B. mit JavaScript dynamisch Grafiken erstellen.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Drawings</title>
  </head>
  <body>
     <canvas id="myCanvas" width="300" height="300"></canvas>
     <script type="text/javascript" charset="utf-8">
       var canvas = document.getElementById('myCanvas');
       if (canvas.getContext){
         var context = canvas.getContext('2d');
         context.fillStyle = "rgb(200,0,0)";
         context.fillRect (10, 10, 150, 150);
         context.fillStyle = "rgb(0,200,0)";
         context.fillRect (50, 50, 200, 300);
         context.strokeStyle = "rgb(200,0,0)";
         context.lineWidth = 20;
         context.beginPath();
         context.moveTo(100, 100);
         context.lineTo(280, 280);
         context.stroke();
         context.closePath();
       }
     </script>
     </body>
</html>

Das Beispiel würde so aussehen:

image

posted @ Saturday, February 09, 2013 8:35 AM | Feedback (0)
Thursday, February 07, 2013
CSS3 Media Queries

Bisher konnte man mit HTML4 einer Webseite zwei StyleSheets zuweisen, eine für die Bildschirmdarstellung, eine für die Darstellung auf dem Drucker:

<link href="styles.css" rel="stylesheet" type="text/css" media="screen">
<link href="print.css" rel="stylesheet" type="text/css" media="print">

Mit CSS3 lassen sich jetzt an Hand

  • Bildschirmauflösung (max-device-width: 123px)
  • Portrait oder Landscape mode (orientation: landscape / portrait)
  • Größe des Browserfensters (max-width: 123px)

spezielle Styles zuweisen:

         @media only screen and (max-width: 480px) {
               body{
                    width: 460px;
               }

               #newsletter{
                    -moz-column-count: 1;
                    -webkit-column-count: 1;
               }
             }

Oder direkt eigene Styles zuweisen:

    <link href="mobile.css" rel="stylesheet" type="text/css"
        media="only screen and (max-device-width: 480px)">

 

Links:
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://mediaqueri.es/



posted @ Thursday, February 07, 2013 2:49 PM | Feedback (0)
HTML5 Validierungen von Formularfeldern (ohne JavaScript)

In HTML5 gibt es für die Input-Felder neue Attribute:

  • placeholder (hier kann man das Input-Feld mit grauem Text vorbelegen)
  • required (Pflichtfel für die Validierung)
  • pattern (regular expression für die Validierung)
  • autofocus (der Cursor wird automatisch in dieses Feld gesetzt)
  • autocomplete

Die Attribute required und pattern werden für die Validierung der Input-Felder verwendet, dies alles ohne JavaScript.

required
definiert das Input-Feld als Pflichtfeld,

pattern
Hier kann man mittels regular expressions die Validierungsregel für das jeweilige Input-Feld festlegen. Das neue Email Input-Feld validiert sich selbst.

Das folgende Beispiel

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        input:invalid
        {
            background: #fff;
            border-color: #f00;
        }
        textarea:invalid
        {
            background: #fff;
            border-color: #f00;
        }
    </style>
</head>
<body>
    <header>
        <h1>HTML5: Validierung </h1>
        Die Validierung erfolgt ohne Javascript mit regular expressions
    </header>
    <article class="post">
        <form action="#" method="post" id="kontaktformular">
            <fieldset>
                <legend>Kontaktformular</legend>
                <p>
                    <label for="name">Name</label><br />
                    <input type="text" name="name" id="name" value="" required />
                </p>
                <p>
                    <label for="email">Email-Adresse</label><br />
                    <input type="email" name="email" id="email" value="" required />
                </p>
                <p>
                    <label for="rechnungsnummer">Rechnungsnummer</label><br />
                    <input type="text" name="rechnungsnummer" id="rechnungsnummer" value="" required
                        pattern="^[1-9]+[0-9]*$"/>
                </p>
                <p>
                    <label for="message">Nachricht</label><br />
                    <textarea name="message" id="message" cols="20" rows="5" required></textarea>
                </p>
                <p>
                    <input type="submit" name="submit" value="senden" />
                </p>
            </fieldset>
        </form>
    </article>
</body>
</html>

erzeugt folgende Seite

image

posted @ Thursday, February 07, 2013 12:20 PM | Feedback (1)
Tuesday, February 05, 2013
HTML5 Einbinden von Audio- und Videodateien

In HTML5 können Audio- und Video-Elemente direkt eingefügt werden, es sind keine Flash-Plugins mehr möglich:

Beispiele:

<audio controls>
   <source src="Alma.mp3" type="audio/mp3" />
  
<p>Ihr Browser unterstützt kein HTML5 Audio-Tag</p>
</audio>

<video controls width="450">
  
<source src="Volcadas.mp4" type="video/mp4" />
  
<p>Ihr Browser unterstützt kein HTML5 Video-Tag</p>
</video>


sieht dann so aus:

image

posted @ Tuesday, February 05, 2013 11:56 AM | Feedback (0)
Saturday, February 02, 2013
CSS3 Schatten

Mit CSS3 lassen sich jetzt um Objekte einfach Schatten legen.

Die CSS3-Syntax hierfür lautet: box-shadow: 15px 15px 15px #333;

Der folgende Code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body {
            padding: 40px;
        }

        #bereich1 {
            text-align: center;
            width: 200px;
            border: 2px solid red;
            float: left;
            background-color: #fff;
            margin-right: 40px;
        }

            #bereich1 h2 {
                margin: 0;
                color: red;
                font-size: 30px;
            }

            #bereich1 h3 {
                margin: 0;
                background-color: red;
                color: #fff;
            }

        #bereich1 {
            box-shadow: 15px 15px 15px #333; /* Standard */
            -moz-box-shadow: 15px 15px 15px #333; /* Firefox */
            -webkit-box-shadow: 15px 15px 15px #333; /* WebKit */
            -o-box-shadow: 15px 15px 15px #333; /* Opera */
        }

        #textbox {
            -moz-box-shadow: 10px 10px 10px #333;
            -webkit-box-shadow: 10px 10px 10px #333;
            -o-box-shadow: 10px 10px 10px #333;
            box-shadow: 10px 10px 10px #333;
            background-color: aliceblue;
        }
    </style>
</head>
<body>
    <div>
        <section id="bereich1">
            <h3>Sonderangebot</h3>
            <h2>nur heute</h2>
        </section>
        <section>
            <form action="#" method="post">
                <input type="text" id="textbox" />
            </form>
        </section>
    </div>
</body>
</html>

erzeugt diese Seite:

image

 

Link:
http://www.css3-generator.de/box-shadow.html

posted @ Saturday, February 02, 2013 11:07 AM | Feedback (0)