Välj inte Payson!!!

Jag gjorde en transaktion med Payson vilket visade sig bli ett riktigt djävla fiasko!

Till att börja med låste dom kontot på morgonen efter att jag valde att flytta över pengarna till mitt bankkonto. Sedan försökte jag få tag på dom varje dag men dom hörde inte av sig. Först ville dom ha ett personbevis för bankärenden, vilket jag skickade in. Sedan skulle dom ha ett köpekvitto där jag signerat och kollat köparens ID-kort och sedan fått dennes underskrift. Detta hade jag inte gjort. Så då väljer dom att se det som ett bedrägeri och makulerar transaktionen.

Dom ber mig kontakta polisen så att jag möjligen ska kunna få tillbaka varan.

Nä, fy fan vad arg jag blir när dom hjälper till att fullfölja ett bedrägeri.

Välj inte Payson!!!

Säker Inloggning med LightOpenID

LightOpenID är ett script som låter en användare identifiera sig genom sitt Google konto (plus ett gäng andra, inklusive OpenID), och vi kommet att jobba med en variant som används tillsammans med PHP (finns för andra språk också). Du kan ladda ner den senaste versionen härifrån. Det går att logga in med flera olika tjänster, som;  är ett väldigt säkert alternativ.

Ett annat alternativ för PHP är ett projektet som använder LightOpenID; HybridAuth vilken använder sig av sociala inloggningar med; OpenID, Facebook, Twitter, LinkedIn, Google, Yahoo, Windows Live, Foursquare och AOL och många fler. Du kan hitta en lista över dom i dokumentationen.

Användaren kommer att refereras till som » A

 

Vi börjar med att skriva in följande i huvudmenyn:

// skriv in det här i din huvudmeny
if (!$_SESSION['email']) {
    // om A inte loggat in än, visa "Logga in" länk
    echo '<li><a href="login.php">Logga in</a></li>';
} else {
    // om A har loggat in visas logga ut i menyn
    echo '<li><a href="logout.php">Logga ut</a></li>';
}

…och nästa steg blir att sätta in följande i din login.php:

// login.php
// skapa en ny instans av LightOpenID, med länk till din webb-rot
$openId = new LightOpenID('http://localhost/~dok/login_google/');

// vi använder oss av Google:s inloggning
// den här adressen hämtas till menyn lite längre ner på sidan
$openId->identity = 'https://google.com/accounts/oB/id';

// här specifierar vi vad vi vill veta => förnamn, email och land 
$openId->required = array(
'namePerson/first',
'contact/email',
'contact/country/home'
);

// och så anger vi en return URL som A ska skickas till efteråt
$openId->returnUrl = 'account.php';
?>

<h1>Logga in på sidan</h1>

<!-- och en inloggningslänk > Länk till Google login -->
<a href="<?php $openId->authUrl() ?>">Logga in med Google</a>

<!-- och en vanlig inloggningsformulär -->
<form action="login.php" method="POST">
    <label for="username">Användarnamn:</label><br />
    <input type="text" name="username" /><br />
    <label for="pass">Lösenord</label><br />
    <input type="password" name="pass" /><br />
    <input type="submit" value="Logga in" />
</form>

…och efter att A har klickat på verifiera med Google och verifierat att A låter oss använda A:s email och namn, skickas A till account.php:

// account.php
require_once 'includes/openid.php';

$openId = new LightOpenID('http://localhost/~dok/login_google/');

if ($openId->mode) {
    if ($openId->mode == 'cancel') {
        echo 'Error: användare avbröt inloggning';
    }  elseif ($openId->validate()) {
        // hämta alla attribut för A som vi fick från Google
        $data = $openId->getAttributes();
        $email = $data['contact/email'];
        $fist = $data['namePerson/first'];
        $homeCountry = $data['contact/country/home'];
        
        // sätt attributen till session variabler
        $_SESSION['email'] = $email;
        $_SESSION['firstname'] = $fist;
        $_SESSION['home'] = $homeCountry;

        // skicka A tillbaka till hemsidan
        header('Location: http://localhost/~dok/login_register/');
    }  else {
        echo 'Error: Användare har inte loggat in';
    }
}  else {
    echo 'Error: Gå till hemsidan för att logga in';
}

