Creación de una página Acerca de basada en PHP y CSS3

En este tutorial, crearemos una página acerca de simple que funciona con PHP, HTML5 y CSS3. Presentará su información de contacto a sus visitantes, con una opción para descargarla como vCard (útil para importarla en aplicaciones de terceros).

Puede usar el ejemplo de hoy como marcador de posición para su próximo sitio web personal o como una página acerca de.

HTML

Como siempre, el primer paso es escribir el marcado HTML que impulsará nuestro ejemplo. Se trata de una página sencilla cuyo objetivo principal es presentar nuestros datos de contacto de forma semántica. Esto requerirá agregar metaetiquetas apropiadas y usar el microformato hCard para incrustar datos en la página.

index.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="description" content="Online info page of <?php echo $profile->fullName()?>. Learn more about me and download a vCard." />

        <title>Creating a PHP and CSS Powered About Page  | Tutorialzine Demo</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <section id="infoPage">

            <img src="<?php echo $profile->photoURL()?>" alt="<?php echo $profile->fullName()?>" width="164" height="164" />

            <header>
                <h1><?php echo $profile->fullName()?></h1>
                <h2><?php echo $profile->tags()?></h2>
            </header>

            <p class="description"><?php echo nl2br($profile->description())?></p>

            <a href="<?php echo $profile->facebook()?>" class="grayButton facebook">Find me on Facebook</a>
            <a href="<?php echo $profile->twitter()?>" class="grayButton twitter">Follow me on Twitter</a>

            <ul class="vcard">
                <li class="fn"><?php echo $profile->fullName()?></li>
                <li class="org"><?php echo $profile->company()?></li>
                <li class="tel"><?php echo $profile->cellphone()?></li>
                <li><a class="url" href="<?php echo $profile->website()?>"><?php echo $profile->website()?></a></li>
            </ul>

        </section>

        <section id="links">
            <a href="?vcard" class="vcard">Download as V-Card</a>
            <a href="?json" class="json">Get as a JSON feed</a>
            <p>In this tutorial: <a href="http://www.flickr.com/photos/levycarneiro/4144428707/">Self Portrait</a> by <a href="http://www.flickr.com/photos/levycarneiro/">Levy Carneiro Jr</a></p>
        </section>

    </body>
</html>

El $profile La variable que ve arriba contiene un objeto de la clase PHP AboutPage que escribiremos en un momento. Contiene nuestros datos de contacto y proporciona una serie de métodos útiles para generar archivos JSON y vCard.

Como se mencionó anteriormente, estamos utilizando el microformato hCard para incrustar los datos de contacto en la página. Este es un estándar simple con el que usamos los nombres de clase de elementos HTML regulares para especificar datos, fácilmente reconocibles por los motores de búsqueda. La hCard contiene información sobre nuestro nombre completo, organización, teléfono y página de inicio:

<ul class="vcard">
    <li class="fn"><?php echo $profile->fullName()?></li>
    <li class="org"><?php echo $profile->company()?></li>
    <li class="tel"><?php echo $profile->cellphone()?></li>
    <li><a class="url" href="<?php echo $profile->website()?>"><?php echo $profile->website()?></a></li>
</ul>

Opcionalmente, también puede especificar una dirección de casa/trabajo y otros tipos de información útil.

PHP

Uno de los puntos de usar un lenguaje del lado del servidor es que podemos dejar que algunos aspectos de la página se generen sobre la marcha. Esto nos libera de tener que mantener actualizadas manualmente varias partes de la página.

En el caso de nuestra página Acerca de, tenemos un archivo de configuración simple, que contiene los datos utilizados por la página. Este mismo recurso se utiliza para la generación del archivo vCard y el feed JSON.

config.php

$info = array(
    'firstName'     => 'John',
    'middleName'    => 'S.',
    'lastName'      => 'Smith',
    'photoURL'      => 'assets/img/photo.jpg',
    'birthDay'      => strtotime('22-03-1983'),
    'city'          => 'MyCity',
    'country'       => 'United States',
    'street'        => 'My Street 21',
    'zip'           => '12345',
    'company'       => 'Google Inc',
    'website'       => 'https://tutorialzine.com/',
    'email'         => '[email protected]',
    'cellphone'     => '12345678910',
    'description'   => "I am a webdeveloper living in ...",
    'tags'          => 'Developer, Designer, Photographer',
    'facebook'      => 'http://www.facebook.com/',
    'twitter'       => 'http://twitter.com/Tutorialzine'
);

