Sistema de plantilles simples amb Php (N. Bàsic)

Després d’un temps sense escriure res al blog per motius familiars (visiteu el blog de la Berta i sabreu perquè) he trobat una mica de temps per fer un tutorial sobre Php relacionat amb la maquetació de pàgines i les plantilles. Una de les coses més simples (i a la vegada útils) de php és que et permet crear plantilles de les parts fixes d’una pàgina que són invariables en tots els documents html d’un website: la capçalera, el menú, el peu de la pàgina, etc. Hi ha molts altres sistemes que permeten reutilitzar aquestes parts en cada pàgina sense haver d’escriure el codi una i altra vegada, simplificant moltíssim les modificacions ja que només s’ha de tocar un arxiu, però m’ha semblat que fer-ho a partir de funcions Php és un dels sistemes més ràpids i fàcils d’aprendre, sobretot per qui no es vulgui complicar massa en aprendre altres llenguatges (com ara Smarty).

El funcionament és molt simple. Es tracta de crear una funció per cada element de la pàgina que sigui igual en tot el website i així poder reutilitzar-lo en tots els documents. Recomano guardar l’arxiu que conté les funcions en una carpeta que tingui com a nom inc (que ve d’include), per tenir una mica ordenada la nostra pàgina.

Bé, comencem amb el codi. Crearem un arxiu anomenat estructura.php (el nom és només una idea) que serà el que contindrà les funcions que generaran l’estructura de la nostra pàgina i que utilitzarem com a plantilla dels arxius que formaran el nostre website, havent de canviar només la part corresponent al contingut principal de la pàgina.

<?php
/*Arxiu estructura.php que conté les funcions que generen l’estructura invariable de la nostra pàgina*/  

/*
Funció obrirPagina() que obre el document html, el head, escriu els metatags, el títol i carrega els arxius externs que han d’estar disponibles a totes les pàgines, com per exemple l’arxiu d’estils css

PARÀMETRES:
$title -> El títol que apareix a la barra del navegador
$keywords -> Paraules clau de la pàgina
$descripcio -> Descripció de la pàgina útil pels buscadors
*/

//Declarem la funció obrirPagina()
function obrirPagina($title, $keywords, $description){ ?>
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
    <html xmlns=”http://www.w3.org/1999/xhtml”&gt;
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
    <meta name=”Robots” content=”all” />
    <meta name=”Author” content=”Adrià Colomer Serra – Osona Disseny Web” /> 
    <meta name=”description” content=”<?php echo $description; ?>” />
    <meta name=”keywords” content=”<?php echo $keywords; ?>” />
    <title><?php echo $title; ?></title> 
    <link rel=”stylesheet” type=”text/css” href=”http://www.elvostrewebsite.com/css/estils.css&#8221; />
<?php
}

/*
Funció obrirContingut() que tanca el head de la pàgina, imprimeix el menú i deixa obert el div principal on anirà el contingut variable de cada arxiu del nostre website. Opcionalment podria rebre com a paràmetre el títol de la pàgina que aniria dintre de <h1></h1>
*/

//Declarem la funció obrirContingut()
function obrirContingut(){ ?>
    </head>
    <body>
        <div id=”wrapper”>
             <div id=”header”>Aquí va la capçalera de la nostra pàgina</div>
             <div id=”mainNav”>Aquí aniria el codi del nostre menú</div>
             <div id=”mainContent”>
<?php
}

/*
Funció tancarPagina() que tanca el contingut principal, imprimeix el peu de pàgina i tanca el wrapper, el body i l’arxiu html
*/

//Declarem la funció tancarPagina()
function tancarPagina(){ ?>
             </div>   
             <div id=”footer”>Aquí aniria el contingut del peu de pàgina</div>
        </div>
    </body>
    </html>
 </head>
<?php
}
?>

 

Bé, aquest seria l’aspecte general del nostre arxiu estructura.php. Com veieu conté 3 funcions (es poden incloure més funcions, tantes com contingut invariable tingui la pàgina) i es poden fer tan simples o complexes com es desitgi. Lògicament poden tenir consultes a bases de dades per imprimir menús i continguts dinàmics.

Com podeu comprobar, la primera funció ens deixa el <head> obert. Això ens permetrà incloure arxius externs només en pàgines concretes, sense que el navegador els hagi de carregar a totes les pàgines innecessàriament. També podeu veure com passem per paràmetre el títol, la descripció i les paraules clau d’una pàgina, ja que ens interessa que aquestes tres coses siguin diferents a cada arxiu del nostre website.

