Redimensionamento Proporcional de Imagem com JavaScript sem distorção
Aqui estava eu começando um código em JavaScript para redimensionar umas imagens numa página sem, contudo, perder a sua proporcionalidade. Eis que me deparo com um pequeno trecho de código que resolveria os meus problemas sem a necessidade de nada especial e que compartilho com vocês:
<html>
<head>
<script>
function redimensiona()
{
document.images['id_da_imagem'].width = 300;
}
</script>
</head>
<body>
<img id="id_da_imagem" src="endereco" onload="redimensiona() alt="imagem" />
</body
</html>
Ao redimensionamento acima basta que você o faça para largura, no caso 300px (não importando o tamanho original da imagem), os próprios js e browser se encarregam de redimensionar a altura da imagem mantendo sua proporcionalidade original sem distorcê-la. Simplório porém eficiente.
Vale ressaltar que esse redimensionamento não altera as dimensões ou resolução da imagem no servidor, logo ela demorará a ser carregada igualmente como se tivesse sendo mostrada no browser ainda com tamanho original.
Abraço
HTML para Iniciantes – Aula 3
Olá,
O HTML é a principal parte no desenvolvimento de uma página. É através dele que vamos colocar todo o conteúdo de um site à disposição dos usuários. Basicamente, existem três níveis no desenvolvimento web: o conteúdo, construído pelo HTM; a formatação desse conteúdo, tratada pelo CSS, de modo a deixá-lo mais usável e atraente; e o comportamento, controlado, por exemplo, pelo Javascript e Ajax. Focaremos nesse momento apenas no HTML.
É evidente nos últimos anos que o desenvolvimento do HTML trouxe uma relevante melhoria no que diz respeito a semântica dos conteúdos colocados nas páginas. Dentro dessa tendência posto abaixo uma tabela com tags implementadas no HTML5.
| Tag | Description |
|---|---|
| <!–…–> | Comentário |
| <!DOCTYPE> | Defines o tipo de documento HTML |
| <a> | Link. O atributo href define o endereço do link |
| <abbr> | Define uma abreviação |
| <address> | Define um endereço |
| <area> | Define uma área, estabelecida por coordenada e que pode ser linkada, em uma imagem adicionada no html |
| <article>New | Define um determinado texto como um artigo |
| <aside>New | Define um termo de determinado artigo |
| <audio>New | Conteúdo de áudio |
| <b> | Defines bold text |
| <base> | Define uma URL base para todos os links em uma página |
| <bdo> | Define a direção do texto de exibição |
| <blockquote> | Citação longa |
| <body> | Corpo de um documento html |
| <br> | Quebra de linha simples |
| <button> | Define um button = |
| <canvas>New | Define um gráfico |
| <caption> | Define um título no cabeçalho da tabela |
| <cite> | Citação |
| <code> | Define um código de determinada linguagem de programação |
| <col> | define o numero de colunas que uma tabela terá; |
| <colgroup> | Grupos de colunas de uma tabela |
| <command>New | Define um button de comando |
| <datalist>New | Usado para representar uma lista of dados em um menu drop-down |
| <dd> | Define um iten em uma lista com definições |
| <del> | Texto deletado |
| <details>New | Detalhes de um elemento |
| <dialog>New | Diálogo (Conversação) |
| <dfn> | Definição de um termo |
| <div> | Seção de um documento |
| <dl> | Iten de uma lista de definição |
| <dt> | Termo de definição |
| <em> | Enfatiza um texto (deixa, como padrão, em itálico) |
| <embed>New | Plugin ou conteudo interativo externo |
| <fieldset> | Define um campo com termos semelhantes em um formulário |
| <figure>New | Insere uma mídia com conteúdo e sua legenda |
| <footer>New | Seção de rodapé da página |
| <form> | Define um formulário |
| <h1> to <h6> | Define títulos |
| <head> | Define informações sobre o documento |
| <header>New | Define um cabeçalho para uma seção ou uma página |
| <hgroup>New | Informação sobre determinada seção em um documento |
| <hr> | Cria uma linha horizontal |
| <html> | Define um documento HTML |
| <i> | Texto em itálico |
| <iframe> | Cria um frame dentro da página em vez de dividí-la |
| <img> | Imagem |
| <input> | Define um campo input |
| <ins> | Texto inserido no documento |
| <keygen>New | Usada para processar formulários com sistema de gerenciamento de certificados |
| <kbd> | Indica que os caracteres devem ser digitados do teclado |
| <label> | Define uma label (rótulo) |
| <legend> | Título do fieldset de um form |
| <li> | Item de uma lista |
| <link> | Define o link para um recurso (script, por exemplo) externo |
| <map> | Define uma imagem com regiões clicáveis |
| <mark>New | Destacar parte de um texto |
| <menu> | Cria a lista de opções de um menu |
| <meta> | Informações do tipo META localizadas no HEAD do documento |
| <meter>New | Medições em um intervalo pré-definido |
| <nav>New | Link de navegação |
| <noscript> | Definie região na qual não são suportados scripts |
| <object> | Define um objeto incorporado à página |
| <ol> | Itens de uma lsta ordenada |
| <optgroup> | Organiza itens de um elemento o tipo SELECT em grupos |
| <option> | Opção em uma lista de seleção de um menu drop-down |
| <output>New | Usado para representar o resultado de um cálculo em HTML 5 |
| <p> | Parágrafo |
| <param> | Parâmetro para um dado do tipo object |
| <pre> | Texto pré-formatado |
| <progress>New | Define o progresso de uma tarefa de qualquer tipo |
| <q> | Citação curta |
| <rp>New | Usado em anotações de Ruby para definir o que mostrar navegadores que não suportam o elemento gerado pelo Ruby. |
| <rt>New | Explicação para anotações de Ruby |
| <ruby>New | Comentários de Ruby |
| <samp> | Amostra de código computacional |
| <script> | Define um Script |
| <section>New | Define uma seção |
| <select> | Lista com itens selecionáveis |
| <small> | Pequeno texto |
| <source>New | É usado para especificar fontes de mídia de áudio ou vídeo |
| <span> | Usado para aplicar um estilo em um bloco HTML |
| <strong> | Texto destacado |
| <style> | Definição de um estilo (CSS) |
| <sub> | Texto em caixa baixa |
| <sup> | Texto em caixa alta |
| <table> | Tabela |
| <tbody> | Corpo da Tabela |
| <td> | Célula de uma tabela |
| <textarea> | Área que recebe bloco de texto |
| <tfoot> | Rodapé da tabela |
| <th> | Cabeçalho de cada coluna numa tabela |
| <thead> | Contém os cabeçalhos de uma tabela |
| <time>New | Define uma data/horário |
| <title> | Título do documento (mostrado na barra de título do browser) |
| <tr> | Linha de uma tabela |
| <ul> | Itens de uma lista desordenada |
| <var> | Define uma variável |
| <video>New | Define um video |
Divirtam-se. =D…
Abraço…
HTML para Iniciantes – Aula 2 – Noções básicas
Olá pessoal,
Agora, que deixamos o blá blá para trás colocaremos realmente a mão na massa… Basicamente, entre as ferramentas disponíveis e que podemos utilizar para o desenvolvimento do nosso código, precisaremos apenas de um editor de textos simples, salve o seu documento com a extensão [nome do arquivo].html. É realmente interessante que vocês ainda não utilizem ferramentas de desenvolvimento robustas já que elas facilitam o trabalho, o que pode ocultar detalhes e o nosso momento é de aprendizagem. Portanto, usem apenas um editor de textos comum, como o Notepad++ e um navegador (Firefox, Internet Explorer, Opera, Safari etc). Dê preferência a navegadores mais atuais.
Nosso objetivo atual é conhecer como funciona e qual a estrutura básica de um documento HTML, além do funcionamento de algumas tags. As tags são palavras entre os sinais “<” e “>” que definem o comportamento de parte do seu conteúdo (por ex.: define qual parte do texto é um título ou parágrafo ou imagem etc), ao invés de você apenas jogar o conteúdo em sua página.
É importante ter em mente que exatamente o que for escrito por nós será mostrado pelo browser, por isso devemos ter cuidado na escrita do nosso código, deixar uma tag por “fechar”, por exemplo, pode influenciar todo conteúdo seguinte da página. Vejamos, portanto, o exemplo que será nosso primeiro código. O que será mostrado a seguir é estrutura básica de uma página:
<html>
<head>
<title>Nosso primeiro documento HTML</title>
</head>
<body>
<!--Note a diferença entre as tags que identificam títulos: h1, h2 e h3-->
<!--Isso é um comentário ;]-->
<h1>Título 1</h1>
<h2>Título 2 - Subtítulo</h2>
<h3>Título 3 - Subtítulo</h2>
<p>Aqui há um parágrafo. Qual tag é responsável por isso?</p>
</body>
</html>
Clique AQUI para vizualizar como será exibida nossa primeira página.
Agora, entenderemos como, exatamente, cada tag faz para que o nosso browser exibisse cada conteúdo da forma que exibiu. Em primeiro lugar, todo documento html deve começar e terminar, como vimos acima, entre as tags “<html> e </html>”, respectivamente. Esta tag indica o browser queali se inicia (<html>) e também acaba (</html>). Note a presença do caractere “/”, ele estará presente nas tags de fechamento. Lembre-se disso. A seguir temos as tags principais <head> e <body>. É na tag <head> que ficam informações sobre o documento, é a parte pensante do documento, apesar de o browser não as exibir. Dentro da tag <head> podem aparecer tags como: <title>, <meta>, <style>, <script>, <link> e <base> que conheceremos adiante. O que realmente aparecerá para nós na janela principal do browser (todo conteúdo) ficará entre as tags <body> e </body> e será o corpo do documento.
Agora, explicito como cada tag que aparece no nosso documento se comporta:
<h1>, <h2> e <h3> e mais <h4>, <h5> e <h6> e suas respectivas tags de fechamento: definem conteúdo como título e sub-títulos;
<p> e </p>: dá a um certo bloco de texto a propriedade de parágrafo.
<title> e </title> na tag <head>: Entitula sua página. O texto aqui definido será exibido na barra de título do se navegador.
No próximo post trarei uma relação com exemplos de outras tags para que a gente possa se familiarizar mais com os elementos de um documento HTML e desenvolver melhorias nas nossas páginas…
Abraço…
HTML para Iniciantes – Aula 1
Olá povo,
Como o nosso tempo é sempre curto e gostamos mesmo é de por a mão na massa, prometo me prolongar muito pouco naqueles assuntos um tanto quanto entediantes, digamos, como a história e o por que devemos utilizar o HTML e bla bla bla, Ok!!!… =]… Bem…
O HTML foi criado no início da década de 90 por Tim Berners-Lee. e tinha como proposta inicial a troca de informações e de documentos de pesquisas, entre cientistas de diferentes universidades. O projeto inicial tornou-se um sucesso jamais imaginado. Assim foram lançadas as fundações da Internet tal qual a conhecemos hoje.
O HTML é uma linguagem de marcação utilizada para a criação de Web Pages e a ótima notícia é que é muito fácil de ser aprendida. Nas nossas aulas a ênfase se dará na criação dessas páginas utilizando o XHTML (Uma reformulação do HTML e suas tags com as regras do XML para facilitar a acessibilidade, inclusive a dispositivos móveis). E antes que a dúvida chegue, HTML significa Hyper Text Mark-up Language, Linguagem de Marcação de Hiper Texto (entenda-se que você deixará claro para o browser o tipo de dado que você exibirá como por exemplo títulos, parágrafos, tipos de formatação entre outros marcadores). O HTML é uma linguagem que deve ser utilizada para estruturar uma página da WEB. Todo o conteúdo visto por você e pelo qual as ferramentas de busca se orientam é estruturado pelo HTML, por isso sua elevada importância. Há inúmeras soluções para auxiliar no desenvolvimento de páginas de Internet. O conhecimento básico da linguagem, porém, torna-se importante para facilitar qualquer possível manutenção da base do site.
O consenso para o desenvolvimento, presente e futuro, do HTML é de que ele deve operar de forma eficiente entre diversos navegadores, no sentido de se reduzir gastos e conseguir fazer com que diversos dispositivos (celulares ou monitores de diferentes resoluções, por exemplo) consigam ter acesso ao meio da WEB. Por isso, se faz necessário que o desenvolvimento do HTML se dê da maneira adequada e de forma semanticamente correta, falaremos disso mais adiante.
Enfim, espero que o post tenha sido um bom ponto de partida. A partir já do próximo post falaremos sobre assuntos mais técnicos e específicos sobre como realmente o HTML funciona, suas tags e sua semântica entre outros assuntos.
Até a próxima. Abraço… =]
Linguagens mais utilizadas em projetos de software livre
1. C – 47%
2. Java – 28%
3. JavaScript – 20%
4. Perl – 18%
5. PHP – 11%
6. Python – 10%
7. Ruby – 6%
Esses são dados retirados da pesquisa feita pela Black Duck Software que mostra uma estatística de quais as linguagens mais utilizadas em projetos de software livre e código aberto…
Destaque para a linguagem C que com 47% lidera com folga o ranking.
Leia mais a respeito em:
Achei interessante a posição do JavaScript…
Abração… =]
HTML para iniciantes
Olá pessoal, todos sabemos que o HTML é uma linguagem básica para o desenvolvimento WEB. Por isso, dada sua significativa importância, nos próximos dias estarão disponíveis aqui no blog posts, em forma de mini-curso para iniciantes, com o que precisamos saber sobre o HTML para solidificarmos a base do conhecimento para um futuro aprendizado de tableless, css, web standards , entre outras ferramentas amplamente usadas para desenvolvermos de maneira correta para web.
O HTML é responsável por: exibir a informação nos browsers, servir ferramentas de busca como o google e outros tipos de aplicações, por exemplo. Pode ser considerado, portanto, a camada mais importante no desenvolvimento de uma página.
Assim sendo, irei proceder da maneira mais adequada no aprendizado básico dessa linguagem. O que pode ser entendido por: código mais semântico e enxuto possível e a não utilização de tabelas no desenvolvimento de qualquer layout.
Espero que gostem e participem… Até o nosso primeiro post! Abraço… =]
Curso de Ruby Grátis!
Olá pessoal, acabei de ler uma notícia que resolvi dividir com vocês. O Site RubyLearning.org está oferecendo mais um curso on-line de Ruby grátis.
Mais de cinco mil pessoas já foram formadas. Ótima oportunidade para quem, assim como eu, deseja aprender uma nova e ascendente linguagem de programação.
Ruby Learning
As matrículas já podem ser efetuadas. Clique aqui para se cadastrar. O download do material já está disponível.
Você também pode ter a oprtunidade de se matricular em outros cursos como: Introduction to Merb, Ruby with Shoes Programming, FXRuby, ActiveRecord and MySQL e JRuby pagando uma taxa de apenas 10 dólares.
Primeiro Post… Boas Vindas!
Olá pessoal, estou parado em frente ao computador tentando bolar uma maneira legal de dar boas vindas. Primeiramente pra vocês, a galera que vai ler, comentar, rir, aprender ou, quem sabe até ficar puto (o que é direito de todos), com esse blog e também para mim que estou entrando nesse mundo agora como um contribuidor e não apenas consumidor, nesse minuto hehehe… Pensei algum tempo sobre como fazer isso da melhor maneira possível, até que saiu esse post, um pouco desorganizado mas que diz o que eu quero…
Tentarei manter o blog sempre atualizado. Os assuntos sobre os quais vamos falar e discutir aqui serão bem variados. Na verdade nem decidi um assunto exato … \o/… mas entre eles sempre aparecerão posts sobre: notícias de tecnologia, WEB, desenvolvimento, design, humor, música e muitos outros… Espero que vocês gostem da forma de como eles serão abordados e que também participem para que possamos interagir e estarmos sempre aprendendo uns com os outros…
Meu nome é Nino Giovanny, sou aluno de graduação da Universidade Estadual do Ceará… Faço parte da Acens – Mentes em Desenvolvimento (Empresa Júnior do nosso Curso… E a google que se cuide… \o/)… Tenho uma namorada linda e que amo muito, Ana Márcia… Adoro o que faço e espero que possamos contribuir e crescer juntos nessa empreitada… Valeu… Abração!
Ah… e sejamos todos Bem-Vindos… =D
1 comentário