Hoe ik het heb gedaan: How to Create a sticker-lint in 3 stappen

Dinsdag, 2 december, 2008

De sticker (of lint) zijn de beelden die zijn gepositioneerd in de rechterbovenhoek of linker bovenhoek, en ze vormen gezamenlijk een band hoek. Er zijn verschillende soorten, van eenvoudige statische beelden naar de meest spectaculaire Flash-films. Soms zijn zo gebouwd zijn verblijf in hun standpunt, zelfs wanneer u de inhoud van uw browservenster.
Als u niet wilt toevertrouwen aan een dienst als QuickRibbon.com, maar willen bouwen aan een lint helemaal voor jou, hier zijn 3 eenvoudige stappen te volgen.

1. We maken het beeld

Allereerst maken we de afbeelding die we willen zetten in een hoek, rechts of links. De afbeelding hieronder weergegeven, om 163x163 pixels, ecostruita naar de linkerbovenhoek.

Sticker Ribbon

Om het effect volledige overlapping moet kiezen op het moment van de redding, een formaat dat voorstander van transparantie, zoals GIF-of PNG.

2. De HTML-code

Opgeslagen ons imago hebben wij in onze pagina, inwikkeling de tag img met een div container die u kunt gebruiken om de afbeelding in:

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

Als onze sticker moet een link, kunnen we gebruik maken van de tag map om een kwetsbaar gebied dat is niet rechthoekig. De sticker die in dit voorbeeld, in feite, je hebt een schuine en transparantie benadrukt de contouren perfect. Het zou daarom onjuist om te klikken op een leeg gebied door simpelweg toevoegen van een tag a introns. Dan gebruiken we deze syntaxis:

PLAIN TEXT
HTML:
  1. > <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" usemap = "#ribbonlink" > </div> <div "ribbon" klasse => <img src = "ribbon.gif" title = "Ribbon Test" width = "163" hoogte = "163" grens usemap = "0" = "#ribbonlink"> </ div>
  2. > <area shape = "poly" coords = "163,0,0,163,0,129,129,0" href = "http://undolog.com" > </map> <map "ribbonlink" naam => <area vorm = "poly" coords = "163,0,0163,0129129,0" href = "http://undolog.com"> </ kaart>

Het kenmerk coords area worden de coördinaten van onze lint.

3. de NOS

Nu voegen we de definities van de stijlen waardoor de sticker van onze positie op de pagina goed:

PLAIN TEXT
CSS:
  1. div.ribbon (
  2. ; standpunt: 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)

Als we willen dat het lint blijft "appiccicato" naar de video, zelfs als het venster te schuiven, simpelweg wijzig het type absolute stijl position fixed

PLAIN TEXT
CSS:
  1. div.ribbon (
  2. ; standpunt: vastgesteld;
  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)

Opmerking: het type fixed in stijl position tot voor kort werd niet ondersteund door alle browsers. Om het effect, in feite werd gedwongen gebruik te maken van een Javascript-functie die op regelmatige tijdstippen gecontroleerd is de stroom van de inhoud van het venster en de positie van het lint om de indruk te wekken te blijven in wezen immobiel is. Gelukkig, vandaag, met wat verouderde versie van Explorer, alle browsers ondersteunen het type fixed

Related Post

Tags: JavaScript,
Geplaatst in CSS, Internet, Javascript, Ontwikkeling, Tutorials | Geen commentaar "

Beste Technisch Blog Italiaans: editie 2008-2009

Donderdag 27 november 2008

image Ik had het genoegen, zo niet de eer te worden opgeroepen om deel te nemen aan de jury voor Best Tech Blog, een initiatief van Cristiano Fino en bereid te belonen, inderdaad, de beste Italiaanse technische blog. Zoals geschreven door Wolf 'geen link naar iedereen, geen truc te beklimmen classfiche, alleen een gezonde concurrentie. "
Lees de regels van de concurrentie en als uw blog heeft kaarten tot sla de inscripties zijn open van 8-29 december 2008! Indien gewenst, kunt u bijdragen aan de verspreiding van het toevoegen aan uw blog van een badge die we gemaakt voor de gelegenheid.
De jury van deze "concurrentie" voor de jaren 2008-2009, bestaat onder andere door:

en, uiteraard, uit Cristiano Fino, als voorzitter (die ik wil bedanken voor het vertrouwen dat accordatami). Ik maak van deze gelegenheid gebruik te maken complimenten aan de hele groep van Best Tech Blog, die beheerd wordt in zeer korte tijd, waardoor in de late uurtjes om te beseffen wat er is slechts een idee. Een uitstekend, en misschien zeldzame demonstratie van een goed gesorteerde groep werknemers : D Verantwoordelijke van coach : D Ik hoop alleen te zijn, nell'insolita als jurylid ...