Ara només ens queda crear un arxiu anomenat index.php (podria ser qualsevol altre), incloure-hi l’arxiu estructura.php per poder fer servir les funcions i ja podrem crear la nostra pàgina d’una manera molt senzilla i ràpida. El codi de l’arxiu index.php seria el següent:

<?php
include(‘inc/estructura.php’); 

obrirPagina(“Títol de la pàgina principal”, “paraules, clau, de, la, pàgina”, “Descripció de la pàgina”);
?>
<!– Aquí podem carregar arxius css, javascript o el que desitgem. També es pot deixar en blanc –>

<?php
obrirContingut();
?>
<!– Aquí hi aniria el contingut variable de cada pàgina. Al tractar-se de l’arxiu index.php podria anar-hi una presentació del website, o el que sigui –>

<?php
tancarPagina();
?> 

Bé, ja heu pogut comprovar que és molt fàcil crear cadascun dels arxius del nostre website amb un sistema de plantilles a partir de Php. Simplement heu de crear les funcions que necessiteu, incloure l’arxiu que les conté a cada pàgina i fer-les servir. Si mai heu d’afegir un apartat al menú de la pàgina només haureu de retocar la part corresponent del codi del menú a dins la funció obrirContingut() i ja ho trindreu modificat per totes les pàgines del website, ja siguin 3 o 100, amb l’estalvi de temps que això suposa.

Pareu atenció sobretot amb la sintaxis per declarar les funcions (repasseu els manuals de Php) i la ruta on teniu guardat el vostre arxiu estructura.php. Una última recomanació: en tots els arxius externs, imatges, o el que sigui, que carregueu des de l’arxiu on declareu les funcions utilitzeu rutes absolutes, ja que si teniu pàgines que han d’utilitzar-lo i es troben en subcarpetes, els arxius no es carregarien bé i us podrieu tornar bojos buscant errors en el codi quan no n’hi han.

L’exemple d’aquest post és molt simple i només pretén il·lustrar la senzillesa amb la que podem crear les nostres plantilles Php. Espero que us hagi servit. En el pròxim post intentaré ensenyar com crear una estructura bàsica d’una pàgina i maquetar-la amb <div> i un arxiu css extern. Podeu deixar els vostres comentaris o dubtes. Gràcies.

Modificar el color d’un cotxe (N.mig)

En aquest tutorial us explicaré una tècnica bastant senzilla per canviar el color d’un cotxe utilitzant el Photoshop. Aplicant el mateix mètode també podrieu canviar el color d’altres objectes. Podríem dir que el més important és tenir paciència i treballar bé la selecció de la part que volem modificar. Hem de ser molt meticulosos.

Aquesta és la imatge que utilitzarem en aquest exemple:

Imatge cotxe inicial
Imatge inicial

Com podeu veure, el fons de l’imatge té uns tons blavosos. Ho podríem modificar abans de començar, però ho farem més endavant perquè així us puc explicar unes operacions que podem fer amb les seleccions.

Primer de tot hem de seleccionar la carrosseria del cotxe. Aprofitant que és de color groc i es diferencia fàcilment de les altres parts de l’imatge, utilitzarem l’eina “Varita mágica” que selecciona colors semblants. Per seleccionar una gamma de colors més o menys àmplia podem modificar el valor de “Tolerancia”. Per aquesta imatge l’hem deixat a 40.

Varita mágica   Tolerància de la varita mágica
Seleccionem la “Varita mágica” i ajustem el valor de la tolerància  a 40

Per seleccionar la part que ens interessa premem el botó esquerra del ratolí damunt de la carrosseria. Per anar afegint parts que no ens hagim quedat seleccionades simplement hi hem d’apretar a sobre mantenint la tecla “Shift” premuda (apareixerà un signe més al punter de la “varita mágica” – veure imatge). Si no ho féssim perderíem la selecció anterior.

Seleccionant la carrosseria
Seleccionem la carrosseria utilitzant la “varita mágica” juntament amb la tecla “Shift”
Modo máscara

