03
Sep
CSS truque: Centrar um Objecto/Elemento
exactamente ao centro de uma página
arquivado em: CSS

Para centrar exactamente num centro de uma página um objecto/elemento (ex: “Div” tag, ou uma imagem) devemos colocar margens negativas exactamente a metade da altura e da largura desse objecto/elemento, que vai forçar o centro automático numa página. Atenção só funciona com objectos/elementos de altura e largura fixa.

Segue exemplo:

   .center {
	  width: 300px;
	  height: 300px;
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  margin-top: -150px;
	  margin-left: -150px;
          }

VER DEMO

escrito por: Sérgio Teixeira
No Comments
31
Aug
HTML <!DOCTYPE>
arquivado em: html

Uso do DOCTYPE

A declaração <!DOCTYPE> deve ser a primeira coisa que colocamos no nosso documento de HTML, antes mesmo da ‘tag’ <html>. Esta ‘tag’ informa o browser (navegador) qual o tipo e versão de (X)HTML é utilizado.

As marcações XHTML e os estilos CSS podem não funcionar correctamente com os padrões web sem um <!DOCTYPE> válido.
Por isso é muito importante que especifiquemos sempre o DOCTYPE em todos os documentos HTML, para que o browser (navegador) identifique correctamente o tipo de documento HTML, para que este o possa apresentar de uma forma correcta e válida.

O <!DOCTYPE> de HTML 4.01 exigia uma referência a um DTD (Document Type Definition), pois HTML 4.01 é baseado em SGML (Standard Generalized Markup Language). Já o HTML 5 não é baseado em SGML, e também não requer uma referência a um DTD, mas necessita mesmo assim da declaração <!DOCTYPE> para que os navegadores identifiquem devidamente o tipo de HTML usado.

A marca <!DOCTYPE HTML> não tem ‘tag’ final (end tag).

Exemplo HTML 5

   <!DOCTYPE HTML>
   <html>
   <head>
   <title>Title of the document</title>
   </head>

   <body>
   The content of the document......
   </body>

   </html>
escrito por: Sérgio Teixeira
No Comments
24
Aug
Sobre o “Internet Explorer 6″
arquivado em: html

ie6

Breve História
O Internet Explorer 6 (ou IE6 como é mais conhecido) foi a 6.ª versão do “web browser” desenvolvido pela Microsoft para o sistema operativo Windows. Agosto de 2001 foi a data de lançamento. É o browser (navegador) fornecido com o Sistema Operativo (SO) Windows XP e Windows Server 2003, e também se encontra disponível para Windows NT 4.0, Windows 98, Windows 98 SE, Windows ME e Windows 2000.

Actualidade
Actualmente esta versão do Internet Explorer é amplamente ridicularizada pelos seus problemas de segurança e falta de suporte para os padrões mais modernos da web.

Com uma percentagem substancial de público web que ainda utiliza o referido “browser (Navegador), desatualizado, têm sido criadas campanhas para incentivar esses utilizadores a actualizarem para as novas versões do IE ou até mesmo para mudarem para outros navegadores.

Inclusivé alguns sites retiraram o suporte ao IE6 totalmente e o mais notável exemplo foi o do Google, com o abandono do apoio de alguns dos seus serviços — ver aqui.

Incompatibilidades do IE6
O IE6 apresenta problemas de processamento de caracteres Unicode.
Ao contrário da maioria dos outros browsers (navegadores) em uso actualmente, o IE6 não suporta CSS versão 2, o que torna difícil para os programadores-web garantirem a compatibilidade com o browser, sem degradar a experiência dos usuários de navegadores mais modernos. Os programadores-web têm muitas vezes de recorrer a estratégias como hacks CSS, comentários, condicionais ou outras formas de browser sniffing para fazerem os seus sites trabalharem correctamente no IE6.
Além disso, o IE6 não tem suporte para imagens PNG com transparência alfa.

Em jeito de conclusão
Como podem ver o IE6 é uma tecnologia com 9 anos e realmente o uso dele encontra-se ultrapassado, por isso o meu conselho para actualizarem (se evidentemente forem utilizadores de windows) para uma versão mais recente até porque é gratuíta, mais segura e tecnologicamente mais avançada.

Deixo alguns links:

— Internet Explorer 8;
— Mozilla Firefox;
— Safari;
— Opera;

escrito por: Sérgio Teixeira
No Comments
20
Aug
Colunas em CSS3
arquivado em: CSS

CSS3 oferece-nos uma nova maneira de organizar o texto, em colunas — “Multi-Column”. Esta função permite-nos colocar o texto em colunas muito fácilmente de duas maneiras: através da definição de uma largura para cada coluna, ou pela definição de um número de colunas. A primeira seria feito por largura da coluna “column-width“, a última através da contagem de coluna “column-count“. Para criar um espaço entre as colunas, você precisa especificar uma largura de abertura da coluna — “column-gap“, e também podemos colocar uma linha a separar as colunas com “column-rule“.

“Multi-column” actualmente (à data que escrevo) é suportado apenas nos navegadores (browsers) Mozilla e Safari 3, que têm o prefixo das propriedades, respectivamente com “-moz” e “-webkit”. Mas o melhor é verem a “demo, e o código CSS, é como segue:

PS.: Lembrem-se que só funcionará se tiverem as últimas versões do Firefox (3.6.8) ou do Safari (5.0.1).