…nu skickas A till index.php, och där kollar vi om A loggat in och visar lämplig länk i menyn:

if (!$_SESSION['email']) {
    // om användaren avbröt verifiering visas Logga in
    echo '<li><a href="' . $openId->authUrl() . '">Logga in</a></li>';
} else {
    // logga ut länk visas nu istället
    echo '<li><a href="login.php">Logga ut</a></li>';
}

…och i logout.php ska följande in:

// skapa en session så vi kommer åt alla sessions
session_start();

// "förstör" alla sessions
session_destroy();

// skicka tillbaka till hemsidan
header('Location: http://localhost/~dok/login_register/');

Så där nu ska du kunna komma igång med LightOpenID. Och till nästa gång, koda smart 😉

 

Att Sälja på Nätet

För att göra transaktioner på nätet behöver webbplatsen kunna utföra tre steg och det tredje steget finns har man två alternativ att välja mellan.

 

Med egen säljarkonto

  1. Cart (kundvagn) > ska samla in information om köpet, som kortnummer, adress, namn mm.
  2. Payment gateway (betalningsgateway) > krypterar informationen som samlats in och skickar den till säljarkonto.
  3. Merchant account (säljarkonto) > processar informationen och sätter in pengarna på kontot.

 

Med tredjeparts säljarkonto

  1. Kundvagn > ska samla in information om köpet, som kortnummer, adress, namn mm.
  2. Betalningsgateway > krypterar informationen och skickar den till säljarkonto
  3. Tredjepart säljarkonto > PayPal, Google Checkout m.fl. > processar informationen och sätter in pengarna på kontot

 

Det här är en första utdrag ur en serie om att skapa en nätbutikoch nästa artikel kommer alldeles strax. I den går jag igenom hur man integrerar PayPal på sin webbsida.

Gruppera app-ikoner i Launchpad

Ibland kan det samlas en massa applikationer och du kanske vill få lite ordning på dom genom att gruppera webbläsare, utvecklingsverktyg mm. så vi ska gruppera app-ikoner i Launchpad idag. Så här kan det se ut:

ScreenShot - Fullt med applikationer i Launchpad
Fullt med applikationer i Launchpad

 

Tänk om du skulle gruppera liknande applikationer så att det ser ut som ”Tillbehör” (Utilities), det kan du!

OS X launchpad icon
OS X launchpad icon

Följ stegen nedanför för att gruppera appikoner i virtuella mappar:

  • Håll ner ALT och flytta en appikon över en annan och håll den där tills det skapas en ram runt den och efter det öppnar den sig, och nu kan du släppa den där:
Screen-Shot-put-app-in-folder
Efter ett tag skapas en ram runt ikonen och den öppnar sig
  •  Gruppera nu tills du är nöjd:
launchpad
Gruppera app-ikoner i Launchpad
  • OS X försöker ge namn för dessa virtuella mappar men du kanske vill ändra namn på dom vilket är enkelt, du öppnar en mapp och klickar på namnet:
Screen-Shot-ändra-namn
Klicka på texten så blir den redigerbar
  •  Nu skriver du bara in det namn du vill ha:
Screen-Shot-ändrat-namn
Skriv in det nya namnet

Så där nu har du grupperat appikonerna i Launchpad!

Stöd för Bilder i WordPress Teman

Artikeln finns som PDF bok på medlemsidorna

När man ska lägga till stöd för bilder i WordPress teman bör man göra det dynamiskt.

Utvalda Bilden

Med the_post_thumbnail kan man lägga till stöd för ”Utvald Bild” (tidigare kallad Inläggets miniatyrbild  och som anges i inläggets redigeringsskärm) för det aktuella inlägget, och funktionen måste skrivas in i  inläggs-loopen.

För att aktivera inläggets utvalda bild, måste det aktuella temat inkluderar stöd för det i functions.php:

add_theme_support('post-thumbnails');

