» 2007 » October » Modelando por Diego Franco

Modelando por Diego Franco

Este é o site pessoal do Diego Franco Miguel, Desenvolvedor, Webdesigner (Padrões Web, XHTML, Microformats e tudo que contribui para uma melhor customização e leitura de um site), falo aqui sobre novos comportamentos na internet bem como as evoluções que ela sofre na área de desenvolvimento.



Cores RGB e Cores CMYK

Por: Diego Franco - [ October 27th, 2007 ]

Vai um post rapidinho e resumido sobre a diferença de cores RGB e cores CMYK.

Cores RGBRGB

A cor de um pixel em RGB é gerada por 3 cores projetadas que se misturam. As luzes projetadas formam as cores: vermelho, verde, e azul (do inglês: Red, Green, e Blue). Após misturadas, essas cores criam um espaço de cor chamado RGB. As cores RGB são aditivas, significando que a mistura de diversas cores cria o branco. Esse espaço de cor foi criado para gráficos feitos em computadores e visualizados em computadores.

Cores CMYKCMYK

A cor de um pixel em CMYK é gerada por 4 cores, são elas: o ciano, magenta, amarelo e preto (do inglês: Cyan, Magenta, Yellow e blacK). O espaço de cor CMYK em um computador é usado para simular tintas impressas em papel e, geralmente é usado em artes-finais para impressão. As cores CMYK são subtrativas, ou seja, significa que misturando diversas cores cria-se o preto. Esse espaço de cor foi criado para gráficos feitos em computador e serem impressos em papel.

Os gráficos para a web são baseados em “tela” e não para impressos, portanto o uso de RGB. Por isso se você enviar um arquivo de alguma arte-final ou peça em Corel ou Photoshop para uma gráfica não esqueça de verificar se está enviando tudo em CMYK, isso é necessário para se gerar um fotolito, a não ser que sua peça criada não use uma imagem colorida, policromática, onde não há uma mistura de cores.

Procure por: DVD, MP3, LCD, Plasma, HDTV, Home Theater

[...] Continuar lendo...

CMYK, CorelDraw, Cores, Desenvolvimento, RGB | Nenhum Comentário » View blog reactions

Tags | |

Aproveite! Leia isto também:



Declarando cores com códigos Hexadecimais como é isso?

Por: Diego Franco - [ October 25th, 2007 ]

Minha idéia neste post não é de aprofundar no assunto mas de ter uma referência rápida sobre os hexadecimais.

Em nosso ambiente de criação estamos acostumados a selecionar as cores que desejamos e pronto lá está ela naquele círculo, quadrado, fonte ou qualquer outro elemento no qual se deseja preencher. Diferente dos trabalhos Arte-finalistas criados para materiais em papelaria onde selecionamos a cor que se deseja, e se, é RGB ou CMYK (isso depende do tipo de material que é produzido), na web, em nosso CSS mais especificamente trabalhamos com cores escritas em códigos hexadecimais. Mas como é isso?

O nome hexadecimal vem da união de 2 palavras do latin hexa( sexto) e decimal(10, base 10, ou décimo), unindo as duas palavras podemos ter (base do décimo sexto) ou falando em miúdos matemáticos o código hexadecimal é derivado de uma base de cálculo 16, contendo 16 símbolos.

Abaixo você tem uma tabela que mostra como uma base de cálculo 10 é convertida para a base 16.

# 0 1 2 3 4 5 5 7 8 9 10 11 12 13 14 15
Hexadecimais 0 1 2 3 4 5 5 7 8 9 A B C D E F

Os números hexadecimais são utilizados para converter valores RGB para que o HTML possa interpretar quais cores você escolheu. As cores RGB variam de 0 à 255. Hoje você pode fazer essa conversão usando a prória calculadora do windows, mas aqui vai uma tabelinha bem simples e prática para se converter valores RGB em hexadecimais.

Tabela RGB - Hexadeximal

