quarta-feira, 3 de dezembro de 2014

CSS Resets e Normalizing CSS

Olá pessoal!

Eu sei que praticamente já tem uma década que não posto aqui, mas espero que limpando as teias de aranha com esse post eu volte aqui com mais frequência...mas vamos ao que interessa!

Comecei a estudar RWD (Responsive WebDesign ou WebDesign Responsivo) e gostaria de começar a compartilhar o que estou aprendendo aqui e quem sabe trocar algumas idéias com vocês! (Aliás, já comecei com um problema pra resolver no próprio blog, vou descobrir mais tarde porque raios a sidebar não está no seu devido lugar).

Quem de nós nunca cruzou os dedos e teve aquela ansiedade antes de verificar o seu lindo site no IE, depois de vê-lo funcionando bonitinho no Firefox? E aquele ódio subindo do seu coração até a boca em forma de palavras não bonitas ao ver tudo torto depois do IE carregar seu trabalho? Pois é, acho que todos já passamos por uma situação similar, e é exatamente para situações como essas que usamos o CSS Reset.

Os browsers já tem alguns CSSs padrões, como margens, paddings, diferentes tamanhos de fontes para headings, e por aí vai...um exemplo mais visível, é que se você não coloca nenhum CSS para seus links, o CSS padrão dos browsers fará todos os links serem azuis e sublinhados, e os visitados serão roxos; e é por essa razão que temos tantas dores de cabeça para fazer nossos sites ficarem iguais em todos os browsers; o CSS Reset nada mais é do que "zerar" essas configurações padrões para que você possa trabalhar com um CSS consistente em todos os browsers.

Nesse mesmo contexto, existe também o Normalizing CSS que, ao invés de zerar as configurações padrões dos browsers, transforma esses valores em valores consistentes.

Existe uma lista com variados códigos que você pode usar:

CSS reset:
http://meyerweb.com/eric/tools/css/reset/

normalize.css:
http://necolas.github.io/normalize.css/

Mais exemplos:
http://www.cssreset.com/

No tableless.com.br, o autor postou uma solução bem simples, com o seletor ele zera algumas propriedades, nesse caso, essas propriedades de todos os elementos do site ficarão zeradas:

*  {
margin: 0;
padding:0;
}


Leia o post original sobre CSS resets do tableles.com.br

Saiba mais sobre CSS resets (em inglês)

Espero que eu tenha ajudado, e se alguém quiser trocar informações, curiosidades, experiências de trabalho, comentem!!







sábado, 29 de agosto de 2009

Construção de Algoritmos, parte II

Vamos falar hoje sobre sobre entrada/saída e estruturas de decisão.

Dispositivos de Entrada e Saída

Existem muitos dispositivos de entrada, dos quais podemos citar o teclado de um computador, o mouse, telas touchscreen, etc, bem como existem muitos dispositivos de saída, entre eles, a impressora, o monitor, entre outros.

Os dispositivos de entrada são aqueles que passam algum dado para "dentro" do computador, de seu celular e afins. Esses dados são processados e te retornam alguma informação através dos dispositivos de saída.

Para representar uma entrada de dados através dos algoritmos, utilizo:

Leia(a,b);

Onde a e b são variáveis já declaradas anteriormente.

Para representar uma saída de informação através de um algoritmo, utilizo:

Escreva("Alô Mundo!");

Quando utilizo o "Escreva" uma mensagem aparecerá no monitor, quando se tratar de um texto, deve-se colocá-lo entre aspas.

Estruturas de Decisão

Existem casos onde o programa deve tomar uma decisão baseado em alguma condição, por exemplo:

- Se chover, fico em casa, senão, vou ao parque.

Vamos ver como fica em um algoritmo?

Peça para o usuário digitar duas notas, depois calcule a média entre elas. Se a média for maior ou igual a 7, então o aluno está aprovado, se a nota for menor que 7, então o aluno está reprovado.

Início

real: n1,n2,media;//declarando as variáveis, aqui declaramos como real pois as notas podem receber números com vírgula

Leia(n1,n2);//pedindo para o programa ler os valores que o usuário digitar

media←(n1+n2)/2;//a variável media recebe a soma das duas notas dividido por 2, a seta representa que a variável recebe um valor

