Wie ich es gemacht habe: wie man ein Aufkleber-Band in 3 Schritten

Dienstag, 2. Dezember 2008

Der Aufkleber (oder Band) sind die Bilder, die sich in der oberen rechten Ecke oder oben links, und sie bilden gemeinsam eine Band Winkel. Es gibt verschiedene Arten, von einfachen Bildern zu den schönsten Flash-Filme. Manchmal sind sie so konzipiert, um ihre Position auch bei navigieren Sie den Inhalt des Browser-Fenster.
Wenn Sie nicht möchten, dass sich auf Dienstleistungen wie QuickRibbon.com, sondern wollen ein Band der eigenen, hier sind 3 einfachen Schritten zu folgen.

1. Wir schaffen das Bild

Zunächst erstellen wir das Bild, das wollen wir in einer Ecke, links oder rechts. Das Bild unten, bis 163x163 Pixel, ecostruita auf der oberen linken Ecke.

Ribbon Sticker

Um die volle Wirksamkeit der Überschneidung muss sich bei der Rettung, ein Format, das Transparenz, wie GIF oder PNG.

2. Der HTML-Code

Gespeicherte unser Image können wir es in unseren Seiten, die Umhüllung der das img mit einem div die Sie verwenden können, um das Bild in:

HTML:
  1. > <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" > </div> <div class = "ribbon"> <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0"> </ div>

Wenn unsere Aufkleber sollte ein Link, wir können den map um einen sensiblen Bereich, ist nicht rechteckig. Die Aufkleber, die in diesem Beispiel, in der Tat, Sie haben eine Neigung und Transparenz zeigt perfekt die Konturen. Es wäre daher unangemessen, lassen klicken Sie auf einen leeren Bereich, indem Sie einfach ein Tag a introno Bild. Dann haben wir mit dieser Syntax:

HTML:
  1. > <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" usemap = "#ribbonlink" > </div> <div class = "ribbon"> <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" usemap = "#ribbonlink"> </ div>
  2. > <area shape = "poly" coords = "163,0,0,163,0,129,129,0" href = "http://undolog.com" > </map> <map name = "ribbonlink"> <area Form = "poly" Coords = "163,0,0163,0129129,0" href = "http://undolog.com"> </ map>

Das Attribut coords area definiert die Koordinaten unserer Band.

3. der CSS

Nun fügen wir die Definitionen der Stile, die zulassen, dass unsere Aufkleber auf Ihrer Seite zu positionieren sie richtig:

CSS:
  1. div.ribbon (
  2. ; position: absolute;
  3. top: 0px; left: 0px;
  4. height: 163px; width: 163px;
  5. ;padding: 0 ; margin: 0; padding: 0;
  6. ; overflow: visible;
  7. ; float: none;
  8. } z-index: 10000)
  9. div.ribbonimg (
  10. ;padding: 0 ;margin: 0 ; border: 0; padding: 0; margin: 0;
  11. } background-image: none)

Wenn wir wollen, dass die Band zu bleiben "stecken" in der Video-, auch beim Scrollen Sie das Fenster, nur die Art absolute Stil position im fixed

CSS:
  1. div.ribbon (
  2. ; Position: fixed;
  3. top: 0px; left: 0px;
  4. height: 163px; width: 163px;
  5. ;padding: 0 ; margin: 0; padding: 0;
  6. ; overflow: visible;
  7. ; float: none;
  8. } z-index: 10000)

Hinweis: die fixed die im Stil position bis vor kurzem war es nicht von allen Browsern unterstützt. Um die Wirkung, in der Tat, war gezwungen, eine JavaScript-Funktion, dass in regelmäßigen Abständen kontrolliert die Strömung von den möglichen Inhalt des Fensters und ersetzen das Band, um den Eindruck zu bleiben im Wesentlichen unbeweglich. Zum Glück, heute, mit einigen veralteten Version von Explorer, von allen Browsern unterstützt die Art fixed

Verwandte Post

Adobe AIR und das API Feedburner: Reloaded

Dienstag, 18. November 2008

Ich nehme hohe Inspiration Tutorial Napolux, Flex 3 und Adobe AIR-APIs Feedburner, die zeigt, wie man eine einfache Anwendung (oder widget) Adobe AIR mit Flex 3, um zu zeigen, wie die Erreichung der gleichen Sache mit Adobe Flash CS3. Wenn Sie möchten, auch, können Sie die Erweiterung für die Erstellung von Adobe AIR-Anwendungen. Es ist nicht notwendig für die Zwecke dieses Tutorial, wie man die Anwendung ausführbaren AIR, können Sie mit dem vorgeschlagenen Code als eine einfache Flash-Film aus "gemacht", um Ihre Web-Seiten