00=00 01=01 02=02 03=03 04=04 05=05 06=06 07=07 08=08
09=09 10=0A 11=0B 12=0C 13=0D 14=0E 15=0F 16=10 17=11
18=12 19=13 20=14 21=15 22=16 23=17 24=18 25=19 26=1A
27=1B 28=1C 29=1D 30=1E 31=1F 32=20 33=21 34=22 35=23
36=24 37=25 38=26 39=27 40=28 41=29 42=2A 43=2B 44=2C
45=2D 46=2E 47=2F 48=30 49=31 50=32 51=33 52=34 53=35
54=36 55=37 56=38 57=39 58=3A 59=3B 60=3C 61=3D 62=3E
63=3F 64=40 65=41 66=42 67=43 68=44 69=45 70=46 71=47
72=48 73=49 74=4A 75=4B 76=4C 77=4D 78=4E 79=4F 80=50
81=51 82=52 83=53 84=54 85=55 86=56 87=57 88=58 89=59
90=5A 91=5B 92=5C 93=5D 94=5E 95=5F 96=60 97=61 98=62
99=63 100=64 101=65 102=66 103=67 104=68 105=69 106=6A 107=6B
108=6C 109=6D 110=6E 111=6F 112=70 113=71 114=72 115=73 116=74
117=75 118=76 119=77 120=78 121=79 122=7A 123=7B 124=7C 125=7D
126=7E 127=7F 128=80 129=81 130=82 131=83 132=84 133=85 134=86
135=87 136=88 137=89 138=8A 139=8B 140=8C 141=8D 142=8E 143=8F
144=90 145=91 146=92 147=93 148=94 149=95 150=96 151=97 152=98
153=99 154=9A 155=9B 156=9C 157=9D 158=9E 159=9F 160=A0 161=A1
162=A2 163=A3 164=A4 165=A5 166=A6 167=A7 168=A8 169=A9 170=AA
171=AB 172=AC 173=AD 174=AE 175=AF 176=B0 177=B1 178=B2 179=B3
180=B4 181=B5 182=B6 183=B7 184=B8 185=B9 186=BA 187=BB 188=BC
189=BD 190=BE 191=BF 192=C0 193=C1 194=C2 195=C3 196=C4 197=C5
198=C6 199=C7 200=C8 201=C9 202=CA 203=CB 204=CC 205=CD 206=CE
207=CF 208=D0 209=D1 210=D2 211=D3 212=D4 213=D5 214=D6 215=D7
216=D8 217=D9 218=DA 219=DB 220=DC 221=DD 222=DE 223=DF 224=E0
225=E1 226=E2 227=E3 228=E4 229=E5 230=E6 231=E7 232=E8 233=E9
234=EA 235=EB 236=EC 237=ED 238=EE 239=EF 240=F0 241=F1 242=F2
243=F3 244=F4 245=F5 246=F6 247=F7 248=F8 249=F9 250=FA 251=FB
252=FC 253=FD 254=FE 255=FF

Procure por: games, PS2, PS3, Nintendo, Wii, iPod

[...] Continuar lendo...

CSS, Cores, Desenvolvimento, Hexadecimal | 6 Comentários » View blog reactions

Tags

Aproveite! Leia isto também:



Alemazzariolli.com: A importância do Webwriter para o usuário.

Por: Diego Franco - [ October 5th, 2007 ]

Eu disse a minha amiga e colega de trabalho Alessandra Mazzariolli que ia dedicar um post ao blog dela aqui, pois bem, será muita responsabilidade escrever sobre uma Webwriter, sei que não chego aos pés dela quando se fala em formulação de textos para a Web, mas o que vale aqui é a dedicatória, aos poucos vou melhorando meus textos e tenho certeza que ela vai me dar um toque sempre que eu escrever uma besteira aqui. (Se já não escrevi.)

O título do post faz referência ao Alemazzariolli.com, site da Alessandra que é Webwriter, cursa faculdade de Letras na Universidade Federal de Uberlândia (UFU), trabalha na Webroom como Webwriter, é Editora Assistente do Webinsider, Revisora de cursos online da Visie, e ainda escreve sobre muita coisa em seu blog depois da uma conferida .

Sabemos o quanto o Webwriter é importante no desenvolvimento de um projeto no ponto de vista do cliente, ou para o cliente. A certeza de como um bom conteúdo textual é produzido trás riqueza e qualidade para seu site. Quero levantar um outro ponto aqui neste texto: “A importância do Webriter para o usuário”.

Não tenho formação em Letras, mas procuro ao menos tentar escrever direito, antes de ser desenvolvedor primeiro sou um usuário e às vezes vejo o quanto é difícil para o usuário interpretar o que as palavras querem dizer em um site ou mesmo materiais de papelaria. Recentemente até o grande Portal da Globo publicou a seguinte notícia: “Notas do ensino médio seram avaliadas já em 2009. você pode ver um print da página no site da Alessandra ela falou sobre o fato lá. Em dias em que a internet é usada como uma das maiores fontes de pesquisa já criadas, crianças do ensino fundamental estão lendo frases como essa, quero acreditar que foi um mero erro e não intencional, mas…

Resumindo, para mim a maior importância do Webwriter está para com o bem do usuário, uma fácil leitura, textos de qualidade e bem elaborados. Deixo aqui meus parabéns a Alessandra que tem feito isto.

Algumas referências sobre o Webwriter:

Procure por: MP3, iPod, celulares, notebooks, câmeras

[...] Continuar lendo...

Webwriter | 1 Comentário » View blog reactions

Tags

Aproveite! Leia isto também:



Como pessoas com distúrbios de visão enxergam o seu site?

Por: Diego Franco - [ October 2nd, 2007 ]

Site visto por portador de protanopia.Assino os Feeds da Daniele Viana do danielevsilva.com/blog/, uma ótima referência quando se fala sobre cores, psicodinâmica das cores, teoria de design e outros assuntos, Daniele já trabalhou durante 3 anos com acessibilidade para deficientes visuais. Ontem lendo seu post falando sobre O azul - Uma breve analise das cores me chamou a atenção uma de suas referências de links no final do seu post sobre Geradores de Cores, por sinal também ótimas referências. O link que me chamou atenção leva o título deste post: Como pessoas com distúrbios de visão enxergam o seu site?