Se(media>=7)//a condição para que o programa escreva Aluno aprovado fica entre parentêses. No caso, se o valor guardado na variável "media" for maior ou igual a 7, o programa executa a linha a seguir.
então
escreva("Aluno aprovado!");
Senão//caso o valor guardado na variável "media" não for maior ou igual a 7, o programa executa a linha a seguir
escreva("Aluno reprovado!");

Fim.

No exemplo anterior, havia uma condição para que o aluno fosse aprovado, e esta era que sua média devia ser de 7 para cima, caso contrário, ele estaria reprovado. Pode acontecer de haver mais de uma condição, nesse caso, você pode utilizar vários "SEs" encadeados, mas mais pra frente eu mostro como. Em casos que existam várias condições para se executar essa ou aquela linha, eu recomendo a utilização do "Escolha". Veja:

Faça uma calculadora simples.

Início
inteiro opcao;//declaração da variável que receberá a operação que o usuário escolher
real: n1,n2;//declaração das variáveis que receberão os números que o usuário digitar.

Escreva("Digite o primeiro número: ");//uma mensagem para pedir pro usuário digitar um número
Leia(n1);//lendo e guardando na variável n1 o valor que o usuário digitar

Escreva("Digite o segundo número:");//uma mensagem para pedir pro usuário digitar um número
Leia(n2);//lendo e guardando na variável n1 o valor que o usuário digitar

Escreva("Escolha uma das opções: 1) +, 2)- 3)/ 4)* ");//uma mensagem pedindo pro usuário escolher uma operação para usar com os números digitados. No caso de ele digitar 1, escolherá soma, no caso de digitar 2, escolherá subtração, no caso de digitar 3, escolherá divisão e no caso de digitar 4, escolherá multiplicação.
Leia(opcao);//lendo e guardando na variável opcao o valor que o usuário digitar

Escolha(opcao);//entre os parentêses devemos colocar a variável que o Escolha irá analisar
caso 1: escreva(n1+n2);//se o usuário digitou 1,o escreva mostrará a soma entre os valores guardados em n1 e n2
caso 2: escreva(n1-n2);//se o usuário digitou 2,o escreva mostrará o resultado da subtração entre os valores guardados em n1 e n2
caso 3: escreva(n1/n2);//se o usuário digitou 3,o escreva mostrará o resultado da divisão entre os valores guardados em n1 e n2
caso 4: escreva(n1*n2);//se o usuário digitou 4,o escreva mostrará o resultado da multiplicação entre os valores guardados em n1 e n2
caso contrário: escreva("Você digitou uma opção inválida");//caso o usuário tenha digitado qualquer outro valor que não os que o Escolha analisará, aparecerá uma mensagem dizendo que o usuário escolheu uma opção inválida.
fimescolha;
fim.

Nos próximos posts falarei sobre blocos de instrução e laços de repetição!!! Acompanhem =D

quinta-feira, 27 de agosto de 2009

Construção de Algoritmos, parte I

Olá pessoas!!!

Antes de falar sobre linguagens de programação, devemos primeiro falar sobre algoritmos, mais importante que aprender essa e outra linguagem, é aprender a programar! Desse modo, fica muito mais fácil entender a linguagem com que vamos trabalhar, pois podemos focar mais na sintaxe.

Algoritmo é um conjunto de instruções sequenciais para executar determinada tarefa. Podemos descrever também como sendo uma forma textual de se descrever os passos para a resolução de uma tarefa.

Podemos utilizar algoritmos para resolver qualquer tipo de problema, não sendo necessariamente apenas para escrever programas de computador, por exemplo, trocar um pneu de um carro, receita de bolo e por aí vai. Vejamos um exemplo de um algoritmo não-computacional:

Trocar uma lâmpada:
-pegar uma escada;
-posicionar a escada embaixo da lâmpada;
-buscar uma lâmpada nova;
-subir na escada;
-retirar lâmpada velha;
-colocar lâmpada nova.

Deu pra entender um pouco sobre como os algoritmos podem nos ajudar a resolver um problema?

Antes de vermos algoritmos computacionais, vamos falar um pouco sobre os Tipos Primitivos, Variáveis e Constantes e Expressões Aritméticas.

Tipos Primitivos

