Arxiu de l'etiqueta "recursos web "

  • Dimarts 8 gener 2013 per

    Recursos web: jQuery, els 50 millors plugins del 2012

    Els 50 millors plugins de jQuery del 2012

    En aquesta primera entrada de l’any 2013 de Recursos web farem un repàs de què s’ha creat l’any anterior. La web de Speckyboy ha realitzat un bon recull dels 50 millors connectors (plugins, en anglès) jQuery de l’any 2012, separats en diverses categories que mostrem a continuació:

    Estructura de la pàgina (layout)

    • Equalize: ens ajuda a igualar l’amplada i l’alçada dels elements.
    • Freetile: organitza els elements de la pàgina fent que tingui un disseny més eficient i dinàmic.
    • Gridster: utilització de drag-and-drop que permet arrossegar els elements de la pàgina.
    • Zoomooz: genial plugin per fer zoom als elements que desitgem.
    • Wookmark: organitza els elements en format de columna dinàmica.
    • HiddenPosition: ens permet treballar amb elements ocults.
    • Stellar: es juga amb les imatges de fons i l’alineació. Efectes genials en passar de pàgina.
    • Turn.js: efecte de llibre animat en HTML5,
    • Responsive Measure: ajusta la mida de la letra de manera que compleixi el Disseny web adaptatiu (en anglès, Responsive Web Design).
    • Scrollpath: permet definir la trajectòria de l’scroll (desplaçament).

    Navegació

    • HorizontalNav: aquest connector ens ajusta automàticament l’amplada del menú.
    • Stickymojo: afegeix el menú a la barra lateral en una posició fixa.
    • ddSlick: ens crea un menú desplegable on podem incloure imatges i descripcions.
    • jQuery Collapse: creació de menús originals que podem personalitzar.
    • jQuery Akordeon: podem crear panells plegables amb qualsevol tipus de contingut.

    Formularis

    • jQuery Complexify: determina la complexitat de la contrasenya.
    • jQuery File Upload: manera senzilla de visualitzar i editar la pujada d’arxius en un formulari.
    • Credit Card Validator: detecta i valida automàticament els números de la targeta de crèdit.
    • Filtrify: cerca i navega fàcilment a través de les etiquetes.
    • Mailcheck: suggereix el domini adequat quan els usuaris han introduït una adreça de correu incorrecta.

    Marquesines i carrusels

    • Responsive Carousel: carrusel que compleix el Disseny web adaptatiu i permet també personalitzar-lo.
    • iosSlider: desplaçament d’imatges d’una manera fàcil i també personalitzable.
    • RSlider: permet el desplaçament d’imatges en pantalla completa. També compleix el Disseny web adaptatiu.
    • Fresco: plugin d’ampliació d’imatges.
    • BookBlock: passa pàgines d’imatges com si fos un llibre.
    • Adaptor: transicions de desplaçament d’imatges en 2D i 3D.
    • RCarousel: un complet carrusel amb moltes característiques personalitzables.
    • Rhinoslider: també una marquesina personalitzable que a més inclou un generador.
    • Sequencejs: utilitza transicions avançades de CSS3.
    • Glisse: galeria que permet ampliació d’imatges a pantalla completa.
    • µslider: marquesina on es pot afegir tot tipus de contingut.
    • Responsive Slides: aquesta marquesina també compleix el Disseny web adaptatiu.

    Realització de gràfics i organigrames

    • Morris: ens ajuda a dibuixar tot tipus de gràfics d’una forma senzilla.
    • jQuery Org Chart: augmenta el disseny i dinamisme en els organigrames.

    Tipografia

    • Bacon: permet ajustar el text seguint una forma de corba Bezier o línia.
    • Textualizer: realitza diferents efectes en els caràcters i text sencer.
    • slabText: per crear títols grans i seguint el Disseny web adaptatiu.
    • trunk8: connector que, en un paràgraf, talla d’una forma més eficient el text (per aplicar per exemple en les entrades que s’aplica el “llegeix-ne més”).

    Efectes en imatges

    • tiltShift: utilitza els filtres d’imatges de CSS3 (únicament funciona en Chrome i Safari 6).
    • jQuery Picture: ens ajuda a implementar les imatges en el Disseny web adaptatiu.
    • ImageMapster: realització de mapes d’imatges d’una forma més còmoda.
    • Responsive Img: també ens facilita la visualització de les imatges en el Disseny web adaptatiu.
    • Backstretch: permet afegir una imatge de fons dinàmicament a qualsevol pàgina.

    I a més a més…

     

    Via: Speckyboy

    , , , , , ,

  • 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 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:

    , , , , , , , , , ,

  • Dimarts 2 octubre 2012 per

    Recursos web: SEO, incrementem el posicionament

    Si no estàs a Google no existeixes

    Està molt bé tenir una pàgina web de la teva empresa i indicar la seva adreça a les targetes de l’empresa, als contractes, als uniformes… Ara bé, i si el client perd la targeta amb el número de telèfon de la teva empresa i no sap com trobar la pàgina web per buscar-lo? L’opció més generalitzada és anar al Google (el 96% de les cerques del país són fetes amb Google).

    És per això que avui indicarem algunes tècniques de SEO per augmentar el posicionament de la nostra web.

    • SEO: Optimització per a motors de cerca, Search engine optimization en anglès, és un procés que s’utilitza per augmentar el posicionament web en la pàgina de resultats dels motors de cerca. D’aquesta manera, també es poden aconseguir més visites.
    • SEM: Search Engine Marketing, en anglès, és també el procés per augmentar el posicionament, però en aquest cas, a través d’enllaços patrocinats. És a dir, es realitza un pagament al motor de cerca perquè la nostra pàgina web aparegui en els primers resultats.

    Tècniques SEO

    • Redacció de continguts i correcta estructura de pàgina
      Sembla obvi, però és important una redacció de continguts correcta amb la utilització de paraules clau que identifiquen la teva empresa. L’estructura de la pàgina, ha de seguir tots els estàndards web i ha de ser ordenada perquè els motors de cerca puguin llegir-la més fàcilment.
    • Optimització i tècnica de la pàgina:
      • Utilitzar paraules clau als títols de la pàgina (a les etiquetes <h1>, <h2>…)
      • No utilitzar frames
      • Utilitzar títols (<title>) i etiquetes metas (<meta>) diferents en cada pàgina
      • Crear un Mapa del Lloc visual per l’usuari, un en XML per als cercadors i un robots.txt
    • Oblidar-se de la tecnologia Flash
      Els arxius de Flash (.swf) són complicats per la indexació als cercados, tot i que ha millorat, segueixen sent prioritàries les pàgines web fetes amb codi estàndard.
    • Actualitzacions, continguts dinàmics
      Els cercadors indexen amb més freqüència les pàgines que canvien els continguts.
    • Utilitzar un seguiment de resultats
      Google Analytics és una eina molt complerta que et permet estudiar les estadístiques de les visites que arribin a la teva web. Es poden realitzar informes i determinar si s’ha aplicat correctament les tècniques de SEO.

    I a més…

    , , , ,

  • Dimarts 25 setembre 2012 per

    Recursos web: jQuery vs MooTools


    jQuery i MooTools són dues llibreries Javascript que permeten modificar elements de la pàgina podent fer efectes dinàmics, animacions d’objectes, interaccions, etc. Contenen codi ja fet que podem utilitzar per millorar l’interfície d’usuari. Les dues amb llicència MIT i jQuery també amb GPL, que ens donen via lliure per utilitzar el codi i modificar-lo. Perquè entengueu què es pot fer amb aquestes llibreries, podeu mirar aquest exemple de marquesina d’imatges fet amb jQuery.

    Però ara bé, si les dues llibreries fan el mateix i es comporten de manera similar, quina escolleixo per la meva aplicació web?

    Primerament, analitzarem les definicions oficials de les dues tecnologies:

    • jQuery: és una Biblioteca de JavaScript ràpida i concisa que simplifica el recorregut, ús d’events, animació i interaccions Ajax al document HTML per un ràpid desenvolupament web. jQuery està dissenyat per modificar la manera que tu escrius JavaScript.
    • MooTools: és un framework JavaScript Orientat a Objectes compacte, modular i dissenyat pel programador JavaScript nivell d’intermig a avançat. Aquest, permet escriure un codi potent, flexible i cross-browser amb la seva elegant, ben documentada i coherent API.
    Abans de decidir-nos, sempre ens hem de preguntar què volem fer.

    Tal com veiem a les definicions, jQuery està més destinat a una aplicació de la llibreria ràpida però funcional mentres que MooTools requereix ja d’un nivell més avançat per utilitzar-la. La primera, considerada més fàcil a l’hora de programar, disposa de molt material d’ajuda online (més de 100 milions de resultats al Google). MooTools no només s’enfoca al DOM, a l’estructura de l’HTML en sí per modificar elements, sinó que està pensat per reescriure Javascript, és a dir, vindria a ser com una extensió d’aquest llenguatge.

    Per tenir exemples i una visió més àmplia, podem veure què han escollit les plataformes de gestió de continguts:

    • Drupal – jQuery
    • WordPress – jQuery
    • Joomla – MooTools

    Així doncs, jQuery no és millor que MooTools, ni a l’inrevés, sinó que tot i ser dues llibreries de JavaScript, internament la utilització d’aquestes estan enfocades a finalitats diferents. Un molt bon resum d’aquest tema seria la frase següent de Aaron Newton (autor del llibre “MooTools Essentials“):

    jQuery intenta fer el DOM més divertit, MooTools intenta fer JavaScript més divertit.

    Et pot interessar…

    Passem a la pràctica…

    I avui volem fer una crida.
    Quina llibreria utilitzeu? Quina creieu que és més fàcil i/o us agrada més aplicar-la?

    , , , , , , ,

  • Dimarts 18 setembre 2012 per

    Recursos web: iniciant-nos a l’HTML5 i al CSS3


    HTML5 (HyperText Markup Language, cinquena versió) i CSS3 (Cascading Style Sheets, tercera versió), dues tecnologies que ens facilitaran molt la vida als maquetadors i desenvolupadors web. Parlo en futur, perquè tot i que ja es comença a implementar, els navegadors encara no estan totalment preparats per reconèixe’ls (és per això que es recomana actualitzar el navegador per tenir l’última versió). La mateixa W3C indica que està en mode experimental.

    Què són i quines diferències ofereixen respecte la seva versió anterior?

    • HTML5: és el codi que s’utilitza per presentar la informació al nostre navegador web i poder-hi interactuar. A diferència de la seva versió anterior, implementa noves etiquetes que s’ajusten a la web semàntica. És a dir, en comptes d’utilizar <div> a tots els contenidors, tenim la possibilitat de definir-ho amb <head>, <footer>, <nav>… Una altra novetat important, és l’aparició de les etiquetes <video> i <audio>, pel que ens estalviarem crear l'<embed> i l'<object> i disminuirem considerablement la quantitat de memòria utilitzada.
    • CSS3: la part gràfica del lloc és definida per aquesta tecnologia. Les principals millores que ens aporta aquesta versió són:
      • Animacions
      • Ombra als elements
      • Requadres rodons
      • Web Fonts

    Després d’aquesta breu introducció, no et perdis The Expressive Web, on trobaràs els efectes que es poden fer unint aquestes dues tecnologies i la compatibilitat d’aquestes suportada en els navegadors.

    Disseny web utilitzant HTML5 i CSS3

     I a més…

    , , , ,

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