CSS de l’A a la Z

1. Què són els CSS?

Cascading Style Sheets (CSS, en català Fulls d’Estil en Cascada) és un llenguatge de fulls d’estil utilitzat per descriure la semàntica de presentació (l’aspecte i format) d’un document escrit en un llenguatge de marques. La seva aplicació més comuna és dissenyar pàgines web escrites en HTML i XHTML. 

CSS està dissenyat principalment per permetre la separació de contingut del document (escrit en HTML o un llenguatge de marques similar) de la presentació del document, incloent-hi elements com la disposició, colors, i fonts. Aquesta separació pot millorar l’accessibilitat al contingut, proporcionar més flexibilitat i control en l’especificació de característiques de presentació, permetre que múltiples pàgines comparteixin un format comú, i redueix complexitat i repetició en el contingut estructural (com per exemple al permetre disseny web sense taules). 

Font: Wikipedia

2. CSS de l’A a la Z

És un projecte que hem trobat en una pàgina web on només amb CSS i HTML recrea moviment i accions en elements dins de pàgines web.

La pàgina en qüestió és: CSSAZ

Antigament l’eina utilitzada per recrear moviment dins les pàgines web: logotips muntant-se, elements volant per la web, vídeos, animacions, era el Flash.

El principal problema del Flash és que els dispositius Apple no el poden visualitzar: els ordinadors sí però tant l’iPhone com l’iPad no el reprodueixen. A causa d’aquesta desavinença moltes de les pàgines webs que s’havien fet amb Flash s’han hagut de reinventar o desenvolupar de nou per poder adaptar-se a tots els dispositius actuals.

Com a curiositat, la primera pàgina web de 2CREA2 la vam desenvolupar amb Flash, recordeu que hi havia moviment? L’ocell que anava volant per sobre l’edifici, les finestres que creixien.. Quines èpoques!!

Vocabulari i conceptes del programació web i mkt online

El Via Empresa, diari online empresarial de Catalunya, ha incorporat una nova secció dirigida per Luis Monge sobre conceptes, errors i definicions sobre Màrqueting Online i tot el món del desenvolupament web (disseny web, HTML, CSS, Consultoria..).

L’article d’avui:

Els errors habituals en màrqueting on-line (II)

HTML5 i CSS3

Cada poc temps algú em pregunta si fem webs en HTML5 i/o CSS3, i sempre responc preguntant si hi ha una altra forma de fer webs. L’HTML és un estàndard internacional que diu com ha de codificar-se una web. El CSS és un altre estàndard per establir el disseny d’una web.

L’evolució de la tecnologia fa que amb el pas del temps s’afegeixin o eliminin funcionalitats al marge dels estàndards establerts. Cada cert temps, el W3C, organisme encarregat de l’elaboració d’aquests estàndards, publica una nova versió. Per a quan es publica una nova versió, qualsevol desenvolupador o maquetador web que es precie coneix la majoria de novetats dels estàndards.

És cert que l’HTML5 i el CSS3 són actualitzacions molt esperades i introdueixen més millores que qualsevol altra versió anterior. No obstant això, encara que aquestes actualitzacions serveixen per fer moltes coses de manera més eficient, el seu ús és transparent per a l’usuari final.

Lloc i pàgina web

Pàgina web és cadascun dels documents individuals que formen un lloc web. L’article que estàs llegint és una pàgina web dins del lloc web 2crea2.cat (adaptat)

Newsletter i e-mail màrqueting

La traducció castellana de newsletter és “circular”, i segons la Real Acadèmia, una circular és cadascuna de les cartes dirigides a diverses persones per donar-los coneixement d’alguna cosa. És a dir, si estàs manant un e-mail massiu, es tracta d’una newsletter, independentment del molt o el poc comercial que sigui el seu contingut.

Llavors, què és l’e-mail màrqueting? L’enviament d’e-mails amb propòsit comercial. Així, és rara l’ocasió en la qual es pugui fer distinció entre el terme newsletter i e-mail màrqueting. Per cert, newsletter es pronuncia alguna cosa així com /niusleter/ (no hi ha cap ‘i’ entre la ‘i’ i la ‘t’).

App

Una app és una aplicació informàtica, un programari, un programa informàtic. Tot és el mateix, independentment de si s’executa en mòbil, en el teu ordinador o via web (Facebook.com o Gmail.com, per exemple, són aplicacions web). Una app mòbil és una aplicació per a mòbil. Per cert, es diu app, no ‘A’, ‘P’, ‘P’.

Posicionament SEO i SEM

El posicionament SEO i SEM són dues coses molt diferents i ficar-los en el mateix sac, a més d’una cutrez, és un error d’embalum. Ni tan sols veig per què hauria d’existir el terme posicionament SEM, no tenen cap sentit. El SEO és el posicionament natural en cercadors. Consisteix en la millora de les característiques valorades pels cercadors per determinar la posició d’una pàgina web en els resultats mostrats després de buscar una paraula clau.

El SEM, o màrqueting en cercadors, és un model de publicitat de Pagament Per Clic (PPC). Desconfia de qualsevol empresa que inclogui, com a part dels seus serveis, “SEO i SEM”, així, tot junt com a part d’una mateixa frase.

