Pinceladas da WEB Posts da categoria: CSS http://www.pinceladasdaweb.com.br/blog/2007/10/10/c omo-inserir-css-em-uma-pagina-via-import/ blog reactions Postado em: 10 de Outubro de 2007 por Pedro Rogério Em um post anterior, eu citei as 3 formas mais conhecidas e utilizadas de se inserir CSS em uma página, mas ficou faltando uma, não muito utilizada pela trupe de desenvolvedores, seja por falta de conhecimento ou gosto, mas isso agora não vem ao caso. Para inserir uma folha de estilos via @import em uma página é muito simples, basta você utilizar o seguinte código e colocá-lo no header de sua página: <style type="text/css"> @import url("style.css"); </style> Da forma como foi descrito acima, seu CSS funciona-rá em todos os browsers, dessa outra forma também é válida: <style type="text/css"> @import url(style.css); </style> Mas, se você inserir dessa forma, por exemplo: <style type="text/css"> @import url("style.css") all; </style> Ela funcionará em todos os browsers, menos nos IE s do Windows. Se você quer saber mais sobre esses truques, é bom dar uma olhada nas referências abaixo: http://imfo.ru/csstest/css_hacks/import.php http://centricle.com/ref/css/filters/ http://w3development.de/css/hide_css_from_browsers/import/ ORDEM DE DECLARAÇÃO DAS PROPRIEDADES EM CSS blog reactions Postado em: 9 de Outubro de 2007 por Pedro Rogério Até hoje não vi uma referência concreta sobre ordem de declaração de propriedades em css, mas toda regra de boas maneiras hoje em dia é válida, e dessa vez achei uma
referência interessante que estarei compartilhando aqui com vocês, onde se supõe que a melhor forma de declarar as proriedades seria assim: Comportamento display overflow clear Posicionamento position float top, right, bottom, left Tamanho width height Margens e bordas margin padding border Texto font text line-height Fundos e Cores background color Se você tem alguma outra ordem que gosta de seguir, mostre aí nos comentários. CSS TIP: AS 3 FORMAS DE INSERIR CSS EM UMA PÁGINA WEB blog reactions Postado em: 8 de Outubro de 2007 por Pedro Rogério Esse post visa atingir quem está iniciando em CSS e não sabe as formas possíveis de inserí-los em uma página.
Quem está iniciando no mundo dos WebStandards, mais precisamente em CSS, muitas vezes acaba se perdendo e não sabe da existência das 3 formas possíveis de se inserir CSS em uma página, algumas vezes por culpa do próprio desenvolvedor, que não tem interesse em buscar aprendizado, ou por culpa de algum editor WYSIWYG, e é aí onde os maiores problemas acontecem, pois o desenvolvedor perde o contato com o código e acaba virando desenvolvedor de um editor só. 1ª Forma: CSS diretamente nas tags HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> <head> <title>seu título</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <p style= color:#b000ff; >CSS dentro das tags HTML</p> </body> </html> Essa forma não é recomendada pois alí você está misturando a camada de conteúdo(html), com a camada de apresentação(css). Utilize somente em casos de extrema necessidade, ou somente para efetuar testes. 2ª Forma: CSS dentro do Head de sua página <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> <head> <title>seu título</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <style type= text/css >.texto {color:#b000ff;} </style> </head> <body> <p class= texto >Estilo chamado através do head da página</p> </body> </html> Nessa 2ª forma, utilizamos de classes ou ids para dar estilo a nossa página, inserindo o CSS denro do Head de nossa página. 3ª Forma: CSS dentro do Head de sua página vindo de um arquivo externo <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd > <html xmlns= http://www.w3.org/1999/xhtml xml:lang= pt-br lang= pt-br > <head> <title>seu título</title> <meta http-equiv= content-type content= text/html;charset=utf-8 /> <link rel= stylesheet type= text/css href= estilo.css /> </head> <body> <p class= texto >Estilo chamado através do head da página</p> </body> </html> Essa é a forma mais recomendada, pois o nosso CSS fica em um arquivo externo, e as camadas ficam todas separadas, e também temos a vantagem de que se precisarmos efeuar alguma manutenção no CSS, não precisaremos tocar no HTML.
CSS TIP: ORDEM DE DECLARAÇÃO DOS LINKS blog reactions Postado em: 5 de Outubro de 2007 por Pedro Rogério Já faz muito tempo que quero falar sobre isso aqui no blog, mas hoje, vendo os meus Feeds, acabei achando uma referência legal que me fez criar coragem e escrever sobre o assunto. Quando vamos declarar no CSS os links, por exemplo, a maioria das pessoas costuma deixar de uma forma toda desorganizada, até eu já fiz muito isso, mas a ordem correta de declaração dos links é essa: a:link {} a:visited {} a:hover {} a:active {} Para não esquecer mais, basta lembrar dessa palavrinha: LoVe HAte. 72 ACRÔNIMOS QUE FALAM OS GEEKS blog reactions Postado em: 4 de Outubro de 2007 por Pedro Rogério 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. 30 EXTENSÕES FIREFOX PARA DESENVOLVEDORES WEB
blog reactions Postado em: 3 de Outubro de 2007 por Pedro Rogério 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 plugin. 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. PADDING NOS BOTÕES INPUT blog reactions Postado em: 1 de Outubro de 2007 por Pedro Rogério Não sei por que o IE faz isso nos botões input, mas vocês já repararam que todo botão input no IE, ele coloca um padding enorme entre o texto e as laterais do botão, experimentem abrir essa página de exemplo no IE e depois abram em um outro browser Standard Compliant para vocês verem a diferença. Existe uma maneira bem simples de corrigir isso, basta adicionar um overflow:visible; ao botão que esse bug é corrigido, e depois é só aplicar um padding para as laterais esquerda e direita, dêem agora uma olhada para ver como ficou, simples não?. Eu vi essa dica em um site a um bom tempo atrás, mas no momento não lembro o endereço do site, então, se alguém souber, me passe que eu coloco aqui os devidos créditos. COMO OCULTAR SEU EMAIL DOS SPAMBOTS SOMENTE COM CSS blog reactions Postado em: 26 de Setembro de 2007 por Pedro Rogério Hoje em dia se você deixar seu e-mail a deriva na Internet, sabe que amanhã sua caixa estará lotada de e-mails indesejados, pessoas querendo vender de tudo, desde Softwares até Viagra, mas acabei achando uma técnica bem interessante de ocultar o e-mail somente com CSS, utilizando da pseudo-classe :after, que para nossa alegria, não funciona no IE. Para essa façanha, utilizaremos o seguinte código CSS. /* \40 corresponde ao símbolo "@" */ #email:after{ content: " <pedrorogerio\40pinceladasdaweb.com.br>"; } Como podem ver o \40 será substituído pelo @. No HTML, utilize algo do tipo: <p id="email">webmaster</p> Agora é só dar uma olhada no exemplo, lembrando que no IE isso não funciona. CSS QUIZ blog reactions Postado em: 21 de Setembro de 2007 por Pedro Rogério Quer ver se você é bom em lembrar todas as propriedades do CSS? No total são 122 propriedades descritas nas especificações do CSS Nível 2, e nesse quiz você deve listar todas as propriedades que sabe dentro de 7 minutos. É incrível, quando estou desenvolvendo lembro de praticamente quase todas elas, mas quando fui fazer esse quiz,
acabei lembrando das mais difíceis e esquecendo as mais fáceis. Veja aí abaixo como eu me sai: É, estou ficando velho e com a memória fraca!!! CSS3 - A PSEUDO-CLASSE :not(x) blog reactions Postado em: 19 de Setembro de 2007 por Pedro Rogério 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