Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

Adaptação do artigo original de: Anieto2K

Se a cada dia você fica perdido com cada palavra nova que aparece na internet, com esse guia, não vai acontecer mais esse tipo de coisa, agora você vai entender perfeitamente a língua dos geeks:

Linguagens de marcação e apresentação

• CSS: Cascading Style Sheets - CSS é uma linguagem utilizada para modificar o aspecto das estruturas HTML.
• DHTML: Dynamic HyperText Markup Language - É um termo utilizado para referir-se a junção de HTML + CSS + JavaScript.
• HTML: HyperText Markup Language - É uma linguagem de marcação de tags que compõem todas as páginas web.
• WML: Wireless Markup Language - WML é similar ao HTML, é baseado em XML e é orientado a dispositivos móveis.
• XHTML: Extensible HyperText Markup Language - XHTML é um HTML ao qual se aplicam as regras do XML.
• XML: Extensible Markup Language - XML é uma recomendação do W3C para gerar dados de uma forma melhor estruturada.

Linguagens de programação

• ASP (Microsoft): Active Server Pages - ASP é uma linguagem de programação em Script que se utiliza de VBScript, JScript, PerlScript ou Python processadas pelo servidor para gerar conteúdo dinâmico na web.
• CGI: Common Gateway Interface - É um protocolo que permite que aplicações do servidor interajam com os navegadores.
• JSP: JavaServer Pages - É uma linguagem de programação baseada em Java e é executada no lado servidor. Esta tecnologia permite ao desenvolvedor produzir aplicações que, acessam o banco de dados, manipulam arquivos no formato texto, capturam informações a partir de formulários e captam informações sobre o visitante e sobre o servidor.
• PHP: PHP Hypertext Preprocessor/Personal Home Page - É uma linguagem de programação de computadores interpretada, livre e muito utilizada para gerar conteúdo dinâmico na Web, como por exemplo fóruns. Apesar de ser uma linguagem de fácil aprendizagem e de utilização para pequenos scripts dinâmicos simples, o PHP é uma linguagem poderosa orientada a objetos.
• RoR: Ruby on Rails - Ruby On Rails é um framework de código aberto para desenvolvimento de aplicações Web, escrito em Ruby.
• SSI: Server Side Includes - É uma linguagem de programação que permite incluir conteúdo de um arquivo em outro.

Web Services

• ASP: Application Service Provider - É a denominação dadas às empresas que disponibilizam serviços ou aplicações informáticas com base na web.
• AWS: Amazon Web Services - É uma coleção de aplicações remotas oferecida pela Amazon.com
• RSS: Really Simple Syndication - RSS é uma especificação XML que permite ao usuário acompanhar o conteúdo de um site através de programas, muito utilizado hoje em blogs, sites de notícias e fóruns.
• S3: Amazon Simple Storage Service - É uma solução de armazenagem de dados de forma infinita na web.
• YUI: Yahoo! User Interface - É uma biblioteca Open-Source em Javascript.

Base de Dados

• CRUD: Create, Read, Update and Delete - CRUD são as 4 funções básicas de um sistema de base de dados.
• DBMS: Database Management System - Um DB é uma coleção de dados estruturada de forma organizada.
• SQL: Structured Query Language - É uma linguagem de consulta a base de dados relacional. A linguagem SQL é um grande padrão de banco de dados. Isto decorre da sua simplicidade e facilidade de uso. Ela se diferencia de outras linguagens de consulta a banco de dados no sentido em que uma consulta SQL especifica a forma do resultado e não o caminho para chegar a ele.

Servidores e Hosting

• CRON: Command Run ON - É um programa que executa comandos agendados nos sistemas operacionais do tipo Unix (como o Linux ou o Minix, por exemplo). O cron se encarregará de verificar a hora e determinar se existe ou não algum programa a ser rodado. Caso exista ele o rodará na hora e data solicitada.
• IIS: Internet Information Services - É um servidor web criado pela Microsoft para seus sistemas operacionais para servidores. Sua primeira versão foi introduzida com o Windows NT Server versão 4
• VPS: Virtual Private Server - É um servidor em ambiente compartilhado que possui acesso root (administrador) e processos independentes para cada conta VPS criada.