Related Post

blog, John Matthew, Tech Blog, Paolo Mainardi, Wolf
Opgericht Events & Initiatives, Internet, Ontwikkeling, Technologie | 9 reacties'

Als IE6 ondergaan en gelukkig leven

Woensdag 26 november, 2008

Altijd vinden sommige "ziekte" als belediging voor "compatibiliteit tussen browsers." Daarnaast, en ik heb nog geen inzicht in de werkelijke reden, van alle browsers die dit kennen van de meeste "onaangenaam" hij blijft altijd: Microsoft Internet Explorer 6! Helaas is de release van IE 6 is nog steeds in omloop en zijn er vaak meldingen van problemen met het weergeven van pagina's.
Een Web Developer moeten organiseren, zodat u over alle instrumenten voor de controle en verificatie van hun (zweet) werkt op alle mogelijke browser (en platforms) beschikbaar. Microsoft Internet Explorer, de meeste van de anderen, maakt deze taak moeilijker omdat - nu - u nodig hebt om na te gaan of hun webpagina's met de meest recente versie 8 (nog in beta) is met eerdere versies, zoals de 5,5 of 6 . Er zijn verschillende manieren om samen te leven verschillende versies van Explorer (zie Gebruik Microsoft Internet Explorer 6 en 7 tegelijk) en anders zijn er ook uitstekend (hoewel ietwat 'slow) diensten online.

image

Een andere goede mogelijkheid, die goed werkt op Windows Vista, wordt vertegenwoordigd door IETester, een volledig gratis en gebouwd door de ontwikkelaars DebugBar en Companion.JS. IETester, hoewel nog in de testfase en enkele crash in een hinderlaag, kan snel na te gaan of onze pagina's - tegelijkertijd - zowel op Ie5.5, IE6, IE7 en IE8 bèta.

Patch CSS

Bij gebruik van IETester vinden we een fout in stijlen, dat is een ander tussen IE6 en IE7 of Firefox en IE6, bijvoorbeeld, vond de oplossing moeten we ervoor zorgen dat alleen IE6 gebruikt de nieuwe definitie. Voor mij is bijvoorbeeld gebeurd met een marge! Ik had een klasse die de juiste marge te 28px en op alle browsers, het resultaat was identiek zijn, behalve met IE6! Op de laatste, als je dezelfde lay-out, moest ik gebruik maken van een waarde van 8px.
Een zeer eenvoudige, makkelijk te onthouden en heel direct het probleem op te lossen, is het "overschrijven" onze stijl het uploaden van een ander bestand ad hoc alleen als de browser is - gevreesde - IE6:

PLAIN TEXT
CSS:
  1. / ** ___ Bestand ie_override.css
  2. * Gebruik dit bestand te overschrijven van een stijl
  3. * /
  4. :8px } div.mystyle (margin-left: 8px)

PLAIN TEXT
HTML:
  1. <! - Styles voor alle browsers ->
  2. href = "css/style.css" type = "text/css" > <link rel = "stylesheet" href = "css/style.css" type = "text/css">
  3. <! - Styles alleen voor IE6 ->
  4. = "stylesheet" type = "text/css" href = "css/ie_override.css" / > < ! [ endif ] -- > <!--[ Indien lt IE 7]> <link rel = "stylesheet" type = "text/css" href = "css/ie_override.css" /> <! [Endif] ->

Related Post

browser CSS, Web-,
Geplaatst in CSS, Internet, Software, Ontwikkeling, Windows Vista | 3 reacties »

Pillolibri: mini boeken over Photoshop Illustrator

Dinsdag, 25 november 2008

Pillolibri

