Superposicions en HTML

[vc_row][vc_column][vc_column_text]

/**
 * Detects if two elements are colliding
 *
 * Credit goes to BC on Stack Overflow, cleaned up a little bit
 *
 * @link http://stackoverflow.com/questions/5419134/how-to-detect-if-two-divs-touch-with-jquery
 * @param $div1
 * @param $div2
 * @returns {boolean}
 */
var is_colliding = function( $div1, $div2 ) {
	// Div 1 data
	var d1_offset             = $div1.offset();
	var d1_height             = $div1.outerHeight( true );
	var d1_width              = $div1.outerWidth( true );
	var d1_distance_from_top  = d1_offset.top + d1_height;
	var d1_distance_from_left = d1_offset.left + d1_width;

	// Div 2 data
	var d2_offset             = $div2.offset();
	var d2_height             = $div2.outerHeight( true );
	var d2_width              = $div2.outerWidth( true );
	var d2_distance_from_top  = d2_offset.top + d2_height;
	var d2_distance_from_left = d2_offset.left + d2_width;

	var not_colliding = ( d1_distance_from_top < d2_offset.top || d1_offset.top > d2_distance_from_top || d1_distance_from_left < d2_offset.left || d1_offset.left > d2_distance_from_left );

	// Return whether it IS colliding
	return ! not_colliding;
};

[/vc_column_text][vc_column_text]FONT: https://gist.github.com/jtsternberg/c272d7de5b967cec2d3d[/vc_column_text][/vc_column][/vc_row]

Error 404 WordPress poc comú

[vc_row][vc_column][vc_column_text]Fa uns dies em vaig trobar amb una situació inesperada que em va preocupar durant hores durant la instal·lació d’un WordPress. Havia creat el domini i el hosting, i havia pujat via FTP els fitxers del nucli de WordPress i els del Tema que havia escollit. Tot plegat, ho havia de crear dins d’un subdirectori del meu servidor habitual. Vaig crear la base de dades corresponent i pretenia procedir a enllaçar els fitxers amb la BBDD.

El fenòmen estrany es va manifestar quan, en el moment que vaig accedir al subdirectori amb el navegador per fer la connexió, aquest em va retornar un Error 404 i m’indicava que no trobava el WordPress acabat de crear.

Desgraciadament, un Error 404 pot tenir moltes causes. Durant hores, vaig recórrer a fòrums, tutorials i servei tècnic del servidor a fi de rescatar ajuda per solucionar un incident tant inesperat com desconcertant.

Finalment, en un fòrum un usuari recomanava entrar a la url següent:

http://[elTeuDominiWordPress]/wp-admin/install.php

En fer-ho, el WordPress em va retornar el missatge “La instal·lació ja està feta”. Totalment desconcertant i enigmàtic…

Vaig entrar el servidor via Filezilla i vaig trobar-me, al directori root/html un fitxer totalment innecessari anomenat config.php. Aquest fitxer, sens dubte, provenia d’una instal·lació anterior i no aportava res al directori. Per aquest motiu, el vaig suprimir.

Com era d’esperar, a partir d’aquell moment vaig poder instal·lar satisfactòriament el meu nou WordPress.

A qui pugui interessar…[/vc_column_text][/vc_column][/vc_row]

NinjaSEO, un mantra clar en qüestions de SEO

[vc_row][vc_column][vc_column_text]Si bé al post on comentava 40deFiebre us deia, pràcticament, que és la Bíblia del SEO a Espanya, afirmo que NinjaSEO és un mantra; una guia per seguir la direcció correcta en el món del posicionament per buscadors d’internet, sobretot quan ens estem forjant de manera autodidacta.

NinjaSEO té 2 grans apartats: SEO Off Page i SEO On Page. Respectivament, ens expliquen tot el que hem de saber per no perdre’ns en les pràctiques de SEO externes i internes a la nostra pàgina web, amb continguts extensos pensats per anar-los llegint amb calma mentre els assimilem. No mentiré, cal dedicar-hi una estona, sobretot si sou iniciats en SEO, però des del meu punt de vista val la pena.

Entreu a devorar la pàgina web de NinjaSEO!

Ah, i no us perdeu el seu blog ple de qüestions interessants!

Que posicioneu de gust![/vc_column_text][/vc_column][/vc_row]

Dos programes de monitoreig remot!

[vc_row][vc_column][vc_column_text]Jo coneixia TeamViewer des de fa anys. TeamViewer és un software pensat per monitorejar un ordinador remot en cas de necessitat, habitualment per resoldre una incidència tècnica o fer una comprovació. TeamViewer és molt versàtil i està disponible per Windows, Mac, Linux, Raspberry Pi, Chrome OS, Android i iOS. Per mi era l’eina, en aquests casos.

Recentment, gràcies a un servei tècnic al que vaig haver de recórrer per un projecte de l’estudi, vaig descobrir AnyDesk. Potser ja el coneixeu, però a mi em va sorprendre la facilitat amb que es descarrega, executa i funciona el programa en línia. AnyDesk, a més, resulta ser encara més versàtil, ja que està disponible per tots els Sistemes Operatius anteriors i, a més, FreeBSD.