Protocolos

• FTP: File Transfer Protocol - É uma forma bastante rápida e versátil de transferir arquivos (também conhecidos como ficheiros), sendo uma das mais usadas na internet.
• HTTP: HyperText Transfer Protocol - É um protocolo de Aplicação do modelo OSI utilizado para transferência de dados na rede mundial de computadores. Também transfere dados de hiper-mídia (imagens, sons e textos).
• HTTPS: Secure HypterText Transfer Protocol - É uma implementação do protocolo HTTP sobre uma camada SSL ou do TLS. Essa camada adicional permite que os dados sejam transmitidos através de uma conexão criptografada.
• SSH: Secure Shell - São protocolos criptográficos que provêem comunicação segura na Internet para serviços como email (SMTP), navegação por páginas (HTTP) e outros tipos de transferência de dados.
• WAP: Wireless Application Protocol - É um padrão internacional para aplicações que utilizam comunicações sem fio.

Padrões e Acessibilidade

• 508: Section 508 - Seção 508 é uma série de padrões a nível tecnológico sobre acessibilidade.
• W3C: World Wide Web Consortium - É um órgão internacional que rege as normas de desnvolvimento web.
• WAI: Web Accessibility Initiative - É uma iniciativa do W3C para que as páginas web tenham a capacidade de serem disfrutadas por pessoas com algum tipo de deficiência.
• WCAG: Web Content Accessibility Guidelines - São uma série de regras sobre acessibilidade publicadas pela WAI.

Linguagens Cliente

• AJAX: Asynchronous JavaScript And XML - É o uso sistemático de tecnologias providas por navegadores, como Javascript e XML, para tornar páginas mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações. AJAX não é uma tecnologia, são realmente várias tecnologias trabalhando juntas, cada uma fazendo sua parte, oferecendo novas funcionalidades.
• DOM: Document Object Model - É uma especificação do W3C, independente de plataforma e linguagem, onde pode-se alterar e editar a estrutura de um documento. A API DOM oferece uma maneira padrão de se acessar os elementos de um documento, além de se poder trabalhar com cada um desses elementos separadamente, e por esses motivos criar páginas altamente dinâmicas.
• JS/ECMAScript: JavaScript - É uma linguagem de programação baseada no navegador, que foi inicialmente criada para atender, principalmente, as necessidades de validação de formulários no lado cliente e interação com a página.

Desenvolvimento

• CRAP: Contrast, Repetition, Alignment, Proximity - É uma metodologia de desenvolvimento aplicada as estruturas das páginas web.
• CVS: Concurrent Versions System - É um sistema de controle de versão para compartilhar código com outros desenvolvedores em projetos colaborativos.
• GUI: Graphical User Interface - É uma interface gráfica que permite ao usuário interagir com o computador de uma forma amigável.
• SVN: Subversion - Uma outra ferramenta para controle de versão.
• WYSIWYG: What You See Is What You Get - Significa a capacidade de um programa de computador de permitir que um documento, enquanto manipulado na tela, tenha a mesma aparência de sua utilização, usualmente sendo considerada final a forma impressa.

Gráficos e Imagens

• CMYK: Cyan Magenta Yellow Key - CMYK é um modelo de cores baseado nos diferentes níveis do Ciano, Magenta e Amarelo.
• FLA: Flash Authoring File - São arquivos de saída do Flash
• GIF: Graphics Interchange Format - É um formato de imagem de mapa de bits muito usado na web, quer para imagens fixas, quer para animações.
• JPEG: Joint Photographic Experts Group - Trata-se de um formato de compressão, com perda de dados, aplicado em imagens fotográficas. A perda de dados é proporcional ao fator de compressão desejado. As extensões de arquivos para este formato são .jpeg , .jfif , .jpe e .jpg , este último, o mais comum.
• PNG: Portable Network Graphics - É um formato de dados utilizado para imagens, que surgiu em 1996 como substituto para o formato GIF, devido ao facto de este último incluir algoritmos patenteados.
• PSD: PhotoShop Document - São os arquivos com o qual trabalha o Photoshop.
• RGB: Red Green Blue - É um modelo de cores baseado nos diferentes níveis de Vermelho, Verde e Azul.
• SVG: Scalable Vector Graphics - SVG é um sistema XML para escrever gráficos vetoriais de 2 dimensões.
• SWF: Small Web Format/ShockWave Flash - É um formato de gráficos usado para criar animações.