Vasta David dacht dat veel mensen proberen meestal zeer specifieke onderwerpen, en vervolgens een boek te lezen kan te veeleisend. Vandaar het idee om een serie boeken zeer compacte (10 tot 40 pagina's maximum), die nu beschikbaar zijn, zowel op papier, zowel in downloaden (tegen een zeer lage prijs).
De argumenten zijn altijd erg verschillend, de eerste 5 Pillolibri zijn gewijd aan de volgende onderwerpen:

  • Maak 3D-objecten met Illustrator
  • Fotografie: de basics
  • Het ontwerpen van een handelsmerk
  • Home Banking met BancoPosta
  • VR-beelden met Cubic Converter

Ik Pillolibri worden gekenmerkt door een duidelijke en directe taal, en zijn beschikbaar op Lulu, met kleur binnenzijde: op deze manier het screenshot, maar ook foto's en illustraties bij de tekst, zijn veel meer aantrekkelijk!

Related Post

David
Opgericht Events & Initiatives, Graphics & Design | 1 reactie »

Skypemote versie van Adobe AIR: 1000 downloaden

Maandag 24 november, 2008

Skypemote versie van Adobe AIR

Related Post

Downloaden, Mac
Gemaakt AIR Evenementen en Activiteiten, Graphics & Design, Internet, Ontwikkeling, Technologie | Geen commentaar "

Zeer kort fragment: Wordpress, aparte klassen in twee kolommen

Woensdag 19 november, 2008

Geïnspireerd door Wordpress Hack # 2 - Scheid de categorieën in de kolommen in de zijbalk kan het nuttig zijn "break" in twee kolommen in de lijst van categorieën van Wordpress. Als de volgorde is dat we van links naar rechts, namelijk CAT1 | cat2 (hoofd) cat3 | cat4 (hoofd) enz ... er is geen noodzaak voor het gebruik van een PHP-code, maar door te spelen met stijlen instellen van de tag li float:left en de "afsluiting" met de juiste width tag ul om het vervoer te sturen, krijgt u de volgende li In de gevallen waarin de css liever niet krijgen, bijvoorbeeld in de volgorde CAT1 | cat3 (hoofd) cat2 | cat4, kunnen we gebruik maken van deze eenvoudige code:

PLAIN TEXT
PHP:
  1. ( "<br />" ,wp_list_categories ( 'title_li=&echo=0&depth=1&style=none' ) ) ; $ Katten = exploderen ( "<br />", wp_list_categories ( 'title_li = = 0 & & echo diepte = 1 & style = none'));
  2. ( ( sizeof ( $cats ) - 1 ) / 2 ) ; $ Midden = round ((sizeof ($ katten) - 1) / 2);
  3. ( $cats , 0 , $middle ) ; $ Cats_left = array_slice ($ katten, 0, $ midden);
  4. ( $cats , $middle , - 1 ) ; $ Cats_right = array_slice ($ katten, $ midden - 1);
  5. . implode ( '</li><li>' , $cats_left ) . '</li></ul>' . echo '<ul class="left"> <li>'. implode ( '</ li> <li>', $ cats_left). "</ li> </ ul> '.
  6. ( '</li><li>' , $cats_right ) . '</li></ul>' ; '<ul class="right"> <li>'. implode ( '</ li> <li>', $ cats_right). "</ li> </ ul> ';

Related Post


Geplaatst in CSS, Internet, PHP, Ontwikkeling, WordPress | 1 reactie »

Adobe AIR en de API FeedBurner: reloaded

Dinsdag 18 november, 2008

Ik rush van hoge tutorial Napolux, Flex 3, Adobe AIR en de FeedBurner API, die laat zien hoe het schrijven van een eenvoudige applicatie (of widget) met behulp van Adobe AIR Flex 3, aan te geven hoe het precies hetzelfde ding met behulp van Adobe Flash CS3. Indien u dat wenst, ook kunt u gebruik maken van de uitbreiding voor het maken van Adobe AIR-toepassingen. Het is niet nodig voor de toepassing van deze tutorial, bouwen de toepassing executable als AIR, kunt u de code voorgesteld als een eenvoudige Flash movie from "aangebracht" aan uw webpagina's.

Flex vs Flash

Hoewel Adobe AIR waarderen hoe technologie en hoe deze werd uitgevoerd in platforms HTML (Dreamweaver), Flash en Flex, zijn niet "nog" tamelijk positief tegenover Flex! Ik ben niet een vergelijking te maken met Flash Flex, ondanks de vele gemeenschappelijke kenmerken, maar ook veel verschillen. Maar ik heb niet echt begrip voor de politieke Adobe op deze spin-off soms onzinnig. Ik had liever in plaats daarvan het creëren van een unieke omgeving (vlas) ontwikkeling en niet deze "nutteloze" scheiding. Bovendien is het een goede programmeur, die op den duur ook "visuele" Ik heb er niet veel zoals Flex en het lijkt gedoemd te gevaarlijk geworden vergelijkbaar met Visual Basic, die onder andere erg goed en weet dat ik werkte voor vele jaren. Kortom, Flex ik echt niet begrijpen en ik heb niet begrepen wat Adobe wil doen met deze tak. Als Flex wordt vermeld als de ideale omgeving om te schrijven RIA wat het lot van Flash? Alle functies van Flex, eigenlijk niet beschikbaar "rechtstreeks" in Flash, kunnen - indien u wenst - worden opgenomen zonder dat aan meerdere licenties kopen voor de ontwikkeling van - uiteindelijk - de exacte hetzelfde.

Lees verder ... "

Related Post

Tags: Adobe, de Flash, Flash Google Code,
Gemaakt AIR, Actionscript 3.0, Flash CS3, Internet, Ontwikkeling, Tutorials | 1 reactie »

Zeer korte truc: 3 output functie in PHP

Dinsdag 18 november, 2008

Binnen een PHP functie die u kunt afdrukken op drie verschillende manieren:

PLAIN TEXT
PHP:
  1. <? Php
  2. $valore = 'Ciao' ) { miaFunction functie ($ value = 'Hello') (
  3. >
  4. <ul>
  5. ; ?> --> <! - <li> <? Php echo $ value;?> ->
  6. <li> <? = $ value> </ li>
  7. </ Ul>
  8. <? Php
  9. )
  10. >

Of:

PLAIN TEXT
PHP:
  1. $valore = 'Ciao' ) { miaFunction functie ($ value = 'Hello') (
  2. . $valore . '</li></ul>' ; $ O = '<ul> <li>'. $ Value '. </ Li> </ ul>';
  3. ; echo $ o;
  4. )

Of:

PLAIN TEXT
PHP:
  1. $valore = 'Ciao' ) { miaFunction functie ($ value = 'Hello') (
  2. ; $ O = "<ul> <li> $ value </ li> </ ul>";
  3. ; echo $ o;
  4. )

Related Post

PHP, tips-&-trucs,
Geplaatst op het internet, PHP, Ontwikkeling | Geen commentaar "

SWFObject op Google AJAX-API Libraries

Vrijdag 14 november 2008

swfobject Google AJAX-API Libraries breidt haar vloot van bibliotheken en het kader te SWFObject, nuttig in te voegen en te manipuleren Flash-filmpjes op onze webpagina's. SWFObject is ook beschikbaar als een plugin voor Wordpress, wanneer ik schrijf, echter, is niet Plugin nog niet bijgewerkt voor het laden van de code en het "archief" Google. Een korte, dus ik neem aan zal worden afgegeven, een nieuwe versie van Plugin ... tenzij u zelf wilt bewerken tussentijd ...

Inclusief SWFObject Google AJAX-API Libraries

Net als bij de andere bibliotheken in Google AJAX-API Libraries kunnen gebruik maken van de URL of het absolute meotdo google.load()

PLAIN TEXT
HTML:
  1. <! - PERFECTE URL ->
  2. src = "http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js" > </script> <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"> </ script>
  3. > <script type = "text/javascript">
  4. swfobject.embedSWF ( "main.swf", "main", "231", "132", "8.0.0");
  5. </ Script>

PLAIN TEXT
HTML:
  1. <! - Google.load () ->
  2. > </script> <script src = "http://www.google.com/jsapi"> </ script>
  4. google.load ( "swfobject", "2.1");
  5. google.setOnLoadCallback (function () (
  6. swfobject.embedSWF ( "main.swf", "main", "231", "132", "8.0.0");
  7. ));
  8. </ Script>

Related Post

google, Google AJAX-API
Geplaatst in Flash, Internet, Javascript, Ontwikkeling | 1 reactie »

Vaststelling van een post

Dinsdag, 11 november, 2008

Vaststelling van een post Onlangs ontving ik verschillende verzoeken om opneming van bannerreclame binnen undolog.com. Ik besloot dus te gaan en uit rioganizzare de advertentieruimte op deze blog, misschien wel de minder invasieve in omloop. In de banner-advertenties (zoals Google AdSense) en donaties via PayPal niet proberen om wat extra inkomsten, maar er moet een blog zijn middelen nodig, en wat hulp is altijd welkom.
Hoe dan ook, ik heb altijd getracht niet op "papier" in de blog banner overal verspreid en in welke vorm dan ook, met een lay-out zo schoon mogelijk en verlaten van het artikel als centraal element.

Het idee kwam bij me op dat in het achterhoofd, in een poging om het juiste evenwicht tussen de banner en verspreid de mogelijkheid van sponsoring, is het nemen van een post! In de praktijk kunt u vragen om specifieke post (meer visa dan in de lijst aan het einde van deze blog) de opname in het hoofd en / of het einde van uw advertenties plaatsen, mogelijk in verband met dezelfde functie.

Bijvoorbeeld, in de herinnering waarin ik een bericht schrijft meer visa blijft Putting Google Map in hun web, met 17.410 views. Als u producten of diensten met betrekking tot Google Map of op enigerlei wijze iets wordt afgedaan aan het internet, ontwikkeling en technologie, kunt u een verzoek tot opname in het hoofd en / of het einde van uw bericht advertenties in het formaat dan 640x80 pixels.

Related Post

Google AdSense,
Opgericht Events & Initiatieven | 2 reacties'