Ara ja tenim la major part de la carrosseria seleccionada, però hi ha parts petites que no ho estan. Una manera per poder-les seleccionar és treballar amb el “Modo máscara”. Per fer-ho, hem de prémer el botó que ens mostra l’imatge de l’esquerra. Us explico breument com funciona el “Modo máscara”: si pintem (utilitzant el pinzell normal) amb el color negre, a l’imatge ho veurem de color vermell i voldrà dir que aquella part NO la tenim seleccionada. En canvi, tot el que pintem amb el color blanc quedarà transparent i voldrà dir que ho tenim seleccionat. Si tornem al mode normal (el botó de l’esquerra) podrem comprovar quines parts tenim seleccionades. A l’imatge següent es mostra com algunes parts primes de la carrosseria s’havien quedat sense seleccionar.

Parts no seleccionades
Modo máscara. Perfeccionem la selecció

Amb paciència anirem pintant per seleccionar tota la carrosseria. Convé que dediquem temps a aquesta operació perquè en dependrà el resultat final. Bé, fem un parèntesis. Tornem al mode normal on comprovem que totes les parts estan seleccionades correctament i us explico un mètode per guardar la selecció. Així la podríem fer servir més endavant en cas que ens equivoquéssim.

Per guardar una selecció anem a “Selección > Guardar selección…”. Se’ns obrirà una finestra on podrem posar nom a la selecció i quedarà guardada. Per fer-la servir un altre cop només hem d’anar a “Selección > Cargar selección…”, triar el nom amb que l’havíem guardat i ja la tornem a tenir activa.

Aprofitem això que hem après per millorar els colors del fons de l’imatge:

  1. “Selección > Guardar selección…” – Guardem la selecció de la carrosseria.
  2. “Selección > Deseleccionar” – Eliminem la selecció actual.
  3. “Imagen > Ajustes > Color automático” o bé premem Mayus+Ctrl+B – Millorem els colors del fons.
  4. “Selección > Cargar selección…” – Tornem a activar la selecció de la carrosseria.

Ara ja podem modifiar el color del cotxe. Hi ha molts mètodes per poder-ho fer i segurament en farem servir un o altre depenent de l’imatge i del resultat que volem aconseguir. En aquest exemple utilitzarem l’opció “Imagen > Ajustes > Tono/Saturación”, ja que és una de les més senzilles i intuitives. Se’ns obrirà la finestra que es mostra a l’imatge següent:

Finestra Tono/Saturación
Finestra de Tono / Saturación. Colorear està seleccionat!

Ens hem de fixar que tinguem marcades les dues opcions de baix a la dreta: colorear i previsualizar. Ara només ens queda anar modificant els valors de Tono, Saturación i Luminosidad fins a trobar un resultat que ens agradi i que sigui real. En aquest cas hem fet servir els valors que es poden veure a l’imatge anterior. Us explico breument què controla cada un:

  • Tono: la gamma de colors.
  • Saturación: l’intensitat del color seleccionat a tono (va de gris al color pur).
  • Luminosidad: la brillantor del color.

Ja només ens queda deseleccionar la carrosseria i podem admirar el resultat final de l’imatge.

Imatge cotxe inicial
Imatge inicial
Resultat final
Resultat final

Bé, espero que aquest tutorial us hagi agradat. Podeu deixar els vostres comentaris, dubtes… el que sigui. Fins la pròxima entrega. Acabarem tunejant tot el cotxe!

Crear accions (N.bàsic)

En aquest tutorial no us ensenyaré a realitzar cap efecte espectacular. Ni a retocar imatges. Ni a fer un fotomuntatge. Però segurament serà un dels tutorials més útils de tots els que faré. Aprendre a dominar les Accions de Photoshop és una de les millors inversions que podeu fer, perquè us estalviareu hores o, fins i tot, dies de feina. Sí, no exagero i ara veureu perquè.

Primer de tot hem de localitzar la finestra Accions. Si no la teniu oberta aneu a Ventana > Acciones o bé premeu la tecla F9. Té aquest aspecte:

Ventana Acciones
Finestra Accions

A la part inferior de la finestra hi ha 6 icones molt intuitius. A continuació us faré una breu descripció de cada un.

  1. “Detener ejecución/grabación”. Serveix per parar l’execució d’una acció o per parar de gravar.
  2. “Iniciar grabación”. Serveix per gravar les nostres pròpies accions.
  3. “Ejecutar selección”. Serveix per començar l’execució de l’acció seleccionada.
  4. “Crear grupo nuevo”. Serveix per crear una carpeta per organitzar les nostres accions per temes.
  5. “Crear acción nueva”. Serviex per crear una nova acció.
  6. “Eliminar”. Serveix per eliminar l’acció que tinguem seleccionada.

