Uppdaterad: 2010-01-31

Marcofolio.net tillagd

Introduktion

Här kommer en lista på några av världens bästa RSS-flöden för webbdesigners.

CSS

• CSS3.info (RSS Feed)
• CSS-Tricks (RSS Feed)

WordPress

• Digging into WordPress (RSS Feed)
• WordPress Planet (RSS Feed)
• WpRecepies (RSS Feed)
• WPscoop (RSS Feed)

Webbdesign – Programmering och design

• CatsWhoCode (RSS Feed)
• Design Shack (RSS Feed)
• FavBrowser (RSS Feed)
• Marcofolio.net (RSS Feed)
• PelFusion (RSS Feed)
• Position Absolute (RSS Feed)
• Six Revisions (RSS Feed)
• Smashing Magazine (RSS Feed)
• Think Design (RSS Feed)
• W3Avenue (RSS Feed)
• WeFunction (RSS Feed)

Slutord

Känner du till fler bra RSS-flöden inom samma områden, lämna gärna en kommentar.

Det finns flera sätt att hämta och hantera XML-data från en RSS-feed i PHP. Ett sätt att hantera datan, för att exempelvis hämta ut endast rubrikerna, är att använda explode-funktionen i PHP. Nackdelen med explode är att det kan bli mycket och förvirrande kod tillslut. Xpath är därför mer rekommenderat för den här typen av problem.

Alla servrar stödjer inte simplexml_load_file, men det går att hämta ut dessa med Curl istället, som ska vara betydligt säkrare. Loopia är ett webbhotell som har stöd för Curl.

Exempel

Det exempel jag har skapat hämtar data från en XML-fil från ett RSS-flöde med Xpath. Sedan skrivs rubrikerna ut, då jag valt att hämta just dessa. Filen hämtas med Curl, så se till att det är aktiverat på servern där skriptet körs.

function get_url($url)
{
	$curl = curl_init();
	curl_setopt($curl, CURLOPT_HEADER, 0);
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($curl, CURLOPT_URL, $url);
	$data = curl_exec($curl);
	curl_close($curl);
	return $data;
}

function get_url_data()
{
	$xml_content = get_url("http://feeds.aftonbladet.se/?service=rss");
	$dom = new DOMDocument();
	@$dom->loadXML($xml_content);
	$xpath = new DomXPath($dom);
	$content_title = $xpath->query('//channel//title/text()');
	return $content_title;
}

function print_url_data()
{
	$content = get_url_data();
	foreach ($content as $value)
	{
		echo $value->nodeValue . "<br />";
	}
	return $output;
}

print_url_data();

Resultatet

Så här kan resultatet se ut:

En majoritet av GM:s fordringsägare godkänner förslaget
Tog Elitloppet efter turbulent vecka
Den 25-årige egyptiern gillade inte den fru hans föräldrar valt åt honom
"Jag och Jarmo paktade minst"
Svensksuccé i Elitloppet - tränaren Stefan Hultman i glädjetårar
Zlatan gjorde mest mål i italienska serie A
Zlatan målskytt

Slutord

Om det finns ett bättre sätt att skriva det på, lägg en kommentar så kikar jag på det.

urlencode

I PHP finns en färdig funktion just för att göra strängar url-vänliga. Funktionen heter urlencode.

Funktionsanrop – urlencode

$string = 'Det här är ett "citat" i en url';
echo urlencode($string);

Skrivs ut på skärmen

Det+h%E4r+%E4r+ett+%22citat%22+i+en+url

Tyvärr blir en sådan url inte så snygg med våra svenska tecken. Dessutom är jag inte så förtjust i att byta ut mellanrum till plustecken. Min målsättning var att skapa en funktion i PHP som gjorde lika snygga urler som WordPress.

super_urlencode

Fördelen med super_urlencode, till skillnad från urlencode, är att våra svenska tecken översätts på ett bättre sätt. Istället för att göra om mellanslag till plustecken görs de med super_urlencode om till bindestreck istället vilket ökar läsbarheten.

Funktionen