No sé encara quina de les dues eines acabaré utilitzant més, però les dues són molt interessants i ens poden treure de més d’un obstacle. Això sí, tanqueu la sessió quan acabeu, que no us facin una ullada al correu![/vc_column_text][/vc_column][/vc_row]

40defiebre, un “must” de la mà de SocialMood

[vc_row][vc_column][vc_column_text]Em declaro FAN de SocialMood i de 40deFiebre, el seu blog de SEO i xarxes socials. Si sou coneixedors del “mundillu” sabreu que l’empresa madrilenya és un dels referents l’estat espanyol dins el Search Engine Optimization i les publicacions que fan al seu blog són, alhora que interessants i didàctiques, properes i fàcils de seguir (si més no, si tens a mà el seu glossari de termes del món digital).

Si no els coneixeu, teniu lectura per dies entrant a 40deFiebre!

Ah!, i no deixeu d’escoltar-vos els seus Podcasts!

[/vc_column_text][/vc_column][/vc_row]

[vc_row][vc_column][vc_column_text]En aquesta ocasió vull donar una mica de protagonisme a un nom en concret: Misha Rudrastyh.

Es tracta d’un desenvolupador de WordPress amb trajectòria des de 2009 fins l’actualitat, que recull en la seva web un seguit de tutorials específics per dominar millor aquest Sistema de Gestió de Continguts o CMS (inicials en anglès de Content Management System). Jo n’he utilitzat un per una funcionalitat d’un e-commerce, però us pot ser útil en múltiples ocasions.

Podeu veure tot el que fa entrant a la seva pàgina web.

Salut, Misha Rudrastyh![/vc_column_text][/vc_column][/vc_row]

Resolucions de monitor més habituals actualment

Juan Diego de Usera resumia en un article del portal HardZone (03.03.2018) les diverses resolucions de pantalla de monitors al llarg de la història i en funció del dispositiu. En aquesta publicació faig córrer aquesta llista, ja que m’ha anat molt bé revisar-la en diverses ocasions.

  • 1024 x 768 px (4:3): monitors de 14 i 15″.
  • 1280 x 1024 px (4:3): monitors de 17 i 19″.
  • 1600 x 1200 px (4:3): monitors de  19 i 21″.
  • 1280 x 800 px (16:10): monitors de 17 i 19″.
  • 1680 x 1050 px (16:10): monitors de 19 i 21″.
  • 1920 x 1200 px (16:10): monitors de 22, 24, 26″
  • 2560 x 1600 px (16:10): monitors per sobre de 26″.
  • 1280 x 720 px (16:9): monitors de 17 i 19″. (HD)
  • 1366 x 768 px (16:9): monitors de 17 i 19″.
  • 1600 x 900 px (16:9): monitors de 19 i 22″.
  • 1920 x 1080 px (16:9): monitors de 24, 25, 27, 32″. (Full HD)
  • 2560 x 1440 px (16:9): monitors de 24, 27, 32″.
  • 3840 x 2160 px (16:9): monitors de 27, 32″ i endavant.  (4K)
  • 5120 x  2880 px (16:9): monitors per sobre de 40″. (5K)
  • 7680 x 4320 px (16:9): monitors per sobre de 50″. (8K)
  • 2560 x 1080 px (21:9): monitors de 25, 27 i 29″.
  • 3440 x 1440 px (21:9): monitors de 34″ i endavant.
  • 5120 x 2160 px (21:9): monitors de 32″ i endavant .

Enllaç a l’article original de Juan Diego de Usera, molt és complet aquí.

Cloud Convert. S’han acabat les incompatibilitats

Habitualment treballo en entorns Windows i Macintosh i sovint hi ha extensions de fitxers incompatibles d’un Sistema Operatiu a l’altre.

Això és així perquè tant Microsoft com Apple desenvolupen el programari específic pel seu propi S.O.

Afortunadament, avui en dia molts desenvolupadors – ja siguin grans corporacions o petits programadors que milloren el software open source o de codi obert – llancen al mercat programes igual de preparats per córrer en entorns Mac com Windows.

Tot i això, hi ha casos en que podem rebre d’un altre usuari un fitxer creat mitjançant un programa específic d’un Sistema Operatiu que no és el nostre. Llavors arriba el conflicte. Per exemple, si nosaltres treballem en Windows i un usuari de Mac ens fa arribar un arxiu amb la extensió “.pages” (el processador de textos per defecte de Mac, equivalent a Microsoft Word), no el podem obrir.

En aquestes ocasions, internet ens brinda solucions pràctiques. Us deixo l’enllaç a Cloud Convert. Es tracta d’una eina en línia destinada a passar arxius d’una extensió a una altra (sempre que siguin compatibles, es clar). Per exemple, permet passar fidelment aquell arxiu “.pages” que ens han enviat a un “.docx” que sí que podrem llegir.

Important! No es recomanen eines de conversió com aquesta en cas que el vostre objectiu sigui maquetar el fitxer que no podeu obrir.