Flash vs Flex

Obwohl die Adobe AIR-Technologie zu schätzen, wie und wie sie umgesetzt wurde Plattformen in HTML (Dreamweaver), Flash und Flex, sind nicht "noch" sehr gut gegenüber Flex! Ich möchte nicht, daß Vergleiche mit Flash Flex, trotz vieler Gemeinsamkeiten, aber auch viele Unterschiede. Aber ich habe nicht schätzen die politische Adobe auf diesem Spin-off manchmal unsinnig. Ich hätte es vorgezogen, stattdessen die Schaffung eines einheitlichen Umgebung (Flachs) die Entwicklung, und das nicht "nutzlos" Trennung. Außerdem ist, wie ein guter Programmierer, die auch "visuelle" Ich weiss nicht wie Flex, und es scheint, das zu gefährlich ähnlich wie Visual Basic, die unter anderem sehr gut und wissen, dass ich seit vielen Jahren. Kurz gesagt, Flex ich wirklich nicht verstehen, und ich verstand nicht, was Adobe möchte mit dieser Branche. Wenn Flex wird als das ideale Umfeld zu schreiben RIA, was das Schicksal von Flash? Alle Funktionen von Flex, tatsächlich nicht verfügbar "direkt" in Flash, könnte - wollen - eingefügt werden soll, ohne Kraft, mehrere Lizenzen zu entwickeln - am Ende - die gleiche Sache.

Lesen Sie weiter ... "

Verwandte Post

Actionscript 3.0 für Anfänger: Lektion # 4

Dienstag, 11. November 2008

Wir wieder unsere Codebeispiel TicTacToe (die ausschließlich auf Google-Code) und wir beginnen, um sie im Detail zu analysieren.

Import-Definitionen

Mit ActionScript 3.0 wurde eine gute Arbeit für die Reinigung und Unterkunft nell'alberatura Klasse (enthalten in den Paketen, package die während der Entwicklung. In anderen Programmiersprachen, wie C zum Beispiel, wenn Sie wollen, dass die Verwendung einer Funktion, die Sie muss explizit "Import" in den Code. Dieser Prozess der "Einfuhr" ist notwendig, damit der Compiler, dass alle Codes und Definitionen in Bezug auf die Funktionen, die wir benutzen wollen. In ActionScript 3.0, jedoch, Bildung import ist nicht zu verwechseln mit den entsprechenden C / C + + #include ActionScript 3.0 bietet Ausbildung include das ist identisch mit #include C / C + +. Letztere, in der Tat ", auch" der eigentliche Code, dass, wenn sie oder nicht, ist in die endgültige zusammengestellt. Bildung import ist die höchste Stufe und ist mehr "intelligente" erstellt. Es dient in erster Linie den Zugang zu den Klassen, ohne dass die vollständigen Namen ein. In alre Worten statt mit Formen, wie zB:

Actionscript:
  1. . MovieClip = new flash. display . MovieClip ( ) ; var myMC: flash. Display. movieclip = new Flash. Display. movieclip ();

Lesen Sie weiter ... "

Verwandte Post

Wordpress: Entfernen Sie das Menü

Samstag 1. November 2008

Es kann sinnvoll sein, in Zeiten, "obskur" einige der Menü von WordPress, vor allem wenn Sie haben eine Website / Blog für einen Kunden und nicht möchten, dass der Zugriff auf sensible Funktionen. Es gibt Plugins, die bereits diese Funktion, sondern auch für eine persönliche und vollständige Kontrolle, sehen wir im Detail, wie diese Funktion.
Wie immer sinnvoll, die Vorteile aus der Aktion zur Verfügung gestellt von Wordpress, in diesem Fall admin_menu Durch die globale Variable $menu kann auf die Liste des Menüs. Wir können das Menü von "Entfernen" auf zweierlei Weise: durch das Etikett oder über den Link, dass es Punkte (siehe kommentiert Aktien im Beispiel unten). In der vorgeschlagenen "verdeckt" das Menü-Design, Einstellungen und Plugins:

PHP:
  1. remove_menu_item Funktion () (
  2. ; global $ menu;
  3. / / Mit dem Label
  4. ( 'Design' , 'Impostazioni' , 'Plugins' ) ; $ Entfernt = array ( 'Design', 'Einstellungen', 'Plugins');
  5. / / Durch Links
  6. / / $ Entfernt = array ( "themes.php ',' Optionen-general.php ',' plugins.php ');
  7. $removes as $todel ) foreach ($ entfernt als Todėl $)
  8. $menu as $key => $sm ) if ( $sm [ 0 ] == $todel ) { unset ( $menu [ $key ] ) ; break ; } foreach ($ menu as $ key => $ sm) if ($ m [0] == $ Todėl) (unset ($ menu [$ key]); break;)
  9. / / Durch Links
  10. / / Foreach ($ menu as $ key => $ sm) if ($ m [2] == $ Todėl) (unset ($ menu [$ key]); break;)
  11. )
  12. / /
  13. , 'remove_menu_item' ) ; add_action ( 'admin_menu', 'remove_menu_item');