function super_urlencode($string)
{
	$string = trim($string);
	$string = strtolower($string);
	$string = str_replace(array('å', 'ä', 'ö', ' '), array('a', 'a', 'o', '-'), $string);
	$string = ereg_replace("[^a-z0-9-]", "", $string);
	$string = ereg_replace("[-]+", "-", $string);

	return $string;
}

Funktionsanrop – super_urlencode

$string= 'Det här är ett "citat" i en url';
echo super_urlencode($string);

Skrivs ut på skärmen

det-har-ar-ett-citat-i-en-url

Tack till matusiak som delat med sig av sitt skript som den här funktionen baserar sig på. Tack också till Alexander Nyquist som kom med tipset att använda arrayer i funktionen str_replace.

Lämna gärna en kommentar om du hittar något sätt att förbättra eller optimera koden på.

Den här artikeln innehåller både information och tjänster för att underlätta bruket av typsnitt, främst i webbmiljö. Har du någon värdefull relevant information som inte tas upp i den här artikeln? Lämna en kommentar.

Typsnitt med stilmallar (CSS)

Är du nybörjare och vill lära dig allt om typsnitt med CSS, läs på W3Schools.

Alla egenskaper på en och samma rad

Man kan skriva in en ny rad för varje egenskap men man kan spara både tid och plats genom att skriva in allt på en och samma rad.

h1 {
   font: bold 14px/18px Arial;
}

Ovan visas h1-taggen med fet stil, 14 pixlar hög,  ett radavstånd på 18 pixlar samt att den tillhör Arial-familjen.

Standard-typsnitt

Som webbdesigner kan man ibland bli frustrerad över begränsningen som finns i HTML / CSS när det gäller valet av fonter. Det går att använda vilka typsnitt som helst, men de valda typsnitten visas bara om typsnittet finns installerat på användarens datorn. Därför kan det vara bra att veta vilka typsnitt som folk i allmänhet har installerade på sin dator för att få webbplatsen att se likadan ut på alla datorer.

Windows XP standard-typsnitt

De flesta använder idag Windows och har man många typsnitt installerade kan det vara svårt att veta vilka som var installerade från början.

wpdfd.com har gjort en utmärkt lista över de typsnitt som finns förinstallerade på Windows XP. Eftersom listan är skapad som en bild kan man se hur dessa typsnitt ser ut även om man inte skulle ha dessa installerade.

Vanliga typsnitt på Windows och OSX

Om man inte är nöjd med tjänsten ovan så kan man prova Ampsoft – Common Fonts istället. I mitten på sidan finns de vanligaste typsnitten listade, både i normal och fet stil. Dessa står som text och vill man som Windows-användare se hur typsnitten ser ut i OSX så finns det skärmdumpar längre ner på sidan för olika operativsystem med olika konfigurationer.

Ersätt typsnittet med Flash

sIFR

sIFR är en metod för skapa texter och rubriker för webbplatser, i andra typsnitt än de som följer med datorn.

En fördel med metoden är att om Javascript eller Flash saknas så visas de standard-typsnitt som finns på datorn. Det innebär att metoden är helt sökmotorvänlig.

Nackdelen är att sIFR kräver att både Javascript och Flash är installerat på surfarens dator för att det ska fungera.

WP sIFR – WordPress plugin

Använder du WordPress kan du prova WP sIFR plugin, vilket gör det hela betydligt enklare. Det är bara att installera och sedan aktivera den sIFR-font som ska användas.

Inga programmerings-kunskaper krävs men det kan vara bra att ha använt stilmallar (CSS) tidigare.

sIFR med Font Burner

För att förenkla skapandet av kod för sIFR finns Font Burner. Det hela sker i tre steg:

1. Hitta ett typsnitt.
2. Kopiera den inbäddade koden.
3. Klistra in koden på din webbplats.

Font Burner finns också som plugin till WordPress och heter Font Burner Control Panel.

Fonter / typsnitt till sIFR

• Isare – sIFR Flash Fonts Library
• sIFRvault

Ersätt typsnittet med Javascript och PHP

Typsnitten som finns på datorn laddas in från början och sedan ersätts de med hjälp av Javascript. Det gör att om Javascript inte är aktiverat visas de lokalt installerade typsnitten istället. Även sökmotorer och textläsare kommer då utan problem kunna läsa dem.

