By:
On:
In: HTML5
With: 0 Comments

Vincular un video de youtube es molt senzill, 1. clica amb el botó dret sobre el video de youtube 2. selecciona la opció “Obtener código de inserción” 3. Sortirà un recuadre amb codi, el copiem. Exemple: <iframe width=”854″ height=”510″ src=”https://www.youtube.com/embed/YqeW9_5kURI?list=FLvFHcDAgIFg_jVWwTeckSLA” frameborder=”0″ allowfullscreen></iframe> (Les mesures del video es poden modificar pero sempre han de ser equivalents) 3. Enganxem a el nostre codi a la nostre pàgina HTML   Així de fàcil és insertar un video de Youtube.Read More →

By:
On:
In: CSS3, HTML5
With: 0 Comments

De aquí a aquí con un movimiento muy suave. Podemos hacer tantas redes sociales como queramos, las imagenes las podemos hacer en photoshop y las subimos a la carpeta imagenes del servidor donde esta alojada la página web. en la pagina principal creamos un div para que contenga nuestras redes sociales. <div id=”social”> </div> Dentro de ese div escribiremos los enlaces de cada red social i la ruta para encontrar su respectiva imagen. Le daremos una clase diferente a todos ellos. Para que se abran los enlaces en otra pagina escribiremos : target=”_blank” <div id=”social”> <ul> <li> <a href=”https://twitter.com/t0nyi” target=”_blank” class=”twitter”> <img src=”images/twitter.png”> </a> </li> <li> <aRead More →

By:
On:
In: HTML5
With: 0 Comments

Veurem els requisits mínims que requereix per a tenir una correcta base per iniciar un projecte, després els analitzarem. <!DOCTYPE html> <html lang=”es”> <head> <meta charset=”utf-8″/> <meta name=”description” content=”curso html5 desde 0″ /> <title>Mi primera web en html5</title> <link href=”css/style.css” rel=”stylesheet” type=”text/css”> </head> <body> <!–aquí es desplega tot el contingut–> </body> </html>   El primer es DOCTYPE, es l’etiqueta que no passa de moda, la clàssica , si ens fixem veurem que te un atribut que es lang, es a dir llenguatge, aquí definim el llenguatge de la nostra web. Si es en angles s’escriurà entre cometes “en”, en aquest cas es en castellà i per tant s’escriuRead More →

By:
On:
In: HTML5
With: 0 Comments

Per poder visualitzar correctament una pàgina creada amb web en un dispositiu mòbil, sense que les imatges ni el text  es vegi desproporcionat, n’hi haurà prou amb afegir la següent línia al <head> <meta name=viewport content=”width=device-width, initial-scale=1″> Amb el Google Chrome, quan fem “inspeccionar elemento” per veure el codi que conté la pàgina, podem clicar el dibuix del mòbil per veure com quedaria en diferents dispositius (es poden seleccionar a la barra superior).  Read More →

By:
On:
In: CSS3, HTML5, Javascript
With: 0 Comments

PhoneGap és un framework gratuït i open source que permet crear aplicacions mòbils multiplataforma a partir de tecnologies web com ara HTML5, CSS3 i Javascript. PhoneGap s’ha realitzat a partir de Apache Cordova i va ser crear per Nitobi, actualment està en mans d’Adobe i crea les anomenades “aplicacions híbrides”, a mig camí entre natives i les purament web, això ho aconsegueix a partir d’una sèrie de APIs que permetes controlar certes característiques dels dispositius com l’acceleròmetre, la càmera, les notificacions o la geolocalització.Read More →

By:
On:
In: HTML5, PHP, Wordpress
With: 0 Comments

En aquesta entrada s’explicarà un truc per a treballar amb wordpress quan es modifica un tema de wordpress per adaptar-lo a un disseny personal. El truc és el següent: A l’hora de mostrar les imatges a la nostra plantilla, el primer que s’ha de fer és copiar la carpeta que conté totes les nostres imatges (normalment s’anomena img, images, etc.) i col·locar-la dins el tema de wordpress corresponent perquè les detecti. Tot seguit, s’ha de canviar la ruta a l’arxiu html, ja que normalment és quelcom semblant al següent: <html> <img src=”../img/imatge.jpg”; </html> Però wordpress no detecta l’imatge, perquè la carpeta d’imatges l’hem col·locat dinsRead More →

By:
On:
In: CSS3, HTML5, PHP
With: 0 Comments

Un Framework ofereix components com una llibreria, però a més proporciona plantilles o esquelets que defineixen el funcionament de les aplicacions. Per exemple, per una aplicació senzilla el Framework subministra un centre de notificacions, pasteboard, … que permeten manejar i controlar pràcticament tota l’aplicació sense la necessitat d’escriure molt de codi. Per una aplicació basa en documents, la plantilla s’encarrega de cada un dels document oberts (títols de les finestres, canvis en el contingut de cada una, notificar si el document que s’està a punt de tancar té canvis sense guardar, etc.). Aquestes plantilles que ofereix el Framework es poden adaptar a diferents necessitats. I,Read More →

By:
On:
In: HTML5
Tagged: , ,
With: 0 Comments

Des de les primeres versions d’iOS, aquest sistema operatiu permet guardar, al directori d’aplicacions, qualsevol web per tal de tenir-hi accés ràpidament. Si pengem una imatge a l’arrel del servidor amb el nom “apple-touch-icon.png”, els dipositius iOS la detectaran com la icona que ha de fer servir. Malgrat això, si no tenim accés a la carpeta inicial de la nostra web o volem tenir la imatge guardada en una altra carpeta, cal incloure aquest codi al head de la pàgina: <link href=”img/apple-touch-icon.png” rel=”apple-touch-icon-precomposed”/>  Read More →

By:
On:
In: CSS3, HTML5, Javascript, MySQL, PHP, Wordpress
With: 0 Comments

A la xarxa trobem milion i milions de tutoriales de programació. Són tants, en tan diferents formats, amb tants estils diferents i enfocats en tants llenguatges, que es fa difícil buscar els millors, i això és el que volen solucionar en hackr.io. Es tracta d’una web en la qual podem accedir a enllaços de tutorials de programació android, AWK, CoffeeScript, css, Django, go, HTML 5, swift, Javascript, jQuery, Perl, PHP, Python, Ruby on Rails… de fet també hi ha tutorials de Photoshop, de SEU i d’altres matèries no relacionades directament amb programació i sí amb disseny o tècniques específiques.   Cada tutorial indicat pot rebre votsRead More →

By:
On:
In: CSS3, HTML5
Tagged: ,
With: 0 Comments

Per afegir un icona Font Awesome en un placeholder has de: Afegir una id especifica, és aconsellable que sigui “iconified”+ l’icona que s’utiltzi Afegir un estil amb el shortcode del FontAwesome que trobareu en aquest enllaç: variables.less (L’exemple conte el icona del correu) #iconified::-webkit-input-placeholder::before { font-family: fontAwesome; content:’\f003  ‘; } #iconified::-moz-placeholder::before { font-family: fontAwesome; content:’\f003  ‘; } /* firefox 19+ */ #iconified:-ms-input-placeholder::before { font-family: fontAwesome; content:’\f003  ‘; } /* ie */ #iconified:-moz-placeholder::before { font-family: fontAwesome; content:’\f003  ‘;}  Read More →