Ara que ja ens hem familiaritzat amb la finestra “Acciones” us explicaré com crear les nostres accions que ens serviran per fer automàticament feines molt repetitives, com per exemple, optimitzar les imatges per adjuntar-les en un e-mail, redimensionar-les, aplicar retocs automàtics a fotografies… En definitiva, podem crear accions per qualsevol procediment que necessitem fer sovint.

En aquest tutorial crearem una acció que ens permetrà canviar el tamany d’una fotografia, optimitzar el seu pes per enviar-la en un e-mail i tancar-la. Primer de tot crearem una nova carpeta d’accions. L’anomenarem “Retoc bàsic fotos”.

Crear nova carpeta d’accions
Botó per crear un nou grup d’accions
Grup nou d’accions
Finestra per introduir el nom del nou grup d’accions

La primera imatge ens mostra el botó que hem de prémer per crear un nou grup d’accions (l’icona de la carpeta). Se’ns obrirà un quadre de diàleg com el que mostra la segona imatge on podrem posar nom a la nova carpeta. En aquest cas “Retoc bàsic fotos”. Premem el botó “OK” i ja la tenim creada a la finestra accions.

Carpeta creada
Grup d’accions creat a la finestra “Acciones”

Ara que ja tenim el grup nou creat ens disposarem a crear una nova acció. Simplement hem de prémer el botó “Crear acción nueva” i se’ns obrirà un quadre de diàleg com el que se’ns mostra a continuació.

Crear nova acció
Botó per crear una nova acció
Propietats nova acció
Quadre de diàleg per definir les propietats de la nova acció

En aquest quadre de diàleg podem posar nom a la nova acció. En aquest cas li hem posat “Optimització x mail” perquè el nom ha de descriure bastant bé el que realitzarà l’acció. Això ens permetrà trobar-la ràpidament a la finestra “Acciones”. Com podeu comprovar també li podem assignar el grup d’accions, una tecla de funció (F1, F2, etc.) per executar-la i un color per identificar-la amb més facilitat. Només ens queda prémer el botó “Grabar”. A partir d’aquest moment, cada pas que fem quedarà guardat a l’acció. A continuació modificarem el tamany de l’imatge, optimitzarem el pes, la guardarem i tancarem l’original.

Per canviar el tamany de l’imatge hem d’anar a Imagen > Tamaño de imagen… i se’ns obrirà un quadre de diàleg on podrem introduir el nou tamany.

Canviar tamany d’imatge
Definim el tamany de l’imatge

En aquest cas volem que l’imatge tingui 300 píxels d’amplada. L’altura es modificarà automàticament perquè tenim activada l’opció “Restringir proporciones”. Premem el botó “OK” i ja hem canviat el tamany. Ara optimitzarem el pes de l’imatge. Per fer-ho utilitzarem l’opció “Guardar para web…” que podem trobar al menú “Archivo”. Se’ns obrirà una finestra com la que es mostra a continuació.

Guardar para web
Finestra de l’opció “Guardar para web…”

A l’esquerra sempre veurem l’imatge original, i a la dreta l’optimitzada. En l’exemple hem guardat l’imatge en format .jpg i a una calitat mitjana. Premem el botó “Guardar” i se’ns obrirà el típic quadre de diàleg on introduirem el nom amb el que volem guardar l’imatge optimitzada.

Opcions guardar
Definim la calitat de l’imatge

Ja només ens queda tancar l’imatge original. Ens preguntarà si volem guardar els canvis i li direm que no, així ens assegurem que no modifiquem l’imatge bona. Finalment hem de prémer el botó “Detener grabación” i ja tindrem la nostra acció creada. Ho podem comprovar a la finestra “Acciones” que ens ha quedat de la següent manera:

Acció creada
Nova acció creada

Com podeu veure el programa ha anat gravant cada un dels passos que hem realitzat. A partir d’ara ja podrem utilitzar l’acció amb les altres imatges que tinguem. Però tal i com ho tenim ara, totes les imatges que modifiquem amb l’acció que hem creat, tindran una amplada de 300 píxels, es guardaran en format .jpg a una calitat mitjana i tancarem l’original sense guardar-ne els canvis. Però què passa si volem fer servir aquesta acció però necessitem que l’amplada de l’imatge sigui de 400 píxels? O si la volem guardar a una calitat diferent de la que hem fet servir quan hem creat l’acció? O si volem guardar els canvis i perdre la foto original? No us preocupeu. No haurem de crear una acció diferent per cada cas. Simplement hem de prémer sobre el requadre buit que hi ha al costat de cada pas i podrem modificar els paràmetres que desitgem.