Baixa’t el feed d’IG al teu PC

Com recuperem aquella imatge del nostre feed d’Instagram que ens agrada i que no tenim enlloc més?
Existeixen còpies de seguretat a IG?
Les imatges són descarregables?

La resposta a aquestes preguntes es SÍ.

Es poden baixar de cop totes les imatges del nostre propi compte d’Instagram anant a:

https://www.instagram.com/download/request/

o seguint els passos següents:

  1. Entrar a la Configuració del compte
    Rodeta Instagram
  2. Anar a “Privacy and Security”
    Opcions Instagram
  3. Baixar fins a “Data download”.
    Baixa Instagram
  4. Seguir les instruccions que ens dóna la xarxa social a partir d’aquest moment.

En qüestí de 48 hores, rebreu a al vostre email un enllaç des d’on descarregar no només les fotografies i vídeos del feed, sinó també Stories, comentaris dels posts, informació del perfil, etc.

ACTUALITZACIÓ:

Si voleu baixar només algunes imatges concretes, recomano GramSave. Veureu que és molt senzill d’utilitzar.

https://gramsave.com/

“loaders.css”; pràctics i originals

[vc_row][vc_column][vc_column_text]Ja sigui per estètica, per amanitzar una càrrega forçosament lenta o per trencar el gel d’una manera diferent, a vegades les webs incorporen “animacions pre-càrrega” (o preloaders, en anglès) que fan que aquells 3 segons abans no es mostra el contingut de la pàgina que ens intressa siguin més lleugers.

Aquest cop us deixo una petita però divertida llibreria de preloaders que m’ha cridat l’atenció per utilitzar-la en més d’una ocasió. Premeu el botó rosa![/vc_column_text][vc_btn title=”Aconsegueix-ho aquí” style=”3d” color=”pink” i_icon_fontawesome=”fa fa-github” add_icon=”true” link=”url:https%3A%2F%2Fconnoratherton.com%2Floaders|title:loaders.css|target:%20_blank|”][vc_column_text]Salut i CSS![/vc_column_text][/vc_column][/vc_row]

La practicitat de “.isInViewport()” jQuery

[vc_row][vc_column][vc_column_text]En aquesta ocasió parlaré d’un fragment de jQuery que m’ha facilitat la feina d’optimitzar la càrrega d’una pàgina plena d’elements <iframe>.

La pàgina, dissenyada amb una navegació vertical, requeria carregar iframes a mesura que es navega cap avall.

El problema: com que carregava contínuament, com més avall navegava, més lenta es tornava la pàgina web.

La solució: eliminar del DOM, aquells iframes que actualment no apareguin en pantalla, i mostrar només aquells que sí.

Ara bé… Com es fa?[/vc_column_text][vc_text_separator title=”Recerca” align=”align_left” border_width=”2″][vc_column_text]La cerca em va portar a un fòrum de Medium. Hi podeu entrar a través del botó següent:[/vc_column_text][vc_btn title=”Veure el fòrum (Meduim)” style=”3d” color=”inverse” i_icon_fontawesome=”fa fa-medium” add_icon=”true” link=”url:https%3A%2F%2Fmedium.com%2Ftalk-like%2Fdetecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2|title:Ves-hi|target:%20_blank|”][vc_column_text]L’autor del post, mostra un exemple a CodePen basat en els scripts següents:[/vc_column_text][vc_custom_heading text=”HTML” font_container=”tag:h5|text_align:left” google_fonts=””][vc_column_text]

<div id="fixed-red" class="fixed-red red-active"></div>
<div id="fixed-green" class="fixed-green"></div>
<div id="fixed-blue" class="fixed-blue"></div>
<div id="red" class="color"></div>
<div id="green" class="color"></div>
<div id="blue" class="color"></div>

[/vc_column_text][vc_custom_heading text=”JAVASCRIPT” font_container=”tag:h5|text_align:left” google_fonts=””][vc_column_text]

$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();
  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).on('resize scroll', function() {
  $('.color').each(function() {
  var activeColor = $(this).attr('id');
  if ($(this).isInViewport()) {
      $('#fixed-' + activeColor).addClass(activeColor + '-active');
    } else {
      $('#fixed-' + activeColor).removeClass(activeColor + '-active');
    }
  });
});

[/vc_column_text][vc_column_text]En termes generals, el script diferencia en quin moment l’objecte que volem és visible per pantalla (des del primer píxel i fins l’últim) i en quin moment ja no. Així, es poden diferenciar aquelles accions que cal executar en cada moment.

Per utilitzar aquests scripts cal que tingueu jQuery enllaçat al vostre HTML. En el meu cas, després d’adaptar-ho degudament al projecte, va funcionar correctament.

Salut![/vc_column_text][/vc_column][/vc_row]

Anàlisi de seguretat