Consultoria: ho significa tot i no significa gens

La Real Acadèmia defineix al consultor com la persona experta en una matèria sobre la qual assessora professionalment. Com alguna cosa tan senzill pot donar lloc a tantes interpretacions? La definició no parla de cap sector en particular, ni tipus de servei. Assessores professionalment? Ets un consultor, així de fàcil. Tampoc està fitada la forma en la qual s’executa el servei. És igual si la consultoria s’aplica en forma de formació, executant una solució tecnològica o parlant amb el client.

En conclusió, si ets dels quals diuen que es dedica a la consultoria, no estàs dient res. I si creïs que entens en què consisteix el treball d’algú que t’ha dit que es dedica a la consultoria, pregunta-li de nou, segurament no estigueu d’acord en què consisteix aquest treball. Creu-me, estic cansat de la quantitat de gent que creu que em dedico a tot tipus de coses pel fet que la meva empresa tingui el cognom consulting.

Aquesta és la segona part de dos articles sota el títol: “Diccionari dels errors més comuns en màrqueting online”
Text extret de: Via empresa

Descobreix els colors d’una pàgina web!

Hem trobat una pàgina web que ens permet posar la URL que vulguem i ens busca píxel per píxel tots els colors que tenim a la web, no només en els CSS sinó que també les fotografies, etc. I ens plasma de forma gràfica els diferents colors que hi ha.

Hem fet una prova amb la pàgina de projectes de 2CREA2, a veure què sortia i aquest és el resultat:

pagina_web_2crea2

A part de poder posar qualsevol pàgina web i veure’n els colors, tenen un seguit de pàgines importants tipus Facebook, Pinterest, Google per què veiem els colors.

La pàgina web en qüestió és: http://webcolourdata.com/

Si més no és una eina curiosa! :)

Disseny web: pàgines web amb textures

Avui volem parlar de les textures de les pàgines web. Cada cop és més habitual veure pàgines web amb fons texturitzats. Amb les textures, el “soroll” o els patrons geomètrics s’aconsegueix un efecte molt més proper i “natural” de la web, es pot crear un clima més càlid o aconseguir transmetre sensacions que amb el suport offline és molt fàcil, però que al estar visualitzant una pantalla és més difícil aconseguir.

Les textures web poden ser de molts tipus diferents, passant per les més suaus i tènues, com les que podeu trobar a http://subtlepatterns.com o més agressives o vistoses, com les que podem trobar a http://www.colourlovers.com/patterns.

La part més important és saber aplicar bé aquestes textures per expressar el què vols transmetre, així que no es pot abusar de textures ni patrons perquè pots acabar dissenyant una web caòtica i que no sigui atractiva.

També hi ha la possibilitat de no utilitzar cap textura ni patró per crear un disseny web molt net i minimalista. Aquesta opció es pot adoptar si la pàgina web ja té molta informació o fotografies i per eviar atabalar a l’usuari.

Per veure alguns exemples podeu visitar:

Disseny web textures

De Portes Enfora: Hem utilitzat una textura de fusta natural per ajudar a ambientar la pàgina web i apropar-la a la realitat, que és una botiga de jardineria.

sumasa_disseny_web

Sumasa: Per texturitzar les fotografies vam col·locar-hi un patró de quadres grisos semi-transparents.

Disseny web amb textures - Diseño web con texturas - Elevacat

Elevacat: Per rebaixar el vermell de la capçalera hi vam aplicar una textura.

top_taxi_disseny_web

Top Taxi Terrassa: Hi vam aplicar una textura ratllada quadrada de fons.

Mica en mica ens anirem animat a aplicar més textures a les webs i així fer-les més personals i adaptades al negoci!

Recursos per dissenyadors – Eines per disseny web

Hem trobat una pàgina web que ofereix recursos per dissenyadors gràfics o dissenyadors web que sempre ens poden anar bé quan anem faltats d’inspiració o quan necessitem noves eines per crear.

Es tracta de la web CSSMATIC, d’aspecte molt net i simple, et presenta quatre eines claus a l’hora de crear un disseny web:

1. Creació de degradats:

Pots crear els teus propis degradats personalitzats per cada projecte web. Adapta al 100% els colors de l’empresa i el look and feel que vols de manera molt fàcil!

disseny-web-degradats

2. Creació de cantonades rodones:

S’han acabat els problemes amb les cantonades rodones a l’hora de maquetar una pàgina web! Més fàcil impossible!!

disseny-cantonades-rodones

3. Disseny de textures:

Texturitza qualsevol color de manera que quedi molt més rústic i més característic. Dóna més personalitat a la pàgina web!

disseny-web-textura

4. Creació d’ombres

Ja pots mesurar a la perfecció l’ombra que vols simular a la pàgina web. Més fosca o més clara, més expansiva o menys, ho tens molt fàcil per veure els resultats!

disseny-box-shadow

Esperem que us sigui útil, tant pel disseny web com per la maquetació i programació web, ja que també dóna el codi CSS, que ajuda a la maquetació.