No todas estas propiedades se presentan en la página Acerca de. Algunos de ellos (como los campos de dirección , empresa , correo electrónico y cumpleaños ) solo están disponibles cuando el usuario descarga el perfil como una vCard o como un archivo JSON . También puede agregar bastantes propiedades más a esta matriz (se proporciona una lista completa como comentario en config.php archivo).

Así que ahora que hemos proporcionado toda la información que queríamos, necesitamos crear una clase que se encargue de la tarea de presentar una página completa acerca de.

acerca de la página.clase.php

class AboutPage{
    private $info = array();

    // The constructor:

    public function __construct(array $info){
        $this->info = $info;
    }

    // A helper method that assembles the person's full name:

    public function fullName(){
        return $this->firstName().' '.$this->middleName().' '.$this->lastName();
    }

    // Using PHP's Magick __call method to make the
    // properties of $this->info available as method calls:

    public function __call($method,$args = array()){

        if(!array_key_exists($method,$this->info)){
            throw new Exception('Such a method does not exist!');
        }

        if(!empty($args)){
            $this->info[$method] = $args[0];
        }
        else{
            return $this->info[$method];
        }
    }

    // This method generates a vcard from the $info
    // array, using the third party vCard class:

    public function downloadVcard(){

        $vcard = new vCard;

        $methodCalls = array();

        // Translating the properties of $info to method calls
        // understandable by the third party vCard class:

        $propertyMap = array(
            'firstName'     => 'setFirstName',
            'middleName'    => 'setMiddleName',
            'lastName'      => 'setLastName',
            'birthDay'      => 'setBirthday',
            'city'          => 'setHomeCity',
            'zip'           => 'setHomeZIP',
            'country'       => 'setHomeCountry',
            'website'       => 'setURLWork',
            'email'         => 'setEMail',
            'description'   => 'setNote',
            'cellphone'     => 'setCellphone');

        // Looping though the properties in $info:

        foreach($this->info as $k=>$v){

            // Mapping a property of the array to a recognized method:

            if($propertyMap[$k]){
                $methodCalls[$propertyMap[$k]] = $v;
            }
            else {

                // If it does not exist, transform it to setPropertyName,
                // which might be recognized by the vCard class:

                $methodCalls['set'.ucfirst($k)] = $v;
            }
        }

        // Attempt to call these methods:

        foreach($methodCalls as $k=>$v){
            if(method_exists($vcard,$k)){
                $vcard->$k($v);
            }
            else error_log('Invalid property in your $info array: '.$k);
        }

        // Serving the vcard with a x-vcard Mime type:

        header('Content-Type: text/x-vcard; charset=utf-8');
        header('Content-Disposition: attachment; filename="'.$this->fullName().'.vcf"');
        echo $vcard->generateCardOutput();
    }

    // This method generates and serves a JSON object from the data:

    public function generateJSON(){
        header('Content-Type: application/json');
        header('Content-Disposition: attachment; filename="'.$this->fullName().'.json"');

        // If you wish to allow cross-domain AJAX requests, uncomment the following line:
        // header('Access-Control-Allow-Origin: *');

        echo json_encode($this->info);
    }
}

Como puede ver en el código a continuación, estamos utilizando una clase de código abierto de terceros para la generación real del archivo vCard (vcf). Como esta clase usa su propio conjunto de llamadas a métodos, necesitaremos transformar nuestro archivo de configuración en algo que entienda. Estamos haciendo esto con el $propertyMap matriz que asigna las propiedades que se encuentran en nuestra matriz $info a los nombres de las llamadas a métodos que deberán ejecutarse en el objeto vCard. Después configuramos el $vcard objeto, establecemos los encabezados de contenido y llamamos al generateCardOutput() del objeto método. Esto hace que el navegador muestre un cuadro de diálogo de descarga de archivos.

Estamos haciendo básicamente lo mismo en el método generateJSON, con la valiosa excepción de que no estamos usando una clase de PHP de terceros, sino el json_encode() incorporado. Estamos sirviendo el archivo JSON con un tipo de contenido application/json. También puede descomentar el encabezado de control de acceso si desea poder acceder a sus datos a través de AJAX desde otros dominios.

Ahora veamos cómo estamos usando esta clase en index.php:

index.php

require 'includes/config.php';
require 'includes/aboutPage.class.php';
require 'includes/vcard.class.php';

$profile = new AboutPage($info);

if(array_key_exists('json',$_GET)){
    $profile->generateJSON();
    exit;
}
else if(array_key_exists('vcard',$_GET)){
    $profile->downloadVcard();
    exit;
}

