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: CSS3
Tagged: ,
With: 0 Comments

Cada navegador interpreta el nostre codi bàsic com a ell li ve de gust, el que pot portar-nos moltes més hores de treball per intentar normalitzar el nostre disseny al navegador. Això succeeix pel fet que cada navegador té diferents propietats que es fan la competència entre si, ja que tots volen ser el teu navegador predeterminat. Els resets ens permeten “posar a zero” del navegador perquè mostri les propietats del CSS de la forma més exacta possible. Encara que tots els navegadors coincideixen en alguns valors importants (tipus de lletra serif, color de lletra negre, etc.) hi ha diferències tan importants com els margesRead 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: CSS3, Javascript
Tagged: , , ,
With: 0 Comments

Si volem que el menú de la nostra pàgina web remarqui la secció en la qual ens trobem, només necessitem una mica de codi en Javascript i CSS. D’entrada, a la fulla d’estils CSS determinarem una classe concreta per quan una secció estigui activa: .selected { color:#ff0000!important; } Finalment, en Javascript, li donarem la següent acció: $(‘.menu a’).each(function(index) { if(this.href.trim() == window.location) $(this).addClass(“selected”); }); El que fa aquesta acció és buscar quina és la pàgina en la qual ens trobem (window.location) i aplicar la classe “selected” a l’element del menú que contingui un vincle cap a aquesta pàgina. Òbviament, “menu a” dependrà de la classeRead More →

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

Fer responsive una pàgina web, vol dir que quan aquesta augmenta o disminueix de mida, ja sigui perquè es visualitza amb diversos tipus de pantalles o dispositius (ordinador, tablet, mòvil, etc.) o perquè es redueixi la mida del navegador per a qualsevol altre funció, el seu contingut pugui ser visible d’una manera correcta. Per a realitzar responsive, es pot fer de diverses maneres i utilitzant moltes eines. Tot seguit mostrem dues possibles maneres de fer que el contingt del nostre portal web es mostri correctament es miri des del dispositiu que es miri: 1. foundation.css -> és un framework per a utilitzar a l’hora de ferRead 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: 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 →

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

Amb CSS, es poden definir quatre tipus de posicions diferents als diversos elements que composen un document HTML. Són la posició estàtica, la relativa, la fixa i l’absoluta: Static És la que ve donada per defecte Es mou amb la finestra Agafa l’amplada de la finestra Se li pot donar la propietat float (left, right) i clear (left, right, both) Relative És igual que l’static, però posiciona respecte l’antecessor (en anglès, ancestor) sempre i quan no sigui estàtic Es pot posicionar respecte un top, un right, un bottom, o un left Fixed No es mou respecte la finestra; amb scroll no es mou No tenen en compte elsRead More →