E-Commerce

• AVS: Address Verification System - Ponto de referência adicional para autenticar o usuário do cartão, utilizado em geral por vendas via telemarketing / e-commerce.
• CSC/CVV: Card Security Code/Card Verification Value - É uma ferramenta de segurança que proporciona uma maior segurança contra fraudes. Sâo aqueles 3 últimos números presentes nos cartões de crédito.
• MID: Merchant ID - Um MID é um identificador único ligado as companhias.
• FAQ: Frequently Asked Questions - É uma lista de perguntas e respostas mais comuns de uma aplicação.

Otimização para motores de busca

• CPC: Cost Per Click - CPC é o valor que pagam para cada vez que um usuário faz um clique.
• CPM: Cost Per 1000 Impressions - É o valor que se paga a cada 1000 impressões.
• CTR: Click Through Rate/Ratio - É a quantidade de usuários que fazem cliques frente uma quantidade de impressões de página.
• PPC: Pay Per Click - É um modelo muito usado na internet onde você paga após os usuários efetuarem clicks.
• PR: PageRank - É um algotítimo usado para medir a popularidade de um site.
• SEO: Search Engine Optimization - É o procedimento de otimização das aplicações web para obter melhores resultados nas buscas.
• SERP: Search Engine Results Page - É uma lista de páginas devolvidas pelo buscador com base na busca realizada pelo usuário.

Segurança

• XSS: Cross-Site Scripting - XSS é uma vulnerabilidade de segurança onde o atacante pode executar código malicioso.
• CSRF: Cross-Site Request Forgery - CSRF é uma vulnerabilidade de segurança onde o atacante implanta código malicioso em uma página e esta permite realizar suas funções.

Destinos

• CNAME: Canonical Name - Um CNAME é um alias do hostname.
• DNS: Domain Name System - São como uma lista telefônica da internet. Eles dão a direção de uma máquina associada a um domínio.
• DTD: Document Type Definition - Contém as regras que definem quais as tags que podem ser usadas em um documento XML e quais os valores válidos.
• ICANN: Internet Corporation for Assigned Names and Numbers - O ICANN é uma entidade sem fins lucrativos, multilateral, que organiza a concessão de domínios e de endereços IP no mundo.
• IP: Internet Protocol - É um protocolo usado entre duas máquinas em rede para encaminhamento dos dados.
• SLD: Second-Level Domain - SLD é um domínio debaixo das TLD’s
• TLD: Top-Level Domain - É a última parte do nome de um domínio, por exemplo: .com, .br.
• URL: Uniform Resource Locator - É o endereço de um recurso (um arquivo, uma impressora etc.), disponível em uma rede; seja a Internet, ou uma rede corporativa, uma intranet. Uma URL tem a seguinte estrutura: protocolo://máquina/caminho/recurso.
• WWW: World Wide Web - É um sistema de documentos em hipermídia que são interligados e executados na Internet.

Uma das coisas mais interessantes do Firefox é a possibilidade de você instalar extensões nele que podem lhe auxiliar e muito, seja para navegar, ou para o desenvolvimento web, e até hoje eu não entendo como tem muita gente ainda que não utiliza o Firefox, seja, ou por receio, ou por que o acha feio, não sei, mas isso fica para um próximo post, mas abaixo você pode ver uma lista de 30 extensões que eu encontrei no site Sentido Web, e podem auxiliar e muito você desenvolvedor:

CSS

• Aardvark: Permite ver atributos CSS, ID’s e Classes, selecionando elementos individuais na página.
• chromEdit: Permite modificar o CSS e o JavaScript de qualquer página.
• CSSMate: Edição de arquivos CSS.
• CSS Validator: Valida o CSS de suas páginas.
• CSSViewer: Visualiza propriedades CSS.
• EditCSS: Permite modificar os CSS carregados.
• IETab: Visualize suas páginas web no IE dentro do Firefox.
• Style Sheet Chooser II: Permite selecionar folhas de estilo alternativas para uma página.