El fragmento que ves arriba se encuentra en la parte superior de index.php , antes de cualquier HTML, ya que tenemos que poder establecer encabezados. Después de incluir los archivos fuente PHP apropiados, creamos un nuevo AboutPage objeto con la matriz de configuración como su parámetro. Después de esto, verificamos si la URL solicitada es ?json o ?vcard y servir los datos apropiados. De lo contrario, se muestra la página habitual acerca de.

CSS

La mayor parte del diseño de la página Acerca de es bastante sencillo. Sin embargo, se usa una parte justa de CSS3 para mantener la cantidad de imágenes al mínimo. Los dos botones:Encuéntrame en Facebook y Sígueme en twitter , que se colocan debajo del texto, son hipervínculos ordinarios con un .grayButton nombre de la clase. Puedes ver la definición de esta clase a continuación:

activos/css/estilos.css

a.grayButton{
    padding:6px 12px 6px 30px;
    position:relative;

    background-color:#fcfcfc;
    background:-moz-linear-gradient(left top -90deg, #fff, #ccc);
    background:-webkit-linear-gradient(left top -90deg, #fff, #ccc);
    background:linear-gradient(left top -90deg, #fff, #ccc);

    -moz-box-shadow: 1px 1px 1px #333;
    -webkit-box-shadow: 1px 1px 1px #333;
    box-shadow: 1px 1px 1px #333;

    -moz-border-radius:18px;
    -webkit-border-radius:18px;
    border-radius:18px;

    font-size:11px;
    color:#444;
    text-shadow:1px 1px 0 #fff;
    display:inline-block;
    margin-right:10px;

    -moz-transition:0.25s;
    -webkit-transition:0.25s;
    transition:0.25s;
}

a.grayButton:hover{
    text-decoration:none !important;
    box-shadow:0 0 5px #2b99ff;
}

a.grayButton:before{
    background:url('../img/icons.png') no-repeat;
    height: 18px;
    left: 4px;
    position: absolute;
    top: 6px;
    width: 20px;
    content: '';
}

a.grayButton.twitter:before{
    background-position:0 -20px;
}

El código anterior aplica un degradado lineal CSS3 al botón, sombras de texto y esquinas redondeadas. También define una transición de 0,25 segundos, que anima el brillo que se aplica al pasar el mouse por encima. También estamos usando el :before pseudo elemento para crear el icono que va con el botón. Como estamos usando un sprite, lo único que difiere entre los dos botones es el desplazamiento de la imagen de fondo.

Después de esto tenemos la opción "Descargar como vCard " y "Obtener como un archivo JSON " enlaces:

activos/css/estilos.css

#links{
    text-align:center;
    padding-top: 20px;
    border-top:1px solid #4a4a4a;
    text-shadow: 1px 1px 0 #333333;
    width:655px;
    margin:0 auto;
}

#links a{
    color: #ccc;
    position:relative;
}

#links > a{
    display: inline-block;
    font-size: 11px;
    margin: 0 10px;
    padding-left:15px;
}

#links > a:before{
    background: url("../img/icons.png") no-repeat -10px -60px;
    position:absolute;
    content:'';
    width:16px;
    height:16px;
    top:2px;
    left:-4px;
}

#links > a.vcard:before{
    background-position: -10px -40px;
    top: 0;
    left: -8px;
}

#links p{
    color: #888888;
    font-size: 10px;
    font-style: normal;
    padding: 30px;
}

Como el #links El elemento de sección contiene más que estos enlaces (contiene un párrafo con un enlace a una gran imagen de retrato de Levy Carneiro Jr.), tenemos que limitar el estilo a los elementos de anclaje que son hijos directos de la sección.

¡Con esto, nuestra página acerca de PHP y CSS3 está completa!

Para terminar

Puede usar esta página acerca de como un simple marcador de posición para su sitio web personal. También puede usar una base de datos de usuarios existente y crear hermosos perfiles para sus usuarios. En combinación con algunos de nuestros tutoriales anteriores, puede mostrar sus publicaciones más recientes en Facebook, imágenes de Flickr o tweets como una página de inicio personalizada.

Creación de una página Acerca de basada en PHP y CSS3

HTML

index.php

PHP

config.php

acerca de la página.clase.php

index.php

CSS

activos/css/estilos.css

activos/css/estilos.css

Para terminar

El objeto interactivo con forma de engranaje hecho con CSS y JavaScript.

Tematización de sitios web oscuros/claros con variables CSS

¿Cómo cambiar la clase CSS a niños dentro de un SVG?

Css Media y propiedades de pantalla

Consejos de CSS sobre imágenes que necesita saber

Tutorial de control deslizante de carrusel con HTML, CSS y JavaScript