Arxiu de l'etiqueta "HTML5 "

  • Dimecres 6 març 2013 per

    Perles del disseny web: Minimal Monkey

    Anàlisi del disseny web de Minimal Monkey

    Aquesta setmana hem descobert el web de Minimal Monkey, un bloc-portfolio d’un dissenyador d’interacció anglès establert a Nova York que es diu Stephen Burgess. El disseny web d’aquest site ens sorprèn per diversos motius, però sobretot en destacaríem l’originalitat del disseny i de la navegació.

    Quan accedim a Minimal Monkey ens trobem amb un curiós llistat colorista, que mostra les darreres entrades del bloc, amb una presentació molt diferent a la que estem acostumats a l’hora de consumir els continguts d’un bloc. Tot plegat va acompanyat d’unes animacions subtils – fetes en CSS3 – que fan que l’experiència d’usuari sigui excel·lent.

    Deixant a banda el disseny i la interactivitat, el web també és interessant pels seus continguts, ja que ens ofereix articles i experiments sobre HTML5, JavaScript i CSS3 d’excepcional qualitat.

    Amb un bloc com aquest, estem segurs que aquest desenvolupador no li faltarà feina.

    , , , ,

  • Dijous 14 febrer 2013 per

    4 experiments creatius en HTML5

    L’any passat en aquest mateix bloc us parlàvem de Chris Milk, un fotògraf i director americà que ha fet que hi hagi un abans i un després en els videoclips, creant experiències interactives des dels navegadors.

    En aquest temps, hem anat veient webs en HTML5 que buscaven l’experimentació. Per una banda, són la constatació de que ja no ens cal Flash per a fer coses espectaculars i interactives en un lloc web i, per l’altra, que hi ha molt camp per recórrer i investigar.

    Avui us proposem 4 webs on podeu veure cap on va aquesta experimentació, però segur que vosaltres mateixos també ens podeu recomanar altres webs on la creativitat aflora i que ens deixen amb la boca oberta.

    Tanmateix tingueu en compte que alguns dels webs que us proposem només es visualitzen bé amb navegadors d’última generació com, per exemple, Google Chrome.

    1. The Exquisite Forest

      The Exquisite forest, un experiment col·laboratiu de Chirs Milk en HTML5
      The exquisit forest és un experiment artístic creat per Chirs Milk i Aaron Koblin i produït per Google i la galeria Tate Modern.

      Quan entrem a aquest exquisit bosc ens trobem amb tot d’arbres i branques, en què cada fulla correspon a una animació. A cada arbre hi regeixen unes normes establertes pel seu creador i, a partir d’aquí, nosaltres mateixos podem crear una animació – amb una potent eina gràfica – que en publicar-la esdevindrà una nova fulla. O també podem simplement veure les animacions que han fet els demés.

      Les possibilitats són infinites i ja hi ha feines extraordinàries que es poden veure a la secció theater o algunes també són exposades a la Tate modern.

    2. Yas Marina Circuit

      Un experiment en html5
      Aquest web et deixa conduir pel famós circuit de Fórmula 1 Yas Marina d’Abu Dhabi. L’interès d’aquest web rau en què s’ha utilitzat HTML5 per a presentar informació en forma de diapositives d’una manera original. Segons expliquen a la revista .net (número 237), s’ha convertit una imatge de 4 metres d’ample, que pesava 1.4 Mb, en 3000 línies de codi SVG, la qual cosa ha reduït el pes en més d’un 20 per cent. L’optimització també és un element a tenir en compte!

    3. vlog.it

      Vlog.it, un web de Marco Rosella en HTML5 que carrega vídeos aleatòriament
      Vlog.it és un lloc web que recull 313 vídeos de YouTube i Vimeo que té com a preferits el seu autor, Marco Rosella, i que es carreguen de manera aleatòria i amb animacions amb SVG (Scalable Vector Graphics). El resultat és espectacular i molt visual. Si voleu saber com està fet, podeu llegir-vos aquest apunt.

      També podeu veure el web personal del seu creador, una altra meravella de la interacció i el disseny web, en què a mesura que movem l’scroll ens anem apropant, fent zoom, a les diferents seccions.

    4. Clouds over Cuba

      Clouds over Cuba és un documental interactiu fet en HTML5
      I, finalment, l’HTML5 també ens obre les portes a una nova manera d’explicar les coses o de fer storytelling. Recentment us hem parlat de d’altres webs en HTML5 que també expliquen històries com ‘The Good Man‘ o ‘Jess & Russ‘.

      Clouds over Cuba és un documental interactiu que explora noves formes narratives, en què es combina una línia de temps amb uns capítols i una informació addicional que l’usuari es pot anar guardant per a consultar més tard.

      El lloc web està fet amb javascript, HTML5 i tecnologia web socket i ha guanyat alguns premis en el món del disseny web. La navegació està orientada a l’usuari, optimitzant-ne la seva experiència i la facilitat d’ús. El web també està pensat perquè s’hi pugui navegar des de qualsevol dispositiu mòbil. Podeu veure més informació tècnica de com s’ha creat al web de thefwa.com, en què va ser escollit millor web del mes d’octubre passat.

    Oh, què dieu, que no en teniu prou?!? Podeu visitar també aquests altres webs:

    Ja ho veieu, estem a les beceroles del que es pot arribar a fer i les possibilitats són infinites.

    Visca la creativitat i la tecnologia que la fa possible!

    , , ,

  • Divendres 1 febrer 2013 per

    Perles del disseny web: The Good Man

    The Good Man és un projecte d’experimentació de fi de carrera amb el qual el Pedro Ivo ens sorprèn i ens demostra les possibilitats d’animació d’elements d’HTML5 via CSS3. El disseny web està fet sense cap imatge, comptant amb formes bàsiques i webfonts com a únics recursos.

    No dubteu a fer-hi una ullada per quedar-vos distrets una estona. I, abans d’abandonar el web, no us perdeu l’apartat de Tests, per veure els diferents tipus d’animació que s’han utilitzat.

    , , ,

  • Divendres 18 gener 2013 per

    CodeVisually, eines i recursos per a desenvolupadors web

    CodeVisually, eines i recursos per a desenvolupadors webProgrames o vols aprendre a programar? Doncs fes una volta per CodeVisually, que et sorprendrà la quantitat de solucions que hi pots trobar.

    Aquest web és un recull de recursos i eines per a desenvolupadors web creada pels mateixos usuaris. Una gran part dels recursos que s’hi troben són de codi lliure i hi trobareu plugins de jQuery, frameworks i altres eines web. A CodeVisually es poden cercar els recursos segons la tecnologia (HTML5, CSS, jQuery, Javascript o PHP) o segons la categoria (Frameworks, Responsive, desenvolupament d’apps, WordPress, Recursos per a formularis, etc). O també es pot anar directament als recomanats o als més populars.

    A més, si coneixeu recursos interessants que no hi apareixen, també els podeu afegir. I és això el que m’agrada, aquesta idea de col·laborar que tant triomfa a Internet: si tots hi contribuïm, podem fer-nos la tasca de programar més senzilla i, en definitiva, fer d’Internet un lloc millor.

    , , , , , ,

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