Och i mallfilen skriver man ut bilden med the_post_thumbnail:

<?php the_post_thumbnail( $size, $attr ); ?>

Funktionen  the_post_thumbnail() kan ha ett antal olika parametrar som anger upplösning:

the_post_thumbnail(); // Utan parametrar
the_post_thumbnail('thumbnail'); // Miniatyr (default 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium (default 300px x 300px max)
the_post_thumbnail( 'large' ); // Stor (default 640px x 640px max)
the_post_thumbnail( 'full' ); // Full (original size uploaded)
the_post_thumbnail(array(100, 100)); // En array med angivna mått

WordPress skapar ett antal standardklasser för utvalda bilder:

<img class="wp-post-image" />
<img class="attachment-thumbnail"/>
<img class="attachment-medium"/>
<img class="attachment-large"/>
<img class="attachment-full"/>

Du kan också ge Inläggets utvalda bild en egen klass som en parameter, och i exemplet nedan lägger vi till klassen ”align-right” till inläggets utvalda bild:

<?php the_post_thumbnail('thumbnail', array( 'class' => 'align-right')); ?>

The_post_thumbnail() måste användas inom loopen. Du kan använda get_the_post_thumbnail($id, $size, $attr) i stället för att få den utvalda bilden för ett specifikt inlägg. Använd has_post_thumbnail() för att kontrollera om en utvalda bild har valts för inlägget.

<?php if (has_post_thumbnail()) : ?>
  <!-- permalänk till inlägget -->
  <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
  <!-- skriv ut bilden -->
    <?php the_post_thumbnail(); ?>
  </a>
<?php endif; ?>

 

Bakgrundsbild

Det är rätt så lätt att lägga till support för en bakgrundsbild:

$defaults = array(
  'default-color'          => '#EEEEEE',
  'default-image'          => get_template_directory_uri() . '/images/default_bakgrund.jpg',
  'wp-head-callback'       => '_custom_background_cb',
  'admin-head-callback'    => '',
  'admin-preview-callback' => ''
);

add_theme_support( 'custom-background', $defaults );

Nu kan du ladda upp en bakgrundsbild genom » Admin panelen » Utseende » Bakgrundsbild, och sedan välja om den ska repetera, vara fixerad, scrolla, vänsterjusterad, högerjusterad eller centrerad, plus standard bakgrundsfärg.

 

Header bild

För att lägga till stöd för header bild kommer vi att få skriva lite mer kod:

/* define roten för temat i en global variabel */
define("THEME_DIR", get_template_directory_uri());

/* Be WordPress  köra the_basic_theme_setup() när 'after_setup_theme' hooken körs. */

add_action('after_setup_theme', 'the_basic_theme_setup');

if (!function_exists('the_basic_theme_setup')):
/* add_custom_image_header() Används för att lägga till stöd för en anpassad header-bild.
register_default_headers() Används för att registrera standard header bilder som ska följa med temat. */

    function the_basic_theme_setup() {
        // Global variabel för textfärg
        define('HEADER_TEXTCOLOR', '');

        // define en standard bild

        define('HEADER_IMAGE', THEME_DIR . '/images/headers/header-image.jpg');

        /* Höjden och bredden på den anpassade sidhuvud. Du kan koppla in i temat egna filter för att ändra dessa värden. Lägg ett filter för att the_basic_theme_header_image_width och the_basic_theme_header_image_height att ändra dessa värden. */

        define('HEADER_IMAGE_WIDTH', apply_filters('the_basic_theme_header_image_width', 940));
        define('HEADER_IMAGE_HEIGHT', apply_filters('the_basic_theme_header_image_height', 198));

        // Vi kommer att använda inlägg miniatyrbilder för egna header bilder på inlägg och sidor. Vi vill att de ska vara 940 pixlar bred och 198 pixlar hög (större bilder kommer att automatiskt beskäras för att passa).

        set_post_thumbnail_size(HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true);

        // Don't support text inside the header image.
        define('NO_HEADER_TEXT', true);

        // Lägg ett sätt för den anpassade sidhuvudet stylas i admin panel som styr anpassade sidhuvuden. Se the_basic_theme_admin_header_style(), nedan.

        add_custom_image_header('', 'the_basic_theme_admin_header_style');

        // … och där avslutas utbytbara header bilderna.
        // Standard sidhuvud bilder förpackade med temat.

        register_default_headers(array(
            'bluecrush' => array(
                'url' => THEME_DIR . '/images/headers/bluecrush.jpg',
                'thumbnail_url' => THEME_DIR . '/images/headers/bluecrush.jpg',
                'description' => __('Bluecrush - Abstract', 'the_basic_theme')
            ),
            'byrce-canyon' => array(
                'url' => THEME_DIR . '/images/headers/byrce-canyon.jpg',
                'thumbnail_url' => THEME_DIR . '/images/headers/byrce-canyon.jpg',
                'description' => __('Byrce Canyon', 'the_basic_theme')
            ),
            'castle' => array(
                'url' => THEME_DIR . '/images/headers/castle.jpg',
                'thumbnail_url' => THEME_DIR . '/images/headers/castle.jpg',
                'description' => __('Castle', 'the_basic_theme')
            )
        ));
    }