Facelift

Facelift är ett populärt skript som har många exempel, utförlig dokumentation och ett forum. De har också en blogg där man kan följa utvecklingen.

Använder du WordPress så kan du istället använda ett plugin som kallas för Facelift Image Replacment.

Andra metoder

• Typeface
• TTFTitles WordPress Plugin

Förhandsgranska texten i realtid

CSS Type Set

Det kan vara smidigt att ha något verktyg för att testa olika text-attribut och hur de påverkar helheten. CSS Type Set har ett både enkelt, effektivt och snyggt verktyg.

Man skriver in den text man vill använda. I mitt fall har jag använt en dummy-generator för att skapa texten, som också beskrivs i den här artikeln. Man behöver inte klicka på ”Generera” som på många andra tjänster, utan texten förändrar sig direkt när man ändrar på någonting.

Andra tjänster

• CSS Type
• Type Tester
• Font Tester
• CSS TXT

Bläddra bland typsnitt

På webben

My Fontbook

Det finns många program för att lista fonterna som ligger på hårddisken. Att visa typsnitten direkt i webbläsaren kan vara smidigt. Man slipper då installera ett program för det. My Fontbook har just en sådan tjänst.

Tjänsten är enkel att använda och ser ut att ha tagit inspiration från OSX, men tjänsten fungerar lika bra i Windows.

Font Shaker

Ett annat sätt att visa typsnitten som ligger på hårddisken är att köra Font Shaker. Likt My Fontbook får man upp alla typsnitt som är installerade. Skillanden är att den här tjänsten är byggd i Flash och visar upp typsnitten i 3D.

Andra Tjänster

• Font Picker
• Flipping Typical

I ett vanligt program

Trivs man bättre med att lista fonterna genom ett installerat program listar jag här några stycken som fungerar bra (i Windows).

• AMP Font Viewer
• The Font Thing
  

Portaler med typsnitt

Dafont

En av världens mest populära webbplatser för typsnitt är Dafont. Det är en mycket lättnavigerad webbplats och det kommer hela tiden in nya typsnitt. Det finns möjlighet att testa sin egen text med de typsnitten som finns.

Vill man förlita sig på den stora massan så finns det en topp 100-lista. För att hitta ett specifikt typsnitt kan man använda deras sökfunktion.

Urbanfonts

En uppstickare som kommer starkt är Urbanfonts. En av de stora skillnaderna mot Dafont är att Urbanfonts använder sig av Ajax i stor utsträckning. Det gör att sidan inte behöver laddas om igen ifall man ändrar några inställningar. Även här finns möjligheten testa sin egen text med valt typsnitt.

Andra portaler

• Font Squirrel

Generera dummy-text

Som webbdesigner så finns det situationer då man behöver text för att testa hur den kommer bete sig tillsammans med exempelvis en stilmall. Att skriva ihop en tillfällig text om ingenting är ofta slöseri med tid.

Lorem Ipsum

Lorem Ipsum är en bra metod för att generera en dummy-text. Här är ett exempel på hur texten kan se ut:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius nisl eu ligula. Sed tincidunt, arcu in pellentesque euismod, arcu odio tincidunt neque, ut imperdiet eros arcu a velit. Proin magna. Nam nibh.

Dummy Lipsum – Firefox tillägg

Använder du Firefox kan du istället installera  Dummy Lipsum. Den genererar dummy-text på samma sätt som

Lorem Ipsum, men det går snabbare att komma åt, då den läggs till i navigeringsfältet.

Andra dummytext-generatorer

• Lorem Ipsum
• Malevole

Konvertera pixlar till em

Många webbdesigners använder sig av pixlar när de sätter storlek på typsnitten i stilmallen. Många vet hur stor en pixel är och av den anledningen är det lätt att göra det till en vana. Vissa webbläsare kan inte skala om storleken på texten om den angetts i pixlar så därför är det rekommenderat att den skrivs till formatet ”em”.

Em Calculator och PXtoEM

En bra tjänst för att konvertera pixlar till em är Em Calculator. En annan tjänst är PXtoEM. De är väldigt olika så det kan finnas fördelar att prova båda.

Övrigt