Opció tamany   Opció guardar

   Opció tancar
Diferents opcions per canviar els paràmetres dels passos de l’acció

En les 3 imatges anteriors podem veure com en la primera hem marcat el requadre de l’esquerra de “Tamaño de imagen”, en la segona el d'”Exportar” i en la tercera el de “Cerrar”. En el primer cas l’acció es pararà per preguntar-nos el tamany final de l’imatge. En el segon cas es pararà per preguntar-nos en quin format la volem guardar i en quina calitat, i en l’últim cas ens preguntarà què volem fer amb l’imatge original. També hauríem pogut marcar les 3 opcions a la vegada i a cada pas es pararia per preguntar-nos tots els  paràmetres.

Bé, ja heu vist que és molt fàcil crear una nova acció. El límit el poseu vosaltres. Podreu automatitzar molts procediments que necessiteu fer servir sovint. Em creieu ara quan deia que us estalviareu hores o fins i tot dies de feina?

Espero que aquest tutorial us hagi servit.

Eliminar elements d’una fotografia (N.bàsic)

En aquest mini tutorial us explicaré el funcionament bàsic de l’eina “Pincel Corrector”. És molt potent i útil, sobretot a l’hora d’eliminar elements que poden arribar a aixafar completament una fotografia: cables elèctrics, grafitis en alguna paret, etc. El funcionament és molt simple i amb una mica de paciència i de pràctica podem aconseguir resultats impresionants, arribant a transformar per complet una foto.

En aquest post eliminarem una xapa que hi ha en una paret d’escalada, però podríem eliminar qualsevol cosa (pals d’electricitat, grafitis, forats…). L’imatge que tractarem és la següent:

Foto per eliminar-hi la xapa
Imatge inicial

Amb el “pincel corrector” eliminarem la xapa metàl·lica que hi ha al mig d’una manera molt senzilla. Abans de començar, us recomano treballar sempre amb una còpia de l’imatge original o bé duplicar-ne la capa del fons. Doncs va, entrem en matèria.

Seleccionar Pincel Corrector

Primer de tot sel·leccionarem l’eina “pincel corrector”. Està situada just al costat del pinzell normal (veure imatge de l’esquerra). Aquesta eina funciona de la següent manera: 

  • – Busquem la zona que ens servirà de mostra (en aquest cas una zona de roques).
  • – Premem la tecla “Alt” perquè ens surti el cursor de sel·lecció (en forma de creu) i sense deixar d’apretar-la cliquem el botó esquerra del ratolí just al punt que volem fer servir de mostra.
  • – Pintem, com si utilitzéssim el pinzell normal, a sobre la xapa sense preocupar-nos massa de fer-ho molt exacte. En el meu cas ho he fet amb un tamany de pinzell de 19 píxels.
  • – Deixem de prémer el botó del ratolí i comprovem el resultat final.

En principi ja tenim l’imatge acabada. Si no ens acaba de convèncer el resultat podem provar amb diferents tamanys de pinzells o bé sel·leccionant altres punts de mostra.

A continuació podeu veure 3 imatges. En la primera estem sel·leccionant el punt de mostra, en la segona estem pintant a sobre la xapa i en la tercera podeu comprovar el resulta final.