São os tipos básicos de informação.
Inteiro: informação pertecente ao conjunto de números inteiros relativos, positivos e negativos (0 a 9)
Real: pertecente ao conjunto de números reais. (1; 1/2; 1,33, 99,9...)
Caracter: alfanumérico (A,B,C,D...Z; 1,2.3....%, +,-,*...)
Lógico: Verdadeiro ou falso (V ou F, T ou F, 0 ou 1)

Constantes
São valores que não sofrem nenhuma variação no decorrer do tempo, ou seja, nunca vão mudar.
Exemplo: PI=13,14; velocidade da luz; não fume!;

Variáveis
São valores que sofrem variações no decorrer do tempo.
Exemplo: idade, câmbio(dinheiro), temperatura.

Expressões

Aritméticas: operadores aritméticos utilizados em cálculos:
- +,-,*,/
- mod: resto da divisão.
- div: quociente da divisão.
- pot(x,y): potência.
- rad(x): raiz quadrada.

Lógicas:
- = igual
- > maior
- <> diferente
- >= maior ou igual
- <= menor ou igual
Obs. vale lembrar que esses operadores nem sempre são os mesmos nas linguagens de programação, por exemplo, na maioria deles, o sinal de diferente é !=

Vejamos agora como escrever um algoritmo computacional:

Começamos o algoritmo com a palavra "início". Em seguida, declaramos as variáveis que serão usadas no programa.

Declarando variáveis

Como já vimos, as variáveis são valores que sofrem alterações no decorrer do tempo, no caso, no decorrer do programa. Declaramos variáveis quando não sabemos o valor exato de algo que vamos utilizar no programa, por exemplo, se fizermos um programa que precise da idade do usuário que estiver utilizando-o, não temos como saber esse valor, pois não sabemos quem está usando o programa, portanto, declaramos uma variável que armazenará esse valor.

Precisamos declarar o tipo da variável (se ela será do tipo inteiro, real, caracter ou lógico, esse tipo define o tipo do valor que ela armazenará) e dar um nome para ela. Lembre-se, não coloque nomes complicados que você não entenderá depois, é uma boa prática colocar nomes simples e que tenham a ver com o que a variável armazena.

Podemos iniciar a variável com algum valor pré-definido, isso é bom para variáveis que guardem soma, subtração, divisão ou multiplicação de elementos, pois, toda variável guarda um lixo de memória, ou seja, um valor qualquer que já vem armazenado no espaço da memória que a variável estiver alocada e isso afeta o resultado da operação que você estiver fazendo com ela.

Exemplo:

inteiro a, b=0;

Neste exemplo, estamos declarando duas variáveis do tipo inteiro, elas poderão armazenar números inteiros, positivos ou negativos. A variável "a" guardará um valor e a variável "b" que já começa valendo 0, guardará outro valor.

Nunca comece um nome de uma variável com um número ou um símbolo.


Para terminar um algoritmo, utilizamos a palavra "fim".

Vamos ver um exemplo?

Dados 4 números, apresente a média.

início

inteiro: n1=4,n2=5,n3=6,n4=10;
real: media=0;

media = (n1 + n2 + n3 + n4) / 4;

fim.

Neste exemplo, declaramos 4 variáveis já iniciadas com um valor para armazenar um número inteiro, depois, declaramos uma variável do tipo real para armazenar o valor da média, pois quando dividimos valores, pode acontecer de dar um número quebrado, ou seja, do tipo real. Em seguida, fizemos com que a variável "media" recebesse a soma das 4 variáveis inteiras com o resultado sendo dividido por 4.

No próximo post, iremos ver Estruturas de Decisão. Aguardem!! =)

quarta-feira, 3 de setembro de 2008

Fazendo seu HTML ficar por cima do FLASH

Oláá pessoal!! Venho por meio deste post compartilhar o que talvez tenha sido a minha melhor descoberta.

O Problema

Acho que o mais comum é ter um menu horizontal com submenus e logo abaixo dele, vem um banner em flash. Quando tenta-se abrir um dos submenus, ele fica por baixo do flash, sendo impossível de ser clicado. Veja um exemplo:



E aí, o que fazer? A maioria de nós opta por refazer o menu inteiro em flash, mas calma, isso não é necessário. Na verdade, é mais simples do que você imagina!!