Lek med texter i Wordle

En spännande tjänst är Wordle. Man skriver in den text man vill använda och klickar på en knapp.

Beroende på vilka inställningar man använder får man olika effekter.

Efter lite testande fick jag fram den här vackra skapelsen (till höger).

Slutord

Självklart finns det både mer information och fler tjänster därute. Saknar du någonting? Skriv en kommentar så kikar jag på det.

Jag kommer att hålla liv i den här artikeln och uppdatera den när jag får fatt i fler bra tjänster eller information.

Info and download

• Last updated: 2008
• Version: 0.2
• Tested with: 2.3-2.5
• Download: WP Simple Sitemap
• Download: WP Page Numbers (for the paging)
  

Screenshot

Benefits of this sitemap plugin

• It will not display a link to my homepage in your blog
• It will not display any categories, just the posts
• If you already use WP Page Numbers that will be used as your page navigation
• It should work with most versions of WordPress because it’s built only around WordPress own functions (not with SQL-querys)

Options

• Set a maximum posts per page
• Set a text if no posts are found
• Exclude categories that you don’t want to view in the sitemap
• Theme chooser
• Turn off the the stylesheet if you want
• Delete sitemap settings from the database

Install

1. Upload the FOLDER ‘wp-simple-sitemap’ to the ‘/wp-content/plugins/’
2. Upload the FOLDER ‘wp-page-numbers’ to the ‘/wp-content/plugins/’
3. Activate the plugin ‘WP Simple Sitemap’ through the ‘Plugins’ menu in admin
4. Activate the plugin ‘WP Page Numbers’ through the ‘Plugins’ menu in admin
5. Go to ‘Options’ or ‘Settings’ and then ‘Simple Sitemap’ to change the options

Usage

1. You need to create a page template that looks something like this:

   <?php
   /*
   Template Name: Simple Sitemap
   */
   ?>
   
   <?php the_sitemap_post_counter(); ?>
   <?php wp_simple_sitemap(); ?>

2. Copy the tags you use in your ‘page.php’ into the template file, to make it fit your theme
3. Upload it to your server via FTP into your template folder with a name of your choice
4. Create a page ‘Write / Page’ called ‘Sitemap’ or whatever you want
5. Choose your ‘Page Template’
6. Publish

Updates 0.2

• Added sitemap themes
• Added feature to delete the settings from the database
• The sitemap post counter is now correct

Bug report

If you have found a bug I want to know about it so I can fix it.

• Tell me your version of WP Simple Sitemap, WordPress version and what browser you use.
• If you suspect a collision with another plugin, tell me what plugin you suspect, or a list with suspected plugins
• Have you tested this plugin on another WordPress-version and can confirm that it works? Let me know!

Contribute

The best way to contribute is to spread the word, link to this page, blog about WP Simple Sitemap or give me feedback. All kinds of feedback are helpful to me. Suggestions and bug report are also welcome.

Normal use

This is the normal way of using the wp_list_pages function. It uses the ID for the page.

wp_list_pages('include=5');

Extended use 1

The nice thing about this is that you don’t need to know the ID of the page, it looks it up for you. You only need the post name and the ID is stored into the string. Then it writes it on the screen.
$my_id is the string and my_post_or_page_name is the post or page name (which you need to change to your post or page name).

$my_id = $wpdb->get_var("SELECT ID FROM $wpdb->posts WHERE post_name = 'my_page_or_page_name'");
echo $my_id;

Extended use 2

This is very much like the first one but here I show how to use it. I use wp_list_pages with the string $my_id instead of a number. You only need to replace my_post_or_page_name with your own post or page.

$my_id = $wpdb->get_var("SELECT ID FROM $wpdb->posts WHERE post_name = 'my_page_or_page_name'");
wp_list_pages('include='.$my_id);

Vilket är den bästa editorn för att koda hemsidor i? Vilket är det bästa FTP-programmet? Personligen tycker jag det smidigaste är om man kan kombinera dessa olika program för att slippa växla fönster. Här tar jag upp några program i jämförelse och mina erfarenheter av dem.

Visual Studio – För Microsoft-användare som har datorkraft och pengar