endif;

if (!function_exists('the_basic_theme_admin_header_style')) :
/* Lägger till stil för header bilden som visas i admin panelen Utseende » Header.
Refereras via add_custom_image_header() i the_basic_theme_setup(). */

    function the_basic_theme_admin_header_style() {
        ?>
        <style type="text/css">
            #headimg {
                height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
                width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
            }
            #headimg h1, #headimg #desc {
                display: none;
            }
        </style>
        <?php
    }

endif;

Och så för att lägga in den i mallfilen:

<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

 

Hoppas att du lärde dig något, och till nästa gång, koda smart 😉 !

Få Boken Från Statisk HTML till Dynamisk WordPress Tema

Bli Medlem ( det är GRATIS! ) och Få boken ”Från Statisk HTML till Dynamisk WordPress Tema” som går igenom hur man omvandlar statisk HTML sida till ett WordPress tema . Boken går igenom processen att dela upp ett HTML dokument och flytta över delarna till PHP-filer och modifiera koden så att den passar för WordPress, delarna används sedan för att bygga upp ett tema med dynamiskt innehåll. Ett WordPress tema använder sig av ett antal mallfiler för att visa innehåll som inlägg, sidor, kategorier mm. nedanför är en liten diagram över hur den väljer dom.

Diagram över WordPress Mall-hierarki Cheat Sheet
Diagram över WordPress Mall-hierarki Cheat Sheet

 

Själva temat som vi skapar i tutorialn finns här » WordPress Tema – basic-html5-starter-theme

Skapa din första webbsida – CSS styling

[section_title title=Typsnitt]

⇓ OBS! ⇓

Den där blå remsan nere på botten av sidan innehåller en HTML & CSS redigerare och fungerar så här – om du vill visa/gömma redigeraren kan du göra det genom att klicka på den blå remsan där det står “Klicka här för att visa/gömma redigerare” – klicka på fliken medtexten “HTML Redigerare” och skriv in din HTML, klicka på fliken med texten “CSS Redigerare” och skriv in din CSS och för att se resultat klickar du på fliken där det står “Resultat visas här”.

 

Nu ska vi börja leka med CSS styling, och med det menar jag att formatera element med färg, typsnitt, bredd, höjd och en massa annat roligt!

 

font-egenskap för typsnitt

Vi börjar med font-egenskaper med vilka man anger värden för: storlek, typsnittsfamilj, tjocklek, stil och variant. Med font-egenskaper kan man varkligen göra skillnad på en sida med små medel, så du vinner en hel del på att lära dig font-egenskaperna riktigt bra.

 

font-family