Debug e Análise

• Firebug: Dispensa apresentações, a melhor ferramenta para análise e debug de HTML, CSS, JavaScript e Ajax.
• HTML Validator: Valida o HTML suas páginas de acordo com o W3C.
• JavaScript Debugger: Debug de JavaScript.
• Link Checker: Comprova se os links de uma página são válidos.
• Load Time Analyzer: Ferramenta para mostrar o tempo de carregamento de uma página.
• View Dependencies: Mostra informações de todos os arquivos usados ao carregar uma página.

Outros

• Clipmarks: Tire screenhots de lugares específicos de sua página.
• Codetech: Editor Web com a aparência do Dreamweaver.
• ColorZilla: Capture cores das páginas visitadas.
• FirePHP: Ferramenta para depurar PHP.
• Greasemonkey: Altere o comportamento de qualquer página web com esse plug-in.
• Measureit: Ferramenta para medir(em pixels), partes das páginas web.
• Platypus: Uma das melhores ferramentas para modificar uma página web.
• Poster: Permite interagir com WebServices e outras ferramentas web.
• Professor X: Mostra o conteúdo do header de uma página web.
• Screen grab: Tire Screenshots de suas páginas web.
• TestGen4Web: Grava a atividade dos usuários em páginas web.
• View Source Chart: Visualizador de código fonte.
• Web Developer: Uma coleção de ferramentas para desenvolvimento web.
• X-Ray: Permite ver o código fonte de uma página e alternar entre ambos de uma forma simples.

Artigo original: Sentido Web.

Para entender a pseudo-classe negação, :not(x), é muito simples, você deve passar um argumento para ela que ficará dentro dos parênteses, exemplo:

* {background-color:#FFFFFF;}
*:not(p) {background-color:#FF0000;}

O que eu defini na regra acima é que tudo no meu documento vai ter um background vermelho, menos tudo que estiver dentro da tag p, como podem ver nesse exemplo. Atualmente funciona no Mozilla, Konqueror e Safari.

Referências

• http://www.w3.org/TR/css3-selectors/#negation

O seletor de combinação irmão em geral é representado pelo sinal “til” (U+007E, ~), que separa 2 sequências de seletores simples. Os elementos representados pelas 2 sequências compartilham do mesmo pai na árvore do documento, e o elemento representado pela 1ª sequência precede, não necessariamente nessa ordem, o elemeno representado pelo segundo.

Ficaram meio confusos? Mas a lógica é fácil. Tomem como exemplo o seguinte CSS:

h1 ~ pre {border:1px dotted red;}

Representa um elemento pre que segue um elemento h1, que no HTML pode ser escrito dessa forma:

<h1>Definição da função a</h1>
<p>Função a(x) é aplicada a todas as figuras da tabela.</p>
<pre>function a(x) = 12x/13.5</pre>

Vejam no exemplo que só a tag pre ficou com uma borda vermelha, independente de sua posição, desde que as tags compartilhem o mesmo pai. Testado e aprovado no IE7, Mozila, Opera, Konqueror e Safari.

Referências

• http://www.w3.org/TR/css3-selectors/#general-sibling-combinators

Com a chegada das CSS3, que ainda estão em desenvolvimento, eu fico a cada dia mais surpreendido com o seu grande potencial, só não fico mais ainda devido a nosso querido amigo Internet Explorer, mas isso é um caso a parte. Hoje tomei conhecimento de mais uma pseudo-classe das CSS3 chamada :target, onde você pode manipular as âncoras da sua página. Para aqueles que não sabem o que é uma âncora em HTML, imagine uma URL com um sinal de tralha (#) seguido de um nome de âncora ou um ID de qualquer elemento, que ao você clicar é levado para o local ou destino indicado no mesmo documento. Esse destino também pode ser chamado de :target, exemplo:

http://www.exemplo.com/top.html#secao_2

O exemplo acima ilustra bem o que foi dito. Agora, se utilizar-mos a pseudo-classe :target podere-mos aplicar qualquer estilo CSS a âncora em questão no momento em que o usuário clicar na mesma. Levem em consideração o seguinte CSS:

*:target { color:#8A7575; background-color:#D0C8C8; border:3px double #000; }
*:target::before { content:url(target.png) }

Agora, abram esse exemplo. Experimentem clicar no link do topo da página, como podem ver, é aplicado os estilos definidos somente a âncora especificada, com isso é possível fazer muita coisa interessante, só basta colocar a cabeça pra funcionar. E lembrando que essa propriedade só funciona nos Browsers baseados no motor Gecko, Konqueror e Safari.

Referências

• http://www.w3.org/TR/css3-selectors/#target-pseudo
• http://www.maujor.com/tutorial/seletores-css3.php

Essa pseudo-classe é aplicada a elementos vazios do HTML, ou seja, imagine que você tem uma tag p dessa forma:

<p></p>

Se no CSS você criar uma definição dessa forma:

p:empty { background-color:#FF0000; }

Todos os parágrafos vazios da página ficarão com a cor de fundo vermelha. A primeira impressão pode parecer inútil utilizá-la, mas imagine onde o conteúdo é gerado dinamicamente, seria uma boa pra vc descobrir quais tags estão sem conteúdo. Para que fique mais claro o entendimento do tutorial, dêem uma olhada no seguinte exemplo. Lembrando que só funciona no Mozilla, Konqueror e Safari.

Referências

• http://www.w3.org/TR/css3-selectors/#empty-pseudo
• http://www.quirksmode.org/css/empty.html

São 147 cores com seus respectivos códigos hexadecimais definidos de acordo com a especificação de cores das CSS3, coloquei os arquivos aqui para download em PNG e PDF.

Vi aqui: PageFace.

VocÊ perdeu algum post da série? Basta estar dando uma olhada aqui. Mas vamos ao que interessa, hoje iremos ver mais informações sobre a propriedade background, com ela você pode definir o fundo de um elemento com apenas uma linha:

background: #ffffff url(endereço_da_imagem) top left no-repeat fixed;

Valores

• attachment
• color
• image
• position
• repeat

Você também pode definir os valores individualmente.

Background Attachment

Se você estiver utilizando uma imagem de fundo em seu site, você pode definir em background attachment para que ele fique fixo, para parecer que o texto está flutuando sob o background ou scroll, para que ele role junto com a página.

Valores

• fixed
• scroll

Background Color

Para especificar a cor de fundo de um elemento, utilize-se da propriedade Background Color:

background-color: valor;

Valores

• Nome da cor
• Número hexadecimal
• Código da cor RGB
• Transparent

Background Image

Para especificar uma imagem de fundo para um elemento, utilize a propriedade Background Image:

background-image: url(endereço_da_imagem);

Valores

• url
• none

Background Position

Você pode posicionar a imagem utilizada no fundo de qualquer elemento, para isso utilize-se da propriedade Background Position:

background-position: value;

Valores

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right
• x-% y-%
• x-pos y-pos

Background Repeat

Você pode ajustar uma imagem de fundo usada em qualquer elemento para que ela se repita nos eixos x e y, basta utilizar a propriedade Background Repeat:

background-repeat: valor;

Valores

• no-repeat
• repeat
• repeat-x
• repeat-y

Tradução do artigo original de: CSS Basics.

A cada dia eu fico mais surpreendido com o poder do CSS, e uma propriedade muito interessante do CSS3 que está por vir é o text-overflow, onde ele nos dá a possibilidade de recortar o texto que por exemplo não cabe dentro de um box, e para nos ajudar mais ainda, ele coloca no final da frase 3 pontinhos(…), característica para dizer de que a frase continua. As propriedades disponíveis são as seguintes:

• text-overflow: ellipsis-word;
• text-overflow: clip;

Por exemplo, se pegasse-mos o seguinte texto:

Lorem ipsum dolor sit amet, consectetur

E utilizasse-mos o text-overflow, ele seria renderizado da seguinte forma:

Lorem ipsum dolor sit…

Dessa forma é possível fazer resumos sem usar sequer nenhuma linguagem de programação.

TutoCle é um buscador focado em encontrar material relacionado ao desenvolvimento web. Se você usa Firefox, pode incluir em seu browser um plug-in para fazer as buscas diretamente dentro do Firefox, você pode também efetuar buscas através da nuvem de tags que encontra no site, ou mediante palavras chave.