För de som programmerar ASP eller ASPX är Visual Studio antagligen en arbetsmiljö man troligen knappt kan klara sig utan. Den största fördelen jag finner med Visual Studio är att man kan skriva en punkt och den ger sedan förslag på vad man kan skriva. Nackdelen är att det kostar pengar om man ska ha hela miljön och drar en del av datorns resurser.

Dream Weaver – Bra tanke men känns lite väl omständigt ibland, kostar pengar

Jag har tidigare provat på Dream Weaver och tyckt att tanken varit bra. Det går att växla mellan kod-läge och design-läge. Det finns även inbyggt så att man kan skicka filerna till ett FTP-konto. Den delen blev jag dock aldrig helt klok på, onödigt krångligt. Programmet tar ett litet tag att ladda in och kostar dessutom pengar.

Notepad++ – Gratis, enkelt och nu med inbyggt FTP-program

Den senaste tiden har jag övergivit det ena programmet efter det andra som har kostat pengar, bytt ut dessa mot gratisprogram istället. För den som tycker gratis är gott är Notepad++ riktigt lysande. Det laddas in blixtsnabbt och man arbetar väldigt snabbt i det, delvis på grund av ett enkelt interface men framför allt för att man har flikar att växla mellan.

En nyhet som jag blivit mycket glatt överraskad över är att det nu finns inbyggd FTP. Det påminner därför lite om Dream Weaver som också har det stödet. Jag suckade innan jag skulle testa hur det fungerade, på grund av dåliga erfarenheter, men jag kunde inte bli nöjdare. Det var bara att mata in FTP-uppgifterna för att skapa sin FTP-profil och koppla upp. Det som händer är att man får upp ett träd, liknande utforskaren. För att ladda en fil kan man dubbelklicka på den och trycker man CTRL + S (spara) så sparas filen direkt till FTP-servern, helt utan att den behöver mellanlagras på hårddisken. Givetvis kan man spara på hårddisk också om man önskar.

Nackdelar då? Jodå, det finns några. En av dem är att Notepad++ saknar en bra funktionskomplettering vid punktnotation som jag tidigare nämnt att Visual Studio har. Det finns en sådan funktion även i Notepad++ men den är inte i närheten så bra och enligt mig inte ens användbar. En annan nackdel har länge varit att programmet inte har så snygg design, men detta har på senare tid blivit bättre. Deras hemsida är dock en total katastrof.

WP YouTube now supports a profile editor, where you can set up different settings, but only one profile is needed for all your YouTube videos. Then it automatically set the colors, borders, width, height and more. Easy to use!

• Download: WP YouTube 2
• Last updated: 2008-01-13
• Version: 2.0
• Tested with: 2.3-2.5

Screenshots

Install

1. Upload the FOLDER ‘wp-youtube’ to the /wp-content/plugins/
2. Activate the plugin ‘WP YouTube’ through the ‘Plugins’ menu in admin
3. Go to ‘Manage / YouTube Profiles’ for more instructions

Upgrade

1. Deactivate ‘WP YouTube’ through the ‘Plugins’ menu in admin
2. Remove the file ‘wp-youtube.php’ from /wp-content/plugins/
3. Upload the FOLDER ‘wp-youtube’ to the /wp-content/plugins/
4. Activate the plugin ‘WP YouTube’ through the ‘Plugins’ menu in admin
5. Go to ‘Manage / YouTube Profiles’. Your previous options should be imported.
6. ‘Save Profiles’ to use / save your imported data.
7. Go to ‘Manage / YouTube Profiles’ for more instructions

Updates 2.0

• Totally rewritten from the scratch to make way for a new profile editor
• Profile editor created. You can use different profiles in your posts or pages, for example if you have the need to use different colors.
• Because of the profile editor, each profile is more compact to take a little less space on the screen
• Javascript is now required to use WP YouTube admin. Because of the Javascript the plugin is very fast to use.
• Preview of your YouTube player, shows colors and border settings
• You can paste a function code in your theme and that way use settings from a profile. If you are into theme creation this might be a good thing.
• You can remove profiles, all or one at the time
• If you have used a previous version of WP YouTube, that data is imported (save required).
• The menu is moved to ‘Manage / YouTube Profiles’ simply because you manage YouTube profiles.
• Option to remove old WP YouTube data from database
• Option to remove WP YouTube 2 data from database, if you need to uninstall this plugin.