Mit dem Link als Schlüssel für die Beseitigung $sm[2] in Teilen kommentiert Code hier sorpra) ist nützlich, wenn es keine Gewissheit, die Sprache - Lage -, die installiert wurde, Wordpress. Mit dieser Technik, aber das Menü wird nur auf der Ebene der Schnittstelle, so können Sie immer noch Zugriff auf die Seite durch einen direkten Link.

Verwandte Post

jQuery: abgerundete Kanten auf die Bilder, um Überschneidungen

Donnerstag, 30. Oktober 2008

Aufgrund der unterschiedlichen Darstellung von den verschiedenen Browsern, die sich Microsoft Internet Explorer zu berücksichtigen, müssen wir immer auf Kunststücken für die Auswirkungen, die jetzt zu einem Standard. Die Multi-diskutiert abgerundeten Kanten sind ein klassisches Beispiel für die "Katastrophe" durch die vollständige Unfähigkeit, eine Norm für schwere Rendering von HTML / CSS. Es gibt viele Online-Lösungen, die es Ihnen ermöglichen, um die "Auswirkungen" (Auswirkungen dall'HTML Freistellung als abgerundeten Ecken, Schatteneffekte, Spiegelungen, etc. ...) mit Patches auf die Blätter von Stilen, spezielle Tricks mit dem Einsatz von div veredelten , JavaScript-Bibliotheken, die Verwendung von canvas etc. ...
Für rein Bildungseinrichtungen möchte ich erklären, weitere Technik (Cross-Browser), um die Kanten gerundet, um die Bilder:

Demo-und Source -

Lesen Sie weiter ... "

Verwandte Post

Wordpress: Schritt für Schritt, wie Sie ihre eigenen Login

Freitag, 24. Oktober, 2008

In diesem Tutorial werden wir sehen, wie man ein persönliches Login-Verfahren, mit Ajax Funktionalität mit jQuery. Es gibt mehrere Möglichkeiten, um Ihre Anmeldung bei Wordpress, zum Beispiel durch den Einsatz von Haken und Filter add_action() add_filter() Wir fahren zu einem Low-Level, auch wenn es Schnittstellen zu den Kernel, aber Wordpress. Auch stellen Sie sicher, dass die Validierung eines Benutzers Dupla per E-Mail / Passwort ein.

Warum ein Login?

  • In einigen Fällen lässt sich die Rückkehr uitle haben maximale Kontrolle über die Login-Seite, um ein benutzerdefiniertes Layout für unsere registrierten Benutzer. Sie können auch bereichern die Seite mit nützlichen Informationen, ein Logo von der klassischen "Haben Sie Ihr Passwort vergessen?"
  • Um den Zugang per E-Mail (wie oben gezeigt,) statt user_login Standard Wordpress
  • Zu können, geben Sie einen Login-Panel in der Seitenleiste des Blogs
  • Und schließlich, um ein Skelett - und eine Idee - für eine gute Plugin : D

Umgebung

In unserem Beispiel / Tutorial wird auf die Wurzel des Wordpress in einem Ordner mylogin Ich habe zwei PHP-Datei in diesen Ordner: index.php und logon.php Die erste enthält die Schnittstelle unserer Protokoll mit allen Features Javascript / jQuery wir dienen. Die zweite Datei logon.php wird der Code, um die Nutzer. Dann erstellen Sie einen Ordner css und innerhalb dieser Datei layout.css und einen Ordner images Innerhalb der Ordner Bilder wird eine klassische Ajax loader: createlo online AjaxLoad.info. Am Ende sollten Sie:

  • mylogin
    • index.php
    • logon.php
    • css
      • layout.css
      • Bilder
        • ajax-loader.gif

Lesen Sie weiter ... "

Verwandte Post

Sehr kurze Trick: undefined Werte in Javascript

Mittwoch, 22. Oktober 2008

Es ist ein abgekürzter Form, um "fliegenden" einen Wert in eine Variable, wenn ein anderer ist nicht definiert (undefined), wobei die logische ODER-Operator (| |) - Doppel-Rohr:

JavaScript:
  1. / / Pluto zeigt undefined
  2. var Pluto;
  3. ; var foo = Pluto | |'5 ';
  4. pippo ) ; alert (foo);
  5. / / Ergebnis: 5