A única coisa que temos que fazer é deixar o flash transparente. Como? Vá no código gerado para o objeto em flash e adicione a seguinte tag: <param name="wmode" value="transparent"> e no último embed, junto com os parâmetros width, height, src, type e o que mais tiver ali, adicione wmode="transparent". Veja:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="400" height="100">
<param name="movie" value="banner_post.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="banner_post.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="100" wmode="transparent">

Veja como fica depois de implantados os códigos:



Para quem está usando as versões mais atualizadas do Dreamweaver, ele gera um código em javascript, creio eu que seja para contornar aquele problema do Internet Explorer, que é necessário dar um clique no flash antes de poder utilizá-lo. Basta colocar o wmode também no javascript para que esse método funcione:

AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
'width', '1000',
'height', '768',
'src', 'teste',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'noscale',
'wmode', 'window',
'devicefont', 'false',
'id', 'teste',
'bgcolor', '#000000',
'name', 'teste',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'teste',
'salign', '',
'wmode', 'transparent'

); //end AC code

Voilá, está pronto!!!

Um grande abraço para todos!!

terça-feira, 26 de agosto de 2008

Dificuldades de um desenvolvimento de software e o método JAD

O desenvolvimento de um software não é uma tarefa simples, tanto que cada vez mais é visto como uma disciplina de engenharia, envolvendo várias técnicas e processos de planejamento e formalismo. Diante disso, um mal comprometimento das pessoas envolvidas pode acarretar em vários problemas.

Uma das grandes dificuldades é transformar o conhecimento tácito do cliente em um conhecimento explícito, ou seja, transformar o conhecimento que o usuário do sistema adquiriu com sua experiência e estudos em sua função, e que, por essa razão, só ele o detém, em algo que qualquer um possa entender. Não dedicar tempo para coletar os dados necessários para o entendimento do processo, torna isso ainda mais difícil.

Quando o levantamento de requisitos não foi bem feito, obviamente o sistema será prejudicado e sua qualidade fica comprometida, gerando uma insatisfação do cliente com o produto final, o que o leva à falta de confiança nos serviços de quem contratou.

O Joint Application Design - JAD é um método de desenvolvimento de softwares que, segundo relatos de quem o utiliza, aumenta a produtividade, minimizando os eventuais problemas, se não os eliminam.

Esse método foi desenvolvido pela IBM do Canadá em 1977 e utiliza-se de reuniões conduzidas por um líder neutro que orienta os analistas e os clientes a trabalharem juntos no desenvolvimento do sistema. Dessa forma, eles se tornam co-responsáveis pelo sucesso ou pelo fracasso do projeto.

São vários os benefícios trazidos pelo método. Estudos mostram um aumento de 20% a 60% na produtividade em relação a outros métodos.

Poderia-se dizer que o maior benefício do método é a maior qualidade do projeto, afinal, as informações produzidas pelo trabalho em equipe dos desenvolvedores do sistema e do cliente, são apoiadas no conhecimento de cada um deste grupo, e como há essa maior participação de quem requisitou o sistema, o resultado final é o que realmente era-se esperado dele, o que gera uma redução dos custos de desenvolvimento e manutenção, pois a necessidade de correção do produto final é menor, se não nula.

Para entender mais sobre os processos do JAD acesse: http://en.wikipedia.org/wiki/Joint_application_development

Baseado no texto: O Desenvolvimento de Software Aplicando a Técnica Joint Application Design

sexta-feira, 22 de agosto de 2008

Entendendo a tecnologia computacional

Uma perfeita analogia de como funciona um sistema de computação:

Mostrando códigos html no post

Para fazer o post anterior, precisei mostrar nele próprio alguns códigos em html, porém, mesmo digitando-os no modo "Escrever" do blogger, os códigos continuam sendo interpretados pelo navegador, então, o que fazer?

É simples. Troque o caracter ' < ' que inicia uma tag pelo código html que a representa: &lt , em seguida, troque o caracter ' > ' , que fecha uma tag, pelo seu código html: &gt .

Dá trabalho? E como!!! Mas não se preocupe, existe um formatador automático, onde você digita o cógido html a ser colocado no post e ele já faz todo o trabalho por você:

http://alexestudos.eti.br/formatador/

Abraçoooos =)