Ibland ser man en hemsida med snygga färger som man vill använda i sin design. Med tillägget ColorZilla till Firefox kan man enkelt få fram färgkoderna bara genom att klicka på färgen.
Hämta tillägget ColorZilla här >>
Eyedropper
Klicka på pipett-symbolen längst ner till vänster i webbläsaren eller håll ner Shift- och Escape-tangenterna för att få fram eyedroppern. Klicka på färgen du vill spara färgkoden för. För att lättare kunna pricka in färger på små ytor så Zooma in sidan först genom att klicka Ctrl ++. Varje gång du klickar på en färg så sparas den under History som du hittar om du dubbelklickar på pipett-symbolen, väljer Palettes och den första drop-down-menyn.
Förutom eyedroppern finns flera andra funktioner som t ex paletter och färganalys.
Hjälp för ColorZilla >>
torsdag 23 oktober 2008
onsdag 22 oktober 2008
FTP-program
tisdag 21 oktober 2008
Statusbar med info om sidan
Extended Statusbar är ett Firefox-tillägg som i statusbaren (längst ner i webbläsaren) visar:
- antal bilder på sidan
- Antal procent i kB av sidan som laddats
- Hur fort sidan laddades i Kb/s och i sekunder
Extended Statusbar >>
- antal bilder på sidan
- Antal procent i kB av sidan som laddats
- Hur fort sidan laddades i Kb/s och i sekunder
Extended Statusbar >>
måndag 20 oktober 2008
Visa viktiga seo-parametrar
Med Firefox-tillägget SeoQuake kan du välja att visa olika parametrar viktiga i sökmotoroptimeringssammanhang för en sida du besöker eller för varje sökresultat i Google. Det kan vara t ex PR (Googles pagerank), I (antal indexerade sidor i olika sökmotorer), keyword density, hur gammal sidan är mm. Värdena kan sedan sparas i csv-format (som kan öppnas med t ex Excel).
Ett kanonbra tillägg för sökmotoroptimeraren!
SeoQuake
Ett kanonbra tillägg för sökmotoroptimeraren!
SeoQuake
måndag 6 oktober 2008
Vänsterställd punktlista bredvid flytande element
Jag har modifierat min CSS för vänsterställda punktlistor och lagt till overflow:auto på ul-taggen samt flyttat ner margin-left till li-taggen för att listan ska bli snygg även bredvid flytande element.
ul,ol{
margin: 0;
padding: 0;
overflow: auto;
}
ul li, ol li{
line-height:18px;
padding-bottom:8px;
margin-left: 17px;
}
ul,ol{
margin: 0;
padding: 0;
overflow: auto;
}
ul li, ol li{
line-height:18px;
padding-bottom:8px;
margin-left: 17px;
}
Snygg mjuk landning med studs i Flash
Vill man att t ex en bild ska ramla ner uppifrån ner på scenen och stanna så blir det snyggare och ser mer naturligt ut om objektet landar mjukt.
1. Gör om din bild till en symbol.
2. Placera din bild ovanför scenen.
3. Markera frame 20 och klicka F6 för att lägga in en keyframe.
4. Flytta ner din bild på scenen.
5. Högerklicka någonstans på den grå listen i ditt lager på tidslinjen och 6. välj Create Motion Tween. Om en heldragen linje/pil visas så har du gjort rätt.
7. Markera frame 1. I Properties-menyn ändrar du Ease till -65. Detta gör att bilden rör sig snabbare desto närmare "landningsstället" den kommer.
8. Markera frame 25 och klicka F6 för att lägga in en keyframe.
9. Flytta upp din bild 20 pixlar upp på scenen.
10. Högerklicka mellan den andra och tredje keyframen och välj Create Motion Tween.
11. Markera frame 20. I Properties-menyn ändrar du Ease till 25.
12. Markera frame 25.
13. Flytta ner din bild 20 pixlar.
Fortsätt skapa några till keyframes med motion tween mellan. Flytta tillbaka bilden exakt lika många pixlar du flyttade upp den. Ha färre frames mellan varje keyframe och minska även på easen till -5 respektive 0 på sista framen så att det ser ut som bilden saktar ner tills den stannar helt.
Om du låter bilden studsa två gånger och sedan stanna så blir det sex keyframes där du kan sätta ease (från första keyframe räknat): -60, 20, -10, 10, -5, 0.
1. Gör om din bild till en symbol.
2. Placera din bild ovanför scenen.
3. Markera frame 20 och klicka F6 för att lägga in en keyframe.
4. Flytta ner din bild på scenen.
5. Högerklicka någonstans på den grå listen i ditt lager på tidslinjen och 6. välj Create Motion Tween. Om en heldragen linje/pil visas så har du gjort rätt.
7. Markera frame 1. I Properties-menyn ändrar du Ease till -65. Detta gör att bilden rör sig snabbare desto närmare "landningsstället" den kommer.
8. Markera frame 25 och klicka F6 för att lägga in en keyframe.
9. Flytta upp din bild 20 pixlar upp på scenen.
10. Högerklicka mellan den andra och tredje keyframen och välj Create Motion Tween.
11. Markera frame 20. I Properties-menyn ändrar du Ease till 25.
12. Markera frame 25.
13. Flytta ner din bild 20 pixlar.
Fortsätt skapa några till keyframes med motion tween mellan. Flytta tillbaka bilden exakt lika många pixlar du flyttade upp den. Ha färre frames mellan varje keyframe och minska även på easen till -5 respektive 0 på sista framen så att det ser ut som bilden saktar ner tills den stannar helt.
Om du låter bilden studsa två gånger och sedan stanna så blir det sex keyframes där du kan sätta ease (från första keyframe räknat): -60, 20, -10, 10, -5, 0.
Vertical align av element på sida
Här har jag en div-box (wrapper) som jag m h a CSS placerar i centrum på skärmen. Observera att värdena på margin är hälften av höjden och bredden.
div#wrapper {
width: 500px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -100px;
}
div#wrapper {
width: 500px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -100px;
}
Styla dina länkar rätt
Det är viktigt att ange klasserna i rätt ordning eftersom det är den sista klassen i din CSS som kommer att användas om en länk har fler än en klass. På engelska använder man uttrycket LoVe/HAte för att komma ihåg ordningen:
a:link {
color: #0000FF;
}
a:visited {
color: #000000;
}
a:hover {
color: #FF0000;
}
a:active {
color: #006600;
}
Centrera innehållet på skärmen
Vill du ha ditt innehåll i mitten av skärmen så lägg det i en div-tagg. I ditt CSS anger du text-align:center; på body och margin:0 auto; till div-taggen som du vill ha centrerad. Lägg till text-align:left; till div-taggen för att kompensera för centreringen på body.
CSS:
CSS:
body {
text-align: center; /* IE */
}
#kontainer {
width:800px;
margin: 0 auto; /* centrerar */
text-align: left; /* kompenserar body center */
}
Säkra din OsCommerce-shop - döp om katalogen Admin
För att försvåra för hackers att få kontroll över din OsCommerce-shop så döp om katalogen Admin. Kom ihåg att ändra till din nya sökväg i filen admin/configure.php (konstanterna DIR_WS_ADMIN och DIR_FS_ADMIN).
Tänk på att även ta bort File-managern.
Tänk på att även ta bort File-managern.
Säkra din OsCommerce-shop - ta bort File-manager
Av säkerhetsskäl bör man ta bort File-managern i Admin på OsCommerce för att förhindra att andra kan ta kontroll över filerna.
Ta bort länken som ligger i admin/includes/boxes/tools.php
Radera sedan filen admin/file_manager.php
Byt även namn på katalogen Admin för att försvåra för hackers att ta sig in.
Ta bort länken som ligger i admin/includes/boxes/tools.php
Radera sedan filen admin/file_manager.php
Byt även namn på katalogen Admin för att försvåra för hackers att ta sig in.
301 redirect [R=301] med villkor (RewriteCond):
Skicka fil-1.html till fil-2.html om den har någon querystring och lägg på querystringen
RewriteCond %{QUERY_STRING} !^$
RewriteRule fil-1.html fil-2.html?%{query_string} [R=301,L]
Exempel: fil-1.html?go=home&do=navigate till fil-2.html?go=home&do=navigate
Flytta alla filer i mappen bilder som har querystring go= med valfria värden och lägg på värdet
RewriteCond %{QUERY_STRING} ^go=(.*)$ [NC]
RewriteRule bilder/$ media/index.php?go=%1 [R=301,L]
Skicka till en fil när ingen fil (endast mapp) anges
RewriteRule bilder/$ bilder/test.php [R=301,L]
Exempel: http://www.blogger.com/bilder/ till http://www.blogger.com/bilder/test.php
RewriteCond %{QUERY_STRING} !^$
RewriteRule fil-1.html fil-2.html?%{query_string} [R=301,L]
Exempel: fil-1.html?go=home&do=navigate till fil-2.html?go=home&do=navigate
Flytta alla filer i mappen bilder som har querystring go= med valfria värden och lägg på värdet
RewriteCond %{QUERY_STRING} ^go=(.*)$ [NC]
RewriteRule bilder/$ media/index.php?go=%1 [R=301,L]
Skicka till en fil när ingen fil (endast mapp) anges
RewriteRule bilder/$ bilder/test.php [R=301,L]
Exempel: http://www.blogger.com/bilder/ till http://www.blogger.com/bilder/test.php
Testa först 301 redirect [R=301] med [R]
När du arbetar med din .htaccess och råkar göra fel med t ex 301 redirects [R=301] kan du få stora problem. När webbläsaren har följt din anvisning så är flytten permanent vilket innebär att även om du ändrar dina 301:or igen så kan det ta lång tid innan det märks i webbläsaren. För att undvika detta så använd [R] istället för [R=301] tills du är säker på att dina regler fungerar.
301 redirect [R=301]
Flytta allt i underkatalog till roten:
RewriteRule ^underkatalog / [R=301,L]
Ex http://blogger.com/underkatalog/ går till http://blogger.com/
Flytta alla htm- och html-filer till roten:
RewriteRule (.+)\.html? / [R=301,L]
Ex http://blogger.com/fil1.htm går till http://blogger.com/
Ex http://blogger.com/fil2.html går till http://blogger.com/
Plocka bort eventuell querystring genom att lägga till ?
RewriteRule (.+)\.html? /? [R=301,L]
Ex http://blogger.com/fil1.htm?go=bort går till http://blogger.com/
Flytta alla php-filer till roten:
RewriteRule (.*)\.php$ /? [R=301,L]
Ex http://blogger.com/fil1.php går till http://blogger.com/
RewriteRule ^underkatalog / [R=301,L]
Ex http://blogger.com/underkatalog/ går till http://blogger.com/
Flytta alla htm- och html-filer till roten:
RewriteRule (.+)\.html? / [R=301,L]
Ex http://blogger.com/fil1.htm går till http://blogger.com/
Ex http://blogger.com/fil2.html går till http://blogger.com/
Plocka bort eventuell querystring genom att lägga till ?
RewriteRule (.+)\.html? /? [R=301,L]
Ex http://blogger.com/fil1.htm?go=bort går till http://blogger.com/
Flytta alla php-filer till roten:
RewriteRule (.*)\.php$ /? [R=301,L]
Ex http://blogger.com/fil1.php går till http://blogger.com/
.htaccess
.htaccess är en konfigurationsfil på Apache web-servrar som man använder bl a som hjälp vid sökmotoroptimering (genom t ex omskrivning av filnamn), för att omdirigera filer och kataloger, för att lösenordsskydda kataloger, för att förhindra att andra stjäl t ex bilder från sin hemsida osv. .htaccess-filen konfigurerar den katalog och filerna i katalogen den ligger i. Den består av en enkel textfil som du kan editera i t ex Anteckningar.
Vanligt är att man använder .htaccess för att visa en egen s k 404-sida - felsida istället för den tråkiga som visas som standard.
Gör din egen 404-felsida
Skapa en tjusig html-sida där du skriver t ex "Du har kommit fel!" och döp till 404.html. Öppna sedan Anteckningar och skriv in:
ErrorDocument 404 /404.html
Välj sedan Arkiv -> Spara som. I Filnamn skriver du .htaccess och i Filformat väljer du Alla filer (*.*). Skicka sedan upp filerna via FTP till roten på din hemsida. Om någon skriver in namnet på en sida som inte finns på din sajt så kommer de att hamna på din egen 404-felsida istället för standardsidan.
Läs mer om .htaccess på Apaches hemsida: http://httpd.apache.org/docs/1.3/howto/htaccess.html
Prenumerera på:
Inlägg (Atom)