Diese Technik ist nützlich, um Funktionen mit Parametern:

JavaScript:
  1. param ) { miaFunc Funktion (param) (
  2. ; var p1 = param | | 'Parameter';
  3. / / ...
  4. )

Aber wir müssen darauf achten, benutzen Sie dieses Formular als Null-Werte als 0 oder false sind falsch, weil der "Schuld" der logischen oder verwendet werden:

JavaScript:
  1. ; Pluto var = 0;
  2. ; var foo = Pluto | |'5 ';
  3. pippo ) ; alert (foo);
  4. / / Ergebnis: 5
  5. ; Pluto var = false;
  6. ; var foo = Pluto | |'5 ';
  7. pippo ) ; alert (foo);
  8. / / Ergebnis: 5
  9. ; Pluto var = 1;
  10. ; var foo = Pluto | |'5 ';
  11. pippo ) ; alert (foo);
  12. / / Ergebnis: 1

Verwandte Post

Wordpress: Verbesserung der Liste der Einträge

Mittwoch, 22. Oktober 2008

Die Standard-Template für Wordpress (wie andere) in der Regel eine alternative Layout für die Liste der Einträge. In der Standard-Template für eine solche Klasse ist css alt nach der Logik:

PHP:
  1. / / File comments.php
  2. $oddcomment ; ?>id= "comment-<?php comment_ID() ?>" > <li <? php echo $ oddcomment;?> id = "comment-<? php comment_ID ()?>>
  3. [...]
  4. / * Änderungen jeder anderen Kommentar zu einer anderen Klasse * /
  5. empty ( $oddcomment ) ) ? 'class="alt" ' : '' ; $ Oddcomment = (empty ($ oddcomment))? "Class =" alt "':'';

Dies bedeutet, dass der Tag li $oddcomment wird einmal leer ( "" und einmal class="alt" Eine Änderung könnte nützlich sein, eine andere Klasse, wenn es der Autor des Blogs an, um einen Kommentar:

Bild

Ich zum Beispiel habe ich den folgenden Code in die Datei comments.php:

PHP:
  1. <? Php
  2. $comment -> user_id == 3 ) ? ' $ Authcomment = ($ comment -> user_id == 3)? " ; authcomment':'';
  3. empty ( $classcomment ) ) ? ( ( $authcomment == '' ) ? ' alt' : '' ) : '' ; $ Classcomment = (empty ($ classcomment)) (($ authcomment =='')? "alt':''):'';
  4. >
  5. id= "comment-<?php comment_ID() ?>" > <li class = "<?=$ classcomment ?><?=$ authcomment?> "id =" comment-<? php comment_ID ()?>>

Die Zeile $comment->user_id==3 können je nach ID des Benutzers. Ich möchte nicht den Administrator, um den Blog, aber ich habe meine ID=3 In der Regel l ID ist 1 wenn Sie dieses Benutzers schreiben können: $comment->user_id==1 Auf diese Weise wird neben der Wechsel-Layout über die Kommentare von Besuchern, es ist sofort erkennbar Reaktion des Blogs.

Verwandte Post

Sehr kurze Trick: Zyklen für eine raschere in Actionscript

Mittwoch, 15. Oktober 2008

Actionscript in for sollten Sie immer mit Vorsicht. Zum Beispiel ist es gut, wir können Variablen benutzen, uint wenn Sie:

Actionscript:
  1. var i:uint = 0 ; i++; i < 100 ) { for (var i: uint = 0; i + +; i <100) (
  2. / / ...
  3. )

Sie können auch die - nicht immer bekannt - Form:

Actionscript:
  1. ; var i: uint = 0;
  2. / / ...
  3. ;  i++; i < 100 ) { for (i + +; i <100) (
  4. / / ...
  5. )

Verwandte Post

Actionscript 3.0: Film über Film

Dienstag, 14. Oktober 2008

Vor kurzem wurde ein Entwickler Flash / Actionscript bereitet, eine ähnliche Funktion wie ein Tooltip, sofort Auseinandersetzungen mit dem Problem der propoagazione Veranstaltungen zwischen movieclip überlagert. Wenn ein Film (B) Überschneidungen zu einem Film (A), der reagiert, zum Beispiel, auf einer Veranstaltung MouseEvent.Mouse_OVER bewegen Sie die Maus über den Film (B) der höchsten jeden Fall mehr abgefangen von movieclip (A):

Film über Film

Dieses Szenario zeigt die Notwendigkeit zu verhindern, dass die Überwachung von Veranstaltungen durch den Film (B). Dies kann auf false gesetzt false das Eigentum mouseEnabled

Actionscript:
  1. ; MCB. MouseEnabled = false;

Verwandte Post