#multiColumn {
	margin: 20px auto;
	width: 682px;
	text-align: justify;

	column-count: 3;
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-width: 200px;
	-webkit-column-width: 200px;
	-moz-columnn-width: 200px;
	column-gap: 41px;
	-webkit-column-gap: 41px;
	-moz-column-gap: 41px;
	column-rule: 1px solid #ccc;
	-webkit-colummn-rule: 1px solid #ccc;
	-moz-column-rule: 1px solid #ccc;
       }

VER DEMO

escrito por: Sérgio Teixeira
1 Comment
10
Aug
CSS3 “Rounded Corners”
arquivado em: CSS

A World Wide Web Consortium (W3C) oferece-nos algumas novas opções em CSS3, um dos quais é a funçãoborder-radius. Ambos Mozilla/ Firefox e Safari 3 implementaram esta função, que nos permite criar cantos arredondados em caixa de itens. Deixo aqui alguns exemplos:

Cantos Normais Standard

   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px; /* para o futuro, talvez ie9 */
   -khtml-border-radius: 5px; /* para os antigos Konqueror browsers */

Todos os Cantos com Diferentes Tamanhos

/* Para Mozilla Browsers (ex. Firefox) */
   -moz-border-radius-topleft: 5px;
   -moz-border-radius-topright: 10px;
   -moz-border-radius-bottomright: 20px;
   -moz-border-radius-bottomleft: 0;

/* Para WebKit (ex: Safari) */
   -webkit-border-top-left-radius: 5px;
   -webkit-border-top-right-radius: 10px;
   -webkit-border-bottom-right-radius: 20px;
   -webkit-border-bottom-left-radius: 0;

Atalho

-moz-border-radius: (top-left) (top-right) (bottom-right) (bottom-left);

  -moz-border-radius: 5px 10px 20px 0;

VER DEMO

escrito por: Sérgio Teixeira
Comments Off
08
Aug
Elemento CSS3 “Selection”
arquivado em: CSS
  *::-moz-selection {
	background: #FFCC89;
	color: #222222;
  }

*::selection {
	background: #FFCC89;
	color: #222222;
 }

Este elemento CSS3 representa uma parte do documento que é destacado pelo usuário, incluíndo textos. Por outras palavras, podemos com este elemento modificar a cor e comportamento, quando sublinhamos ou destacamos um texto com o “cursor”.
Pode ser aplicado a todo o website como no exemplo (ver caixa) ou então aplicado apenas a uma parte (por ex. a uma ‘id’ ou ‘class’). Na demonstração apenas modifiquei a cor de background e a cor de texto para melhor visualização e destaque, mas isto fica ao critério de cada um.
De notar que no exemplo referido apliquei o elemento de duas maneiras, uma é para os browsers da Mozilla (ex. Firefox) e o outro elemento é para o browsers em geral que suportem CSS3, este caso em particular funcionou correctamente nos seguintes browsers:
- Safari 5.0.1
- Opera 10.60
- Firefox 3.6.8
- Camino 2.0.3

Nota: Sistema Operativo utilizado: Mac OS X (v.10.6.4)

E se repararem, também aqui no blog se utiliza, essa tecnologia :-)

VER DEMO

escrito por: Sérgio Teixeira
Comments Off
07
Aug
Forçar “Vertical Scrollbar”
arquivado em: CSS
  html {
       overflow-y: scroll;
  }

A razão para aplicar este truque em CSS é para evitar quando a “centralização pula”. Quando navegamos entre páginas com conteúdo suficiente para ter uma barra de rolagem vertical e páginas que não, por vezes o facto de não ter “Scrollbars” no lado direito provoca mesmo a ilusão de descentralização do conteúdo do “site”.

escrito por: Sérgio Teixeira
Comments Off
07
Aug
Inserir comentários em CSS
arquivado em: CSS
  body {
    Background: red;  /* Outra cor a utilizar orange */
  }

O conteúdo no interior das marcas /* */ são comentários CSS. Isto permite inserir notas em que o CSS não será interpretado. Neste caso, este comentário permite que alguém que lê o arquivo CSS que sabe que determinada linha de CSS foi concebido para definir também outra cor de background.

escrito por: Sérgio Teixeira
Comments Off
06
Aug
<pre> html tag
arquivado em: html

O Elemento ou ‘tag’ <pre>  serve para definir texto pré-formatado.
Texto inserido num elemento (ou tag) <pre> é exibido numa fonte de largura fixa (geralmente Courier), e preserva os espaços e quebras de linha. Podemos assim por exemplo ao escrever este texto aqui e também acrescentar linhas de código html sem que este interfira com o código da página, e para que o leitor possa copiar o código sem problemas de maior. Ver exemplo:

<pre>
  Texto inserido num elemento (ou tag)
  <pre> é exibido numa fonte de largura fixa (geralmente Courier),
  e preserva os espaços e quebras de linha.
</pre>

É costume vermos este tipo de utilização em blogs ou sites sobre programação para que o respectivo autor faça demonstrações com código e este possa ser fácilmente copiado. Eu próprio vou utilizar muitas vezes também :-)

escrito por: Sérgio Teixeira
Comments Off
05
Aug
Blog em «obras»…
arquivado em: Uncategorized

Após uma longa ausência, ‘apontamentosmac’ está de volta! Darei mais atenção ao WEB Design/programação , relacionando estes com o uso de Mac’s no dia-a-dia.
Bom o aspecto do blog que ainda se encontra em remodelação, prometo ir actualizando ao longo do tempo.

escrito por: Sérgio Teixeira
1 Comment