Egenskap för att välja ett/flera specifika typsnitt av typsnittsfamiljer som: serif , sans-serif , monospace, cursive, fantasy m.fl. Om du lägger in flera värden till egenskapen font-family måste dom separeras med ett kommatecken. Teckensnittsnamn som innehåller flera ord med blanktecken emellan måste den omges av enkla citatteck ’ ’ eller dubbla ” ”, så att ’Helvetica Neue’ måste använda citatteck men inte sans-serif, då den inte har någon blanktecken. font-family kan appliceras på alla text selektorer.

font-family tillåter en prioriterad lista över font familjenamn och / eller generiska familjenamn, och då är värden separerade med ett kommatecken för att visa att de är alternativ, och man skriver det namn man vill använda i första hand först och sedan nästa alternativ så här är ’Courier New’ i första hand, sedan sans-serif, och till sist serif:

Exempel:

selektor {
  font-family: 'Courier New', sans-serif, serif;
}

En användaragent / klientprogram kommer sedan att använda den första familjen som är tillgänglig.

 

font-style

Väljer mellan kursiv och normal, med värdena: italic och normal

selektor {
  font-style: italic;
}

 

font-variant

Välj mellan två värden: normal, eller small-caps:

Selector {
  font-variant: small-caps;
}

 

font-weight

Anger text-tjocklek och värdena är: bold, normal, light, bolder eller ett numeriskt värde som anges i hela hundratal mellan 100900.

/* Syntax: */
font-weight: normal || bold || bolder || lighter || 100 - 900;

 

normal är samma som 400.

bold är samma som  700.

lighter ger en font weight som är ett värde tunnare än förälder elementet element (bland tillgängliga tjocklekar för typsnittet).

bolder ger en tjovklek som är ett värde tjockare än förälderns font-weight (bland tillgängliga tjocklekar för typsnittet).

100, 200, 300, 400, 500, 600, 700, 800, 900

Numeriska font weight värden ger lite  mer precision. Om inte den exakta värdet av 600 – 900 inte finns tillgängligt kommer närmast värde som är tjockare att användas (annars om ingen finns ett tunnare värde), och mellan 100 – 500 kommer den närmaste tunnare värdet att användas (annars om ingen finns ett tjockare värde). Detta betyder att för typsnittsfamiljer som bara har normal och tjock variant, blir 100 – 500  för normal, och 600 – 900 för bold.

selektor {font-weight: 700;}

OBS!  Många datortypsnitt finns endast tillgängliga i ett begränsat antal tjocklekar (ofta bara två alternativ: normal och fet).

 

font-size

Ställer den absoluta storleken (pt, in, cm, px), relativa storleken (em, exrem), eller en procentuell värde % som baseras på den normal storlek.

Storleksvärden kan vara: xx-large, x-large, large, medium, small, x-small, xx-small, larger, smaller eller ett numeriskt värde + enhet.

selektor {font-size: 100%;}
selektor {font-size: 24pt;}
selektor {font-size: xx-large;}

 

font

Ställer alla teckensnittsvärden i en egendoms deklaration. Den föredragna ordningen för värden är:

font { font-style font-variant font-weight font-size / line-height font-family;}

Alla är dock Inte nödvändiga:

selektor {font: bold 16pt "Times New Roman";}

Du kan titta närmare på så kallade CSS kortformer (shorthand) i artikeln CSS kortform / shorthand guide.

 

text-align

text-align anväds för den horisontella textjustering, antingen till vänster, mitten högereller justify (ser till så att både vänster- och högermarginalerna blir jämna):

text-align: left || center || right || justify;

Med hjälp av text-align kan man även placera bilder i sidled.

 

text-indent

Gör så  att första raden i varje nytt stycke börjar [nummer+enhet] längre in på sidan än kommande rader:

text-indent: 1em;

 

line-height

Med hjälp av line-height kan man reglera avståndet mellan raderna vertikalt:

line-height: normal | [nummer+enhet] || inherit;

 

word-spacing

Används för att reglera avståndet mellan ord:

word-spacing: normal || [nummer+enhet] || inherit;

 

letter-spacing

Med letter-spacing kan man reglera avståndet mellan tecken:

letter-spacing: normal || [nummer+enhet] || inherit;

 

Gå vidare till sida 2 genom att klicka här nedanför.