Arxiu de l'autor "Sílvia Vila Brustenga "

  • Dimarts 11 desembre 2012 per

    Recursos web: La icona de web o favicon

    De vegades tenim tanta cura de que el nostre web estigui perfecte, tant visualment com de continguts, que pot ser que ens oblidem d’altres detalls que són els que finalment determinen la professionalitat del muntatge de la mateixa pàgina. Estic parlant, en aquest cas, de la icona de web o favicon en anglès, que particularment crec que és imprescindible incloure-la i més, des que els navegadors ens permeten treballar amb pestanyes.

    La icona de web, o favicon, és una imatge en format .ico de mida recomanada 16x16px que s’associa al web. Tendeix a ser una part del logotip de l’empresa de la pàgina, o un element visual significatiu que l’usuari pugui associar ràpidament. Com es veu a la imatge anterior, sense el text descriptiu i només amb els 4 icones de web, segur que sabriem de quines pàgines es tracta.

    Per afegir-ho al nostre web només cal afegir la següent línia d’html entre les etiquetes <head>, substituïnt (url) per la ubicació de la icona:

    <link rel="shortcut icon" href="(url)/favicon.ico" type="image/x-icon" />

    Eines que ens ajudaran a crear el nostre favicon

    • FavICO: senzilla eina que et permet pujar una imatge i crear el favicon al moment.
    • Favicon.cc: divertida eina que ens permet dibuixar la nostra icona de web, i a més, permet anirma-la si ho desitgem.
    • Genfavicon: en qüestió de minuts podem tenir el favicon creat. Podem pujar una imatge o a través de la seva url.

    , , , ,

  • Dimarts 4 desembre 2012 per

    Recursos web: Bancs d’imatges

    Hem de tenir en compte i utilitzar imatges d’ús lliure o amb l’aprovació de l’autor.

    Seguint amb els temes de disseny web, és molt important tenir en compte les imatges. Per poder millorar visualment el web necessitarem imatges d’alta qualitat que ens permetran il·lustrar el contingut que estem mostrant. Allò de cercar al Google i utilitzar qualsevol imatge del resultat és “perillós”, doncs no sabem els drets de la imatge en qüestió, per tant potser té copyright i no és permesa la seva utilització. Hi ha eines que realitzen una cerca d’imatges inversa, de manera que, indicant-li una imatge, et dóna informació d’on prové, si està en ús en més llocs, les resolucions… Un bon exemple seria TinEye.

    Hi ha diverses eines online que ens proporcionen banc d’imatges que podrem utilitzar i a continuació us mostrem les més destacades.

    Bancs d’imatges per al disseny web

    • iStockphoto: un dels bancs d’imatges més reconeguts. Les imatges són de pagament.
    • Stock.XCHNG: imatges que els usuaris poden compartir. Només cal registrar-se i es poden utilitzar les imatges gratuïtament.
    • Search Creative Commons: cerca de continguts, tant textuals com il·lustratius, lliures de drets.
    • Flickr: en aquesta xarxa social que permet compartir fotografies, també en podem trobar de llicència Creative Commons.
    • Morguefile: una bona eina també que no cal registrar-se, i permet la descàrrega d’imatges lliure de drets.
    • Freepixels: ens permet la descàrrega d’imatges d’alta qualitat.

     

    , , , , ,

  • Dimarts 27 novembre 2012 per

    Recursos web: Esquema de colors

    Esquema de colorsÉs cert potser, allò que diuen que pot provocar pànic una pàgina en blanc quan es comença a dissenyar un web. Us ha passat mai? No és senzill escollir els colors adients, seguint sempre un mateix esquema. A vegades, tendim a escollir un color principal, i després juguem tot el web amb escala de grisos, perquè no sabem quins altres colors poden encaixar-hi correctament.

    Avui, us deixem un recull d’eines de colors que ens poden ajudar a inspirar-nos i millorar el disseny del nostre web.

    Eines pel disseny web

    , , ,

  • Dimarts 20 novembre 2012 per

    Recursos web: HTML5 i les etiquetes meta

    Les etiquetes HTML5 metas no influeixen en la part visual del nostre lloc web, però sí que són molt importants per oferir informació als motors de cerca (search engines) sobre la nostra pàgina. Així doncs, se’ls hi pot proporcionar informació sobre de què va la pàgina, qui la fet, amb quina codificació està creada… Aquestes etiquetes sempre van dins del <head> de la nostra pàgina.

    A continuació, llistarem les etiquetes més importants que s’han de tenir en compte de posar-les sempre:

    • charset: l’atribut charset indicarà en quina codificació està feta la pàgina. Les més utilitzades són ISO i UTF-8, però n’hi ha moltes més. Tenir en compte que en HTML5 aquest meta ha canviat.
    • author: indicarà qui ha realitzat la pàgina.
    • description: es recomana escriure una breu descripció d’uns 150 caràcters que serà la que indicarà als motors de cerca de què va la pàgina. Igual que el <title>, en cada html hauria de ser diferent.
    • keywords: les paraules clau, separades per comes, també donaran informació important als motors de cerca.
    • robots: si necessitem donar un tracte especial en els motors de cerca en algun arxiu dins de la nostra pàgina, com per exemple que no volem indexar-lo, utilitzarem aquest meta.

    Així, l’estructura dels metas dins del nostre <head> podria quedar així:

    <meta charset="utf-8"/>

    <meta name="author" content="Can Antaviana" />

    <meta name="description" content="Estem realitzant un exemple dels metas més importants a utilitzar." />

    <meta name="keywords" content="metas, exemple, html5, motors cerca" />

    <meta name="robots" content="noindex,follow"/>

    Per a més informació…

    , , , , , , , ,

  • Dimarts 6 novembre 2012 per

    Recursos web: jQuery, selectors i mètodes útils

    jQuery, la llibreria de Javascript de la qual vam fer una petita introducció fa unes setmanes, té múltiples funcionalitats. No només ens serveix per crear marquesines, menús animats, Tooltips… Si no que profunditzant amb la llibreria i utilitzant els seus selectors i mètodes, podem fer infinitats d’efectes més personalitzats que ens seran molt útils.

    Per exemple, recordeu quan fèiem un llistat amb una taula, i necessitàvem que cada fila parell (o imparell) tingués un color diferent? El que fèiem era dividir el número de la fila, i depenent del residu, aplicàvem un color o un altre.

    Ara, amb els selectors i mètodes de la llibreria de jQuery, podem molt simplificar aquests processos.

    • nth-child(): ens servirà per escollir l’element o elements que necessitem:
      • nth-child(3): selecciona només el tercer element. Si hi afegim una “n” (nth-child(3n)), seleccionarà cada 3 elements.
      • nth-child(even): selecciona els elements parells. Si canviem “even” per “odd”, seleccionarà els elements imparells.
    • toggle(): l’utilitzem per mostrar o ocultar un element. Si l’element és visible, l’oculta, i a l’inrevés.
      • slideToggle(): modifica l’altura de l’element, mostrant o ocultant-lo, en forma d’animació.
      • fadeToggle(): ídem que l’anterior, amb la diferència que modifica l’opacitat de l’element.
    • addClass(): l’utilitzarem per afegir una classe a l’element o elements que l’hi indiquem. Per eliminar-ne, utilitzarem removeClass();
    • load(): ens servirà per carregar continguts d’un altre arxiu dins de l’element que l’hi indiquem.

    Per saber-ne més…

    , , ,

  • Dimarts 23 octubre 2012 per

    Recursos web: Eines per a formularis

    Recursos web: Eines per a formularis
    Generalment, els desenvolupadors web quan hem de maquetar i programar un formulari de contacte, ens canvia una mica la cara. Tendeixen a ser visualment pesats, sobretot si hi ha molts camps i a més, si incorporen checkbox i radio buttons.

    Això ho podem canviar utilitzant CSS i pluguins de jQuery. A continuació us mostrem un llistat amb eines per poder millorar la visualització i la utilitat dels formularis:

    Avui destaquem…

    • Validació: Per evitar que s’enviïn formularis buits, o que ens manqui informació important enviada per alguns dels camps dels formularis, hem de validar els formularis, és a dir, indicarem els camps que són obligatoris i si no s’han omplert, o s’han omplert malament, no deixarem que el formulari s’enviï i li indicarem a l’usuari. Tenim diverses eines per fer-ho, us en llistem algunes:

    , , , , , , , , , ,

Disseny web - Antaviana

Truca’ns +34 973 143 481

Envia’ns un correu informacio@(ELIMINAR)antaviana.cat

Piula’ns a @canantaviana

o Vine a visitar-nos