[vc_row][vc_column][vc_column_text]Totes les pàgines webs requereixen un mínim manteniment per assegurar que es troben en òptimes condicions. Recentment he dut a terme exàmens de seguretat i tasques de protecció de la informació d’una web que presentava errors de seguretat i arxius maliciosos. Després d’això, us deixo recomanacions per actuar de manera ràpida i segura en cas que la vosatra web rebi un virus o u arxiu maliciós.

Què cal fer quan arriba una amenaça?

  1. Si utilitzeu algun CMS (WordPress, Joomla, Drupal, etc.) actualitzeu-lo a l’última versió i verifiqueu tots els plugins que considereu necessaris per al correcte funcionament de la vostra Web.
  2. Canvieu totes les contrasenyes dels comptes FTP, així com les de les bases de dades del domini, ja que podrien estar compromeses.
  3. Descarregueu el contingut de la web en local i analitzeu-lo amb un antivirus o antimalware actualitzat. Reviseu l’existència d’arxius no desitjats, normalment arxius del tipus .pl (perl), i arxius PHP amb noms sospitosos.
  4. Una vegada el contingut Web ha estat analitzat, netejat i corregit per a adaptar-lo als canvis anteriors, torneu a pujar la web al mateix lloc. Assegureu-vos que no deixeu cap rastre del contingut anterior.
  5. Reviseu els permisos de fitxers i directoris per evitar que aquests quedin exposats en Internet.
  6. Com a suggeriment, utilitzeu sempre codis Captcha pels formularis, i protegiu les caixes de comentaris en cas que n’utilitzeu.

[/vc_column_text][vc_column_text]

Eines de seguretat GRATUÏTES

Anàlisi local