Sel·leccionar punt de mostra
1. Sel·leccionar punt de mostra
Pintem a sobre la zona que volem modificar
2. Pintem a sobre la zona que volem modificar (veiem com la zona de mostra també es desplaça

Les següents imatges ens mostren l’abans i el després. Com podeu comprovar, ràpidament i amb molt poc esforç, hem eliminat un element de l’imatge utilitzant el “pincel corrector”.

Foto per eliminar-hi la xapaResultat final de l’imatge
Resultat després d’utilitzar el “pincel corrector”

Ja heu vist que utilitzant les eines adequades és molt fàcil realitzar modificacions importants a una imatge utilitzant el Photoshop. També podríem haver eliminat qualsevol altre cosa. Us animo a que ho proveu amb imatges vostres i no deixeu de practicar. Amb paciència podeu arribar a eliminar persones o a reparar completament una fotografia estripada (això ho deixem per un tutorial de nivell més avançat).

Espero que el post us hagi servit per aprendre alguna cosa. No dubteu en deixar algun comentari!

Efecte rollover (N.mig)

En ocasions, utilitzar imatges per crear els menús, pot ser interessant per millorar l’aspecte de la pàgina. Però la majoria de tècniques bàsiques per crear un efecte de RollOver tenen un problema: la càrrega de les imatges. Això provoca que durant uns instants, al col·locar el ratolí a sobre l’enllaç, no aparegui cap imatge (sobretot en les conexions més lentes). Per solucionar aquest problema i no haver d’afegir codi en JavaScript (que alguns usuaris tenen desactivat) hi ha una tècnica en CSS que es basa en crear una sola imatge per tots els estats dels enllaços, jugant amb la part visible i la posició.

Aquest és el codi HTML per crear el menú. Fixeu-vos que els elements del menú es troben dins d’una etiqueta <span> que ens permetrà ocultar el text però sense reduir l’accessibilitat de la pàgina (i els buscadors el podran llegir igualment).

<div class="menu">
      <a href="biografia.php" id="biografia"><span>Biografia</span></a>
      <a href="obres.php" id="obres"><span>Obres</span></a>
      <a href="exposicions.php" id="exposicions"><span>Exposicions</span></a>
      <a href="contactar.php" id="contactar"><span>Contactar</span></a>
      <a href="estudi.php" id="estudi"><span>L'estudi</span></a>
 </div>

Per crear l’efecte rollOver, primer de tot crearem una imatge que ocupi el doble de l’amplada de l’enllaç. La meitat esquerra serà la que es veurà normalment, la meitat dreta es veurà en l’estat :hover (l’imatge serà diferent per cada element del menú).

Enllaç menú
Imatge amb els dos estats per crear l’efecte

Ara hem de definir els estils del menú. Llegiu els comentaris per saber què fa cada part.

/*Amaga el text alternatiu del menú*/
    a span {display:none;}

/*Imatges que substitueixen el text de cada elment del menú, basant-nos en l'id*/
   #biografia {background-image:url(../images/menu/biografia.gif);}
   #obres {background-image:url(../images/menu/obres.gif);}
   #exposicions {background-image:url(../images/menu/exposicions.gif);}
   #contactar {background-image:url(../images/menu/contactar.gif);}
   #estudi {background-image:url(../images/menu/estudi.gif);}

/*Definim els enllaços com elements de block per crear un menú vertical, els assignem l'amplada i la llargada i posicionem l'imatge segons l'estat de l'enllaç*/
.menu a:link, .menu a:visited {
    display:block;
    width:175px;
    height:30px;
    line-height:30px;
    background-repeat:no-repeat;
    background-position:left top;
    }

.menu a:hover, ..menu a:active, .menu a:focus {
    background-position:right top;
    }

L’amplada original de l’imatge era de 350px. Fixeu-vos que l’amplada de l’enllaç és de la meitat (175px) i posicionem l’imatge de fons a l’esquerra, així només es mostrarà la part que ens interessa. L’únic que fem després és moure l’imatge per alinear-la a la dreta i poder veure la part que representa l’estat :hover. Així de senzill.

Part visible en estat a:link
Part visible en l’estat a:link. Alineada a l’esquerra
Part visible en estat a:hover
Part visible en l’estat a:hover. Alineada a la dreta.

Per comoditat, properament crearé tots els exemples dels tutorials en una pàgina a part, ja que en aquest blog és més complicat (si no vols pagar per editar els arxius CSS).

Espero que us hagi servit aquest post. Per qualsevol dubte o comentari deixeu un missatge.

Inauguració del blog!

Benvinguts al meu blog personal. Espero que hi trobeu algun tutorial que us sigui d’utilitat (de moment ho dubto, fins que no el comenci a omplir). Intentaré tractar temes de tots els nivells, per ajudar als “newbies” a fer les seves primeres línies de codi i per ajudar als que porten més temps programant a trobar conceptes nous per aprendre.

 Els principals llenguatges que tractaré són: HTML, CSS, Php, MySQL i ActionScript. També intentaré oferir bons tutorials de retoc de fotografies digitals i de manipulació d’imatges. A vegades se m’escaparà algun article d’opinió. Si serveixen perquè algú hi reflexioni una mica ja em dono per satisfet.

No deixeu de visitar el blog. Procuraré afegir-hi nous continguts tant sovint com pugui.

Gràcies a tots i no dubteu en escriure comentaris. Tots seran benvinguts i publicats (tant positius com negatius). L’únic requisit és el respecte.

Fins aviat.