Na minha opinião acessibilidade é uma questão de amor ao Ser-humano, pura responsabilidade social, e quando digo responsabilidade social não estou falando só de ajudar o portador de deficiência a atravessar a rua ou desenvolver um site totalmente acessível ao deficiente visual, mas creio que responsabilidade social vai mais além, é fazer de você um portador do amor para com o próximo e para com o meio em que vive entendendo que não somos mais importantes que nosso próximo, mas que cada um tem o seu valor, creio que a maior mudança acontece em você mesmo e não no próximo.

O que isso tem a ver com o título do post? Tudo. É de suma importância que saibamos como um deficiente visual se comporta e “vê” as coisas ou como um paraplégico se “move”, porque de uma forma ou de outra isso acaba acontecendo, com tecnologia ou sem ela, a diferença está na forma de como o deficiente visual “vê” as coisas e o paraplégico se “move”.

O site http://colorfilter.wickline.org/ leva você a uma experiência muito interessante de emular como portadores de Discromatopsia*** veêm o seu site. Na imagem acima mostra como um portador de protanopia vê o meu site. Dentre as opções de emulação do site você tem:

  • * Como portadores de deutanopia veêm;
  • * Como portadores de protanopia veêm;
  • * Como portadores de tritanopia veêm;
  • * Como portadores de acromatopsia veêm;
  • * Como portadores de protanomalia veêm;
  • * Como portadores de deutanomalia veêm;
  • * Como portadores de tritanomalia veêm.

O teste é fácil: coloque o endereço do seu site no campo: Type a URL e escolha um filtro para visualizar, o Colorblin ainda está em fase de desenvolvimento, mas com certeza poderá nos ajudar a escolher melhor as cores a serem utilizadas em nossos sites, ou seguir a boa iniciativa que o Henrique do RevolucaoEtc e o Flávio do Japs tiveram em disponibilizar uma folha de estilos de alto contraste separada caso o usuário necessite.

É isso ai vamos amar mais as pessoas!

*** Discromatopsia (dis=distúrbio; cromos=cor; opsis=olho) é um termo genérico usado para designar qualquer distúrbio de cores.

Segundo Wright1(1944) apud(1) do ponto de vista cromático os indivíduos podem ser classificados como tricromata (normal, anormal), dicromata, acromata ou monocromata. O tricromata normal identifica todo o espectro visível nas condições padronizadas do exame. O tricromata anormal percebe as três cores básicas: vermelho, verde, azul, porém, uma delas de forma deficitária. É a protanomalia se o déficit é para o vermelho; a deutanomalia, para o verde; a tritanomalia para o azul e a tetartanomalia para o amarelo. Na ausência de percepção total de uma das cores, temos o dicromata: o protanope, deutanope, tritanope ou tetartanope. As discromatopsias podem ser congênitas ou hereditárias ou adquiridas.

Fonte: Conselo Brasileiro de Oftalmologia - Arquivos Brasileiros de Oftalmologia.

Procure por: games, PS2, PS3, Nintendo, Wii, iPod

[...] Continuar lendo...

Acessibilidade, Cores | 1 Comentário » View blog reactions

Tags | | | |

Aproveite! Leia isto também:



Filezilla 3.0.1

Por: Diego Franco - [ October 1st, 2007 ]

Filezilla

Pois é baixei a nova versão do Cliente FTP da família “Zilla”, o Filezilla 3.0.1. A nova versão saiu já faz mais de 1 mês mas baixei esta semana, gosto do Filezilla já uso a um bom tempo e nunca me deixou a desejar, é rápido nas transferências inclusive notei uma leve diferença em outros que já usei como o CuteFTP por exemplo, além de ser open-source.

Abaixo segue alguns links sobre características da nova versão, screenshots e downloads.

Eu recomendo Filezilla.

Procure por: games, PS2, PS3, Nintendo, Wii, iPod

[...] Continuar lendo...

FTP, Ferramentas, Filezilla | Nenhum Comentário » View blog reactions

Tags | |

Aproveite! Leia isto também:



Foto DiegoO Modelando é o site pessoal do Diego Franco Miguel que, atualmente, trabalha como Designer e lidera uma equipe de Agência Web na Webroom Soluções Interativas. Diego é Designer de Interface é especialista em XHTML e CSS, vetorização em CorelDraw, criação de logomarcas, VB for Excel. Gosta de se aventurar em programação ASP.NET, PHP, AS2 e AS3 e procura sempre escrever aqui a fim de colaborar com essa imensa base de conhecimento que são os Blogs.

Me encontre também aqui:

Confira também:

Blogroll:

Sites que eu leio com frequência (Vou atualizando aos poucos)

Pessoas que trabalham comigo:

Sites dos colegas de trabalho da Webroom.

Já trabalharam comigo:



Twitts

Se preferir receba atualizações do site por e-mail. Preencha o campo abaixo com seu e-mail e clique no botão Enviar.

Added Delicious!

Veja mais!

Tags