Els anàlisis en local esl podeu dur a terme amb el vostre antivirus. Si no teniu cap antivirus instal·lat i/o voleu uns serveis mínims decents de manera gratuïta, us recomano que instal·leu Avast Antivirus al vostre equip.[/vc_column_text][vc_single_image image=”835″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https://www.avast.com/”][vc_column_text]En trobareu tota la informació aquí:[/vc_column_text][vc_btn title=”Anar a Avast Antivirus” style=”3d” color=”orange” link=”url:https%3A%2F%2Fwww.avast.com%2F|title:Anar%20a%20Avast%20Antivirus|target:%20_blank|”][vc_empty_space][vc_column_text]Anàlisi en línia

Si voleu, podeu executar anàlisis en línia, tant d’arxius concrets com de webs senceres, a alta velocitat amb Virus Total.[/vc_column_text][vc_single_image image=”831″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https://www.virustotal.com”][vc_column_text]Aquesta web fa ús d’un llarg llistat de softwares de seguretat per analitzar al detall el lloc web que li facilitem. Així, podem saber en segons i de manera gratuïta si tenim arxius maliciosos al nostre servidor.

Si és el cas, ens informarà de quin tipus d’amenaça es tracta i sabrem que hem d’aplicar els procediments anteriors.[/vc_column_text][vc_btn title=”Provar Virus Total!” style=”3d” color=”sky” link=”url:https%3A%2F%2Fwww.virustotal.com|title:Provar%20Virus%20Total!|target:%20_blank|”][/vc_column][/vc_row]

Llibreries d’icones

[vc_row][vc_column][vc_column_text]Les icones són elements indispensables en tots els projectes interactius. Aporten beneficis variats:

  • Faciliten la comprensió.
  • Milloren la usabilitat de la plataforma.
  • Fan més agradable i neta la interfície (UI).
  • Beneficien la experiència de l’usuari (UX).

En aquest cas, destaco 4 fonts molt completes d’icones gratuïtes i de qualitat per utilitzar-les en projectes web.[/vc_column_text][vc_row_inner][vc_column_inner width=”1/2″][vc_empty_space height=”0020px”][vc_hoverbox image=”675″ primary_title=”Flaticons” hover_title=”Flaticons”]Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[/vc_hoverbox][/vc_column_inner][vc_column_inner width=”1/2″][vc_empty_space height=”0020px”][vc_hoverbox image=”675″ primary_title=”Font Awesome” hover_title=”Font Awesome”]Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[/vc_hoverbox][/vc_column_inner][vc_column_inner width=”1/2″][vc_empty_space height=”0020px”][vc_hoverbox image=”675″ primary_title=”Bootratap Icons” hover_title=”Bootratap Icons”]Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[/vc_hoverbox][/vc_column_inner][vc_column_inner width=”1/2″][vc_empty_space height=”0020px”][vc_hoverbox image=”675″ primary_title=”Feather Icons” hover_title=”Feather Icons”]Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[/vc_hoverbox][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]

Com interactuar amb la base de dades de WordPress

[vc_row][vc_column][vc_column_text]Quan es comença en el món del WordPress, sembla que els límits de la creativitat siguin les funcionalitats pre-establertes que ofereix el Sistema de Gestió de Continguts o els Temes que utilitzem. A mesura que hi treballem, anem descobrint que no és així.

En aquesta ocasió, comparteixo un resum de funcions i mètodes de PHP pels quals podem interactuar de manera molt àgil i senzilla amb la base de dades de la nostra web en WordPress.

Tot comença amb la classe $wpbd, que estableix una nova connexió amb la base de dades.[/vc_column_text][vc_column_text]

<?php

global $wpdb;

$events = $wpdb->get_results(/*consulta SQL*/);

?>

[/vc_column_text][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]PRIMERS PASSOS

Llegiu la documentació oficial de WordPress.org sobre $wpdb. Conté informació completa sobre les possibilitats que ens brinda aquesta classe. És el punt de partida.[/vc_column_text][vc_btn title=”Documentació oficial sobre $wpdb aquí” style=”3d” link=”url:https%3A%2F%2Fcodex.wordpress.org%2FClass_Reference%2Fwpdb|title:Llegeix%20la%20documentaci%C3%B3%20oficial|target:%20_blank|”][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]RECOMANO

Ho trobareu tot de forma més clara en l’enllaç següent: un tutorial molt ben explicat per part de Daniel Pataki (CTO de Kinsta) a la publicació digital especialitzada Smashing Magazine.[/vc_column_text][vc_btn title=”Llegir el tutorial aquí” style=”3d” color=”primary” link=”url:https%3A%2F%2Fwww.smashingmagazine.com%2F2011%2F09%2Finteracting-with-the-wordpress-database%2F|title:Llegir%20el%20tutorial%20aqu%C3%AD|target:%20_blank|”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]

Holder.js

[vc_row][vc_column][vc_column_text]Quan es dissenya una maqueta de pàgina web, sovint no comptem amb les imatges finals . En aquests casos, on la composició prima a les fotografies, un senzill quadrat amb les mides correctes ens serveix per treballar àgilment.

Això ofereix holder.js

Aquesta llibreria, molt senzilla d’utilitzar, agilitza molt la generació d’imatges fictícies en moments on cal definir purament la col·locació dels elements a la pàgina.[/vc_column_text][/vc_column][/vc_row]

Nou apartat de Gadgets! + Pocket Tripod PRO

[vc_row][vc_column][vc_column_text]Una de les coses que més m’entusiasma del món digital són els gadgets que surten al mercat dedicats a les aplicacions quotidianes. Avui que és diumenge enceto un nou apartat del blog dedicat als gadgets que trobo per internet i xarxes socials, que senzillament em criden l’atenció.

Per començar, avui tenim:

Pocket Tripod PRO

[/vc_column_text][vc_row_inner][vc_column_inner width=”2/3″][vc_raw_html]JTNDaWZyYW1lJTIwc3JjJTNEJTIyaHR0cHMlM0ElMkYlMkZwbGF5ZXIudmltZW8uY29tJTJGdmlkZW8lMkYyODg4MzYzNjUlMjIlMjB3aWR0aCUzRCUyMjY0MCUyMiUyMGhlaWdodCUzRCUyMjM2MCUyMiUyMGZyYW1lYm9yZGVyJTNEJTIyMCUyMiUyMGFsbG93ZnVsbHNjcmVlbiUzRSUzQyUyRmlmcmFtZSUzRQ==[/vc_raw_html][/vc_column_inner][vc_column_inner width=”1/3″][vc_column_text]Pocket Tripod PRO és un suport per SmartPhones plegable que es pot dur a la cartera com si fos una targeta més.

Permet mantenir el telèfon en un ampli rang d’angles, tant en posició de retrat (vertical) com de paisatge (horitzontal).[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]El fabricant és GEOMETRICAL, amb seu a Califòrnia (EEUU), i ofereix adaptadors per un gran ventall de gruixos de SmartPhones amb l’objectiu d’arriar a tot el públic possible.

El preu base ronda els 25$. Consulta-ho directament aquí.[/vc_column_text][vc_zigzag][vc_column_text]Coneixeu altres gadgets o invents que vulgueu compartir? Parleu-ne a la caixa de comentaris![/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]

CSS Grid

[vc_row][vc_column][vc_column_text]CSS3 ofereix moltes funcionalitats per desenvolupadors i dissenyadors que vulguin marcar la diferència. Totes elles permeten incomptables aplicacions pràctiques. Una d’elles és CSS Grid.

Què permet?

  • CSS Grid permet crear graelles sense límit de files i columnes i establir unes mides a cadascuna.
  • Permetcol·locar objectes en qualssevol de les cel·les, i fer que un mateix objecte ocupi més d’una cel·la.
  • Substitueix aplicacions on fins ara s’usava l’atribut: position.

Exemple bàsic:[/vc_column_text][vc_column_text]

<section class="grid-1">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
</section>

<style>
.grid-1 {
display: grid;
grid-template-columns: 150px 20px 150px 20px 150px;
grid-template-rows: auto 20px auto 20px auto;
}
.item-1 {
grid-column: 1;
grid-row: 1;
}
.item-2 {
grid-column: 3;
grid-row: 1;
}
.item-9 {
grid-column: 5;
grid-row: 5;
}
</style>

[/vc_column_text][vc_row_inner][vc_column_inner][vc_column_text]Tant si s’és un iniciat com un desenvolupador avançat, CSS Grid aporta facilitats i avantatges.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_btn title=”Guia ràpida per iniciar-se aquí.” style=”3d” color=”green” link=”url:https%3A%2F%2Fwebdesign.tutsplus.com%2Fes%2Ftutorials%2Fcss-grid-layout-quick-start-guide–cms-27238|title:V%C3%A9s|target:%20_blank|”][/vc_column_inner][vc_column_inner width=”1/2″][vc_btn title=”Guia completa per desenvolupadors aquí.” style=”3d” color=”orange” link=”url:https%3A%2F%2Fcss-tricks.com%2Fsnippets%2Fcss%2Fcomplete-guide-grid%2F|title:V%C3%A9s|target:%20_blank|”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]

PHPMailer, la forma depurada d’enviar emails

[vc_row][vc_column][vc_column_text]PHP sempre ha portat integrada la funció mail(), que permet enviar de forma senzilla un correu electrònic. Els exemples són:[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

<?php
// the message
$msg = "First line of text\nSecond line of text";

// use wordwrap() if lines are longer than 70 characters
$msg = wordwrap($msg,70);

// send email
mail("someone@example.com","My subject",$msg);
?>

[/vc_column_text][vc_column_text]FONT: https://www.w3schools.com/php/func_mail_mail.asp[/vc_column_text][vc_column_text]

<?php
$to      = 'nobody@example.com';
$subject = 'the subject';
$message = 'hello';
$headers = array(
    'From' => 'webmaster@example.com',
    'Reply-To' => 'webmaster@example.com',
    'X-Mailer' => 'PHP/' . phpversion()
);

mail($to, $subject, $message, $headers);
?>

[/vc_column_text][vc_column_text]FONT: http://php.net/manual/en/function.mail.php[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]És una funció senzilla i àgil. Tot i això, mail() no permet especificar informació del servidor SMTP, mostrar errors, portar un major control dels enviaments, etc. En alguns projectes és impertaiu definir aquestes dades.

Quan arriba aquesta necessitat, tenim PHPMailer. Aquest programari és de codi obert, es troba a GitHub, i es distribueix sota la llicència LGPL 2.1 , juntament amb el Compromís de cooperació GPL .

Característiques de PHPMailer

  • Probablement, el codi més popular del món per enviar correu electrònic des de PHP.
  • Utilitzat per molts projectes de codi obert: WordPress, Drupal, 1CRM, SugarCRM, Yii, Joomla! i molts més.
  • Suport SMTP integrat: envieu sense un servidor de correu local.
  • Envia correus electrònics amb adreces múltiples de To, CC, BCC i Reply-to.
  • Correu electrònic alternatiu per a clients de correu que no llegeixin correus electrònics HTML.
  • Afegiu fitxers adjunts, fins i tot en línia.
  • Suport per a continguts UTF-8 i codificacions 8 bits, base64, binàries i cita-imprimibles.
  • Autenticació SMTP amb els mecanismes LOGIN, PLAIN, CRAM-MD5 i XOAUTH2 a través de transports SSL i SMTP + STARTTLS.
  • Valida les adreces de correu electrònic automàticament.
  • Protegeix contra atacs d’injecció de capçalera.
  • Missatges d’error en més de 50 idiomes.
  • Suport de signatura DKIM i S / MIME.
  • Compatible amb PHP 5.5 i posterior.
  • Espai de noms per evitar els enfrontaments de noms.
  • Etc.

[/vc_column_text][vc_btn title=”Aconsegueix-lo aquí” style=”3d” color=”success” i_icon_fontawesome=”fa fa-download” add_icon=”true” link=”url:https%3A%2F%2Fgithub.com%2FPHPMailer%2FPHPMailer|title:GitHub%20-%20PHPMailer|target:%20_blank|”][/vc_column][/vc_row]

Can I use…

[vc_row][vc_column][vc_column_text]Recentment he descobert la web caniuse.com, on s’especifica l’estat de les tecnologies web existents i el seu nivell de suport i acceptació en els diferents navegadors. En aquest portal, que probablement molta gent ja coneix, ajuda a valorar i decidir si s’empra una o altra tecnologia web per aconseguir un objectiu. Programeu de gust![/vc_column_text][/vc_column][/vc_row]

jQuery.ajax()

[vc_row][vc_column][vc_column_text]Sóc molt fan de la tecnologia Ajax, i el que permet aconseguir. Sovint utilitzo un petit fragment de jQuery que es comunica en segon pla amb un arxiu .php. Així s’aconsegueixen accions dins el servidor i/o la base de dades MySQL sense necessitat de redireccionar o refrescar la pàgina del navegador.[/vc_column_text][vc_column_text].ajax()[/vc_column_text][vc_column_text]

var dades = "";

jQuery.ajax({
  data: dades,
  type: "post",
  url: "{{URL}}"
});

[/vc_column_text][vc_column_text].load()[/vc_column_text][vc_column_text]

$(selector).load(URL,data,callback);

[/vc_column_text][vc_column_text].get()[/vc_column_text][vc_column_text]

$("button").click(function(){
  $.get("demo_test.asp"function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

[/vc_column_text][vc_column_text]> Recordeu que cal tenir jQuery instal·lat per utilitzar aquesta funció. Trobareu tota la informació a: https://jquery.com/

> Enllaço amb tutorials genials de w3schools: https://www.w3schools.com/jquery/ | https://www.w3schools.com/jquery/jquery_ajax_load.asp | https://www.w3schools.com/jquery/ajax_get.asp[/vc_column_text][/vc_column][/vc_row]

Centrar horitzontal i verticalment en CSS

[vc_row][vc_column width=”1/2″][vc_column_text]A vegades pot fer falta centrar un element multimèdia al centre de la pantalla, i fer que aquest element es vegi sempre sencer en tots els dispositius. Per fer-ho, es pot utilitzar el fragment de codi adjunt.[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_column_text]

<div class="container">
  <div class="vertical-center">
  </div>
</div>

<style>
.container { 
  height: 100vh;
  position: relative;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100vw;
}
</style>

[/vc_column_text][/vc_column][/vc_row]

Sitemaps WordPress + Google Search Console

[vc_row][vc_column][vc_column_text]Quan volem que una web es posicioni, cal tenir en compte l’activitat que s’hi fa, la freqüència en que s’actualitza el contingut i se n’afegeix de nou, la quantitat d’imatges, les metadades, les paraules clau… etc. Són molts els elements que s’han de contemplar per aconseguir un bon posicionament. Un d’ells, molt útil, és fer ús del Mapa Web, o Sitemap de Google. En aquesta entrada veurem com s’implementa en un WordPress.

Passos a seguir pel que fa a WordPress

  1. Accedir a l’apartat “Extensions” (Plugins) del menú de WordPress i clicar “Afegeix”.
  2. En el buscador, escriure “Sitemaps” i buscar d’entre els resultats “Google XML Sitemaps” [fig.1] (jo recomano aquest per experiències passades).
  3. Un cop instal·lat, s’afegeix al menú “Configuració” > “XML-sitemap”. Accedir-hi.
  4. Dins, buscar on diu: “The URL to your sitemap index file is” i copiar la URL que apareix a continuació.

[/vc_column_text][vc_column_text]

Passos a seguir pel que fa a Google Search Console

  1. Accedir a la pàgina oficial de Google Search Console i fer clic al botó “Començar”. [fig.2]
  2. Crear o accedir a un compte de Google destinat a la gestió de dades de la nostra web (pot ser el compte personal, però hi ha qui prefereix separar la informació).
  3. On diu “Añadir sitemap nuevo”, escriure l’adreça del sitemap, que ens indica l’extensió de WordPress. Habitualment només caldrà escriure-hi “sitemap.xml”.
  4. Clicar a “d’acord”.

[/vc_column_text][vc_single_image image=”258″ img_size=”full” alignment=”center”][vc_column_text]Ja tenim sincronitzat el sitemap amb la consola de cerca de Google. Ara el buscador ja coneix un llistat de les nostres URLs i s’agilitzarà la cerca i el posicionament del web. A més, l’extenció utilitzada realitza actualitzacions del sitemap periòdicament (períodes configurables a “Configuració” > “XML-sitemap” ), així que Google ho sabrà quan actualitzem el contingut i/o en creem de nou.[/vc_column_text][/vc_column][/vc_row]

Webview bàsic amb Xcode 10.0

[vc_section][vc_row][vc_column][vc_column_text]Un projecte de l’estudi consistia en una pàgina web pensada pel registre de dades d’activitat dels usuaris que l’utilitzéssin. A més, comptava amb un Webview per Android i un Webview per iOS.

En una altra entrada explicaré com crear un perfil de desenvolupador per Apple, però en aquest espai vull recollir el codi bàsic perquè funcioni un webview a la primera, utilitzant Xcode 10.0 i swift 4.2.

En el fitxer “ViewController.swift“, cal col·locar el codi següent.[/vc_column_text][vc_column_text]

import UIKit
import WebKit
class ViewController: UIViewController, WKUIDelegate {

  var webView: WKWebView!

  override func loadView() {
    let webConfiguration = WKWebViewConfiguration()
    webView = WKWebView(frame: .zero, configuration: webConfiguration)
    webView.uiDelegate = self
    view = webView
  }
  override func viewDidLoad() {
    super.viewDidLoad()

    let myURL = URL(string:"https://www.apple.com")
    let myRequest = URLRequest(url: myURL!)
    webView.load(myRequest)
  }
}

[/vc_column_text][vc_column_text]FONT:
https://developer.apple.com/documentation/webkit/wkwebview[/vc_column_text][/vc_column][/vc_row][/vc_section]

Forçar SSL amb .htaccess

[vc_section][vc_row][vc_column][vc_column_text]Sovint em trobo amb la necessitat d’actualitzar pàgines web i aplicar-los seguretat. Per això, un pas essencial és activar i forçar l’ús del certificat SSL. Una opció universal i senzilla de forçar-lo és modificant (o creant, si encara no existeix dins servidor), l’arxiu .htaccess col·locant-hi el codi següent.[/vc_column_text][vc_column_text]

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

[/vc_column_text][/vc_column][/vc_row][/vc_section]

WordPress multiidioma (sense plugins)

[vc_section][vc_row][vc_column][vc_column_text]A l’estudi em van passar un projecte en WordPress començat, que faltava acabar. Concretament, calia aplicar traduccions a la web per fer-la multiidioma.

El primer que vaig pensar va ser utilitzar Polylang (un plugin de WordPress gratuït enfocat a gestionar pàgines homòlogues per diferents idiomes). Així doncs, vaig descarregar i instal·lar el plugin, i el vaig activar. De sobte, el tema de WordPress que hi havia aplicat va deixar de funcionar. Vaig desactivar Polylang i tot va tornar a la normalitat.

Polylang no era compatible amb aquell tema.

Vaig investigar alternatives a Polylang. Algunes eren de pagament, a un preu excessiu pel pressupost del projecte. Altres no tenien funcions suficients.

Cansat de buscar, vaig preparar jo mateix l’arquitectura de la pàgina multiidioma…[/vc_column_text][vc_column_text]

  1. Crear un sol menú per tots els idiomes, i diferenciar els enllaços de diferents idiomes amb <etiquetes> representatives.
    ex: <ca>Inici</ca> | <es>Inicio</es> | <en>Homepage</en> | etc.
  2. Crear ítems de menú que continguin “lang” i el nom de l’idioma i una classe representativa.
    ex: <lang class=”cat”>CATALÀ</lang>
  3. En l’editor de pàgines de WordPress, associar les pàgines d’un idioma com a “filles” de la pàgina inicial del mateix idioma.
    ex: Inici (pàgina pare)
    – Qui som? (pàgina filla)
    – Què fem? (pàgina filla)
    – Contacte (pàgina filla)

Així, l’estructura de les URLs comprendrà elements com “/en/” o “/es/” que permetràn distingir l’idioma mitjançant la URL.

Cal instal·lar un plugin de programació. Jo utilitzo Simple Custom CSS and JS. Cal crear un document nou de Javascript i col·locar-hi el codi següent.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

jQuery(window).load(function(){
jQuery("lang").parent().addClass("adapta"); // <== la classe "adapta" ha de portar associats els estils del selector d'idioma en el menú
jQuery("es").parent().parent().attr("style","display:none;"); //<== ocultació dels enllaços del menú en els idiomes diferents al principal
jQuery("en").parent().parent().attr("style","display:none;"); //<== ocultació dels enllaços del menú en els idiomes diferents al principal
var domini = window.location.protocol+"//"+window.location.hostname;
var idioma = 0;
var pathname = window.location.pathname;
var es = pathname.indexOf("es");
var en = pathname.indexOf("en");
if(es<0 && en<0){
// menú en CATALÀ; els elements en castellà i anglès del menú no es veuràn
idioma=0;
}
else if(es==1 && (pathname.charAt(3)=="/")){
// menú en CASTELLÀ; els elements en català i anglès del menú no es veuràn
idioma=1;
}else if(en==1 && (pathname.charAt(3)=="/")){
// menú en ANGLÈS; els elements en català i castellà del menú no es veuràn
idioma=2;
}else{
idioma=0;
// menú en CATALÀ;
}
//redireccionar enllaços IDIOMA - crear pàgines homòlogues
var ruta = [
["/","/es/","/en/"],
["/empresa/","/es/empresa/","/en/company/"],
...
];
// A l'array anterior, la primera columna correspon a CATALÀ, la segona a CASTELLÀ i la tercera a ANGLÈS
if(idioma==0){//si som en una pàgina en CATALÀ
jQuery("ca").parent().parent().removeAttr("style");
jQuery("es").parent().parent().remove();
jQuery("en").parent().parent().remove();
jQuery(".portfolio_es").remove();
jQuery(".portfolio_en").remove();
jQuery("lang.cat").parent().attr("href",pathname);
for(var i=0;i<ruta.length;i++){
for(var j=0;j<ruta[i].length;j++){ if(ruta[i][j]==pathname){ jQuery("lang.esp").parent().attr("href",ruta[i][1]); jQuery("lang.eng").parent().attr("href",ruta[i][2]); } } } if(pathname.indexOf("/portfolio-posts/")>=0){
jQuery("lang.esp").parent().attr("onclick",'document.cookie = "idioma=1; path=/"; window.location.reload();');
jQuery("lang.eng").parent().attr("onclick",'document.cookie = "idioma=2; path=/"; window.location.reload();');
}
jQuery(".similar-post-title").html("Projectes relacionats");
jQuery("header .header-logo>a").attr("href","/");
}else if(idioma==1){//versió de l'anterior per si som en una pàgina en CASTELLÀ
}else if(idioma==2){//versió de l'anterior per si som en una pàgina en ANGLÈS
}
});

[/vc_column_text][/vc_column][/vc_row][/vc_section]

getCookie()

[vc_row][vc_column][vc_column_text]

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

[/vc_column_text][/vc_column][/vc_row]