Possible future updates

• Support for other video formats
• Support for higher quality videos
• Custom pick color on the player
• Random color on the player
• Quicktag in post / page editor
• Possible to include Youtube videos into optional excerpt

Bug report

If you have found a bug I want to know about it so I can fix it.

• Tell me your WP YouTube version, WordPress version and what browser you use.
• If you suspect a collision with another plugin, tell me what plugin you suspect, or a list with suspected plugins
• Have you tested this plugin on another WordPress-version and can confirm that it works? Let me know!

Known bugs

• This plugin makes a collision with wpShopping Cart plugin if that is installed. It will not parse the code, just show the YouTube ID and the tags.

Known collisions with other plugins

• wpShopping – not verified yet

Contribute / Feedback

The best way to contribute today is to spread the word, link to this page, blog about WP YouTube or give me feedback. All kinds of feedback are helpful to me. Suggestions and bug report are also welcome.

• Download: WP Limit Posts Automatically
• Last updated: 2007-12-16
• Version: 0.7 beta
• Works with: 2.3.1

Screenshots

Install

1. Upload wp-limit-posts-automatically.php to the
   /wp-content/plugins/wp-limit-posts-automatically directory.
2. Activate the plugin WP Limit Posts Automatically through the ‘Plugins’ menu in WordPress.
3. Go to ‘Options / Limit Posts Options’ for options and more instructions.

History

Why did I make this? I almost always forgot to put a more-tag into my posts and at first I created some quick fix for it at my own website. At the time I didn’t found any good plugin for it. I still havn’t found the perfect plugin for this so I created my own.

Updates 0.7

• Updated with a new option, ”strip tags” to avoid code errors when cut through letter or word.
• Added a little usage section

Updates 0.5

• Fixed bug with paragraph tag sometimes ended incorrectly (because of the cut).

Updates 0.4

• Fixed bug with ajax category problem.
• Fix collision to WP YouTube plugin

Contribute / Feedback

The best way to contribute is to spread the word, link to this page or give me feedback. All kinds of feedback are helpful to me. Have you tested this plugin on another WordPress-version and can confirm that it works? Let me know. Suggestions and bug report are also welcome.

• Version 2.0 is out. Click here to go to WP YouTube 2.0
• Download: WP YouTube 0.9
• Go to: WP YouTube 2.0
• Version: 0.9
• Works with: 2.2-2.3.1

Screenshots

Install

1. Upload wp-youtube.php to the /wp-content/plugins/wp-youtube directory.
2. Activate the plugin WP YouTube through the ‘Plugins’ menu in WordPress.
3. Go to ‘Options / WP YouTube’ for options and more instructions.

Updates 0.9

• New feature – ”Tag type” added
• Fix – Autoplay bug fixed
• Fix – Stylesheet code removed, it wasn’t used anyway

Updates 0.8

• New feature – ”Autoplay” option added
• New feature – ”Include related videos” option added
• New feature – ”Valid XHTML code” option added
• Fix – Width and height was switched
• Fix – The ”Tag name” is now set to default value even if options is never updated
• Fix – Some visual enhancements to the instructions part
• Fix – The support link is changed and goes now directly to WP YouTube

History

Why did I make this? I’m developing a video-site when this is written and got tired of pasting and editing the embed code. After about 30 posted YouTube-videos I wanted to change the width of the site and there by the width of every movie-clip. What if I could do that in just one place, in one simple setting? I made a plugin to manage that. I figured that my plugin could be used for more than just change the width and height. YouTube videos have support for colors and borders and I brought that into the plugin as well.

• Download older versions of this plugin at WordPress – WP YouTube

Known bugs

• Calling a stylesheet that does not exists (most users don’t even notice)
• Autoplay don’t work if ”Valid XHTML code” is not set

Contribute / Feedback

The best way to contribute is to spread the word, link to this page or give me feedback. All kinds of feedback are helpful to me. Have you tested this plugin on another WordPress-version and can confirm that it works? Let me know. Suggestions and bug report are also welcome.