Não pense que ser um auto-ditada na web é grande coisa, pois todos bons desenvolvedores são auto-ditadas, alias, este é um dos requisitos para se trabalhar na área, juntamente com a proatividade.

Vamos lá então.
Iremos trabalhar com php, devido a seu grande expansão no mercado e baixo custo.
O php nos permitirá trabalhar com banco de dados(mysql) e assim, concluir aplicações de verdade, com estrutura mais complexa.

Segue alguns links interessantes para se estudar.

• http://www.guanabara.info/2007/09/curso-de-php-aula-01/
• http://imasters.uol.com.br/secao/php/
• http://www.oficinadanet.com.br/area/2/php/1/data
• Googlando

Partindo do princípio que você tem boas noções de javascript, recomendo um framework que vai mexer um pouco com a sua cabeça, se chama Jquery. Você tem duas formas de aprender:

1. Consulte a documentação do Framework e aprenda por lá.
2. Compre o livro do Maujor.

Se você julga Javascript importante(dã), estude Jquery. Não preciso falar mais nada.
Quando estiver estudando, volte aqui no blog e me diga o que está achando e me agradeça.

Bom estudo.

Atualização 06-11-09
Você também pode aprender por aqui, tem diversas dicas: http://www.renanlima.com/blog/category/jquery/

• Download da apostila de Java Script

Após ler esta grande apostila você estará apto a passar para a próxima aula em que vamos aprender linguagem dinâmica(php), banco de dados e SQL.
Acredito que você levará um pouco de tempo para terminar esta apostila, mas sempre que tiver dúvidas, entre aqui no blog e comente, estarei pronto para lhe ajudar.

Bom estudo e até breve.

• Apostila 01
• Apostila 02

Não deixe de estudar as duas apostilas.

Segue alguns bons sites caso você queira se aprofundar no assunto:

• http://www.tableless.com.br
• http://maujor.com
• http://www.oficinadanet.com.br/area/4/css

Recomendações: jQuery – Conheça o poder

Para isso, selecionei duas ótimas apostilas que garantirão 100% de entendimento.

1. HTML Curso da RNP
2. HTML completo

Não deixe de ler as duas apostilas.

Qualquer dúvida, poste aqui que resolveremos juntos.

Iremos pegar o layout simples feito na aula anterior e trabalharemos para colocar em tableless. Gravei tudo trabalhando bem devagar, para que todos entendam.

Nesta aula finalizamos somente a estrutura do site, no próximo vídeo iremos criar todas as páginas em PHP. Deixaremos tudo funcionando adequadamente.

• Duração: 25 minutos
• Para download, click aqui com o botão direito do mouse e depois em salvar destino como.

  Link do vídeo: http://www.renanlima.com/videos/projeto01-02-passando_arte_para_tableless/

OBS: Estou tentando diminuir o rate do Camtasia, então desculpe se as piscadelas do vídeo estiverem incomodando.

Agora iremos desenvolver um projeto inteiro, desde o desenvolvimento do layout até o administrador de conteúdo dele. Sim! Você aprenderá a fazer um administrador de conteúdo.

Nesta vídeo-aula estaremos desenhando um layout bem simples para uma empresa, contendo apenas algumas páginas. Observe a técnica que usei para organizar o layout, és muito útil.

Infelizmente não tive como fazer a vídeo-aula com áudio, mas por enquanto está tranqüilo de entender.

Novidades!

• Video-aulas na resolução 616×480
• Vídeos disponíveis para download

Obs: Estou meio enferrujado nas vídeo-aulas, prometo aperfeiçoá-las no decorrer das gravações.

Qualquer dúvida poste no blog.
Perguntem, perguntem, perguntem, perguntem!

Curso de web 12 – Projeto I: Desenhando um layout

• Duração: 20 minutos
• Para download, click aqui com o botão direito do mouse e depois em salvar destino como.

Link do vídeo: www.renanlima.com/videos/projeto01-desenhando_um_layout

Quando se inicia um projeto, deve haver planejamento. Não só em um projeto web, mas em todos os projetos. Geralmente quando se inicia um projeto, você deve conhecer todo seu ecossistema, ou seja, conhecer seus concorrentes e ver a viabilidade de sucesso.

Falando tecnicamente, quando se inicia um projeto, primeiramente você deve desenhar o projeto em si. Use qualquer editor de imagem (photoshop, fireworks). Ah! Corel para desenhar sites não!! Tem gente que tem mania de usar Corel para web. Cruzes!

Então como estava falando, você desenha todo o site no editor de imagem. Não só a primeira página, mas todas as páginas, todas mesmo. Isso ajuda na hora de programar, acredite.

Depois de ter o site todo desenhado iremos passar para a estrutura HTML, tem gente que gosta de chamar isso de ‘fatiar’. O fireworks é ótimo nisso, com sua simplicidade ele torna o processo bem eficaz e rápido.

Feito isso, passando o site para a estrutura HTML, com tableless nos conformes e arquivos organizados em pastas, podemos pensar em criar a estrutura de banco de dados.

Desenhamos toda a estrutura do banco, pode ser em um papel mesmo, desenhar estrutura no banco no photoshop é desconfortável. O desenho do banco fica mais ou menos assim: ver imagem.

Feito isso, comparamos com os desenhos layout do site, verificamos se falta algo e se a estrutura do banco de dados está perfeita. Estando certo disso, pode começar a criar as tabelas do banco.

Quanto ao UML:
UML permite que desenvolvedores visualizem os produtos de seu trabalho em diagramas padronizados. Junto com uma notação gráfica. (Wikipédia)

Agora que colocamos o projeto em pé, devemos colocar essa belezinha para funcionar. Manda ver nos códigos!

Muitas pessoas, principalmente quem está começando a estudar neste curso de web, não utiliza um padrão na estrutura de seu trabalho e isso como foi dito, dificulta muito a criação e a modificação no projeto.

Para começar, tenhamos em mente que o objetivo principal da organização de dados é separar os tipos de arquivos. Falando tecnicamente, nosso projeto deverá ter uma pasta para o css, outra para o javascript, uma para as classes php e outras ainda para as imagens. Utilizamos este tipo de organização para qualquer tipo de arquivo.

Quando você usa um framework, provavelmente segue um padrão. Falando dos frameworks mais conhecidos, todos utilizam o padrão MVC, mas isso falaremos em outro post referente ao Curso de Web.

Vejamos como ficará nossa estrutura na prática.

Iremos precisar obviamente de uma pasta para guardar as imagens do projeto, portanto vamos criar agora uma pasta para a imagem que irá se chamar ‘img’. Simples não?

… [Diretório]
img/
index.php

Pasta IMG
Nesta pasta poderemos criar subpastas como por exemplo: usuários, layout, noticias, paginas, banners e etc.

Vou descrever como seria cada pasta citada acima.

• usuarios: Nesta pasta ficará armazenado as imagens dos usuários que fazem upload em seus perfis.
• layout: Nesta pasta terá somente imagens usadas no layout do site como: logo, menu, rodapé e etc.
• noticias: Aqui iremos colocar imagens de notícias.
• paginas: Esta página irá receber imagens específicas de cada pagina (home, contato, quem somos), na mesma poderá ter subpastas para sua melhor organização.
• banners: Aqui colocaremos os banners do site.

Agora precisamos guardar nossas folhas de estilo CSS. Crie uma pasta chamada ‘css’.
… [Diretório]
img/
css/
index.php

Na pasta CSS terá as nossas folhas de estilo, podemos agora ir para o próximo passo.

Vamos criar agora uma pasta para guardar nossos arquivos Java Script. Crie uma pasta chamada ‘js’.

… [Diretório]
img/
css/
js/
index.php

Está ficando bom! Agora para você que trabalha com php ou outra linguagem de servidor(asp, jsp), crie uma pasta chamada de ‘class’.

… [Diretório]
img/
css/
js/
class/
index.php

Na pasta ‘class’ iremos colocar somente classes dinâmicas que nosso site utiliza.

Para quem trabalha com linguagem dinâmica(php, asp, jsp), crie uma pasta chamada ‘view’.

… [Diretório]
img/
css/
js/
class/
view/
index.php

Na pasta view iremos colocar as paginas interna do site, ou seja, a index que incluirá(include) as páginas pertencentes a view. A pasta view provavelmente terá subpastas.

Se você utilizar outros arquivos como videos, documentos, musicas. Basta criar as pastas com o nome correspondente.

Simples não é? Depois de um tempo isso se tornará um habito, muito produtivo por sinal.

OBS: Para quem não trabalha com páginas dinâmica, usa-se as seguintes pastas:

… [Diretório]
img/
css/
js/
index.php

Chegamos ao fim de mais uma aula do Curso de Web.

Curso de web 009: CSS – Desenvolvendo um menu simples
Duração: 14:30
Tamanho: 24 mb
Extensão: wmv
Audio: Sim
Baixar agora

DIVs são elementos que eu gosto de chamar neutros ou conteiner, podemos modificar ele todo e usando para posicionar elementos em nossa pagina. Usamos as DIVs principalmente para substituir as tabelas, e além das divs serem mais leves, elas possibilitam maior controla da sua pagina e uma organização infinitamente maior.

Bem, preparei um video bem rápido, ultimamente não estou tendo tempo.

A pedidos, colocarei as video aulas para downloads.

Curso de web 008: Css – Trabalhando com DIVs
Duração: 14 minutos
Tamanho: 20 mb
Extensão: wmv
Baixar agora

Qualquer dúvida ou sugestão, poste aqui.
Até a próxima!

O que você precisa saber agora são os recursos(ou parâmetros) do CSS, é sobre isso que vamos falar aqui.

Há uma organização que controla um padrão universal de códigos na web, se chama W3C. Nela, você pode encontrar tudo sobre as linguagens de programação que ela defende. Vou disponibilizar para vocês um documento com todos seus recursos do CSS.

Não basta somente recursos, mas sim técnicas e essas não têm neste documento, mas fique tranqüilo(a), vou separar umas técnicas interessante e colocar aqui no blog.

Fique agora com o link com a documentação do CSS, está em inglês, se você não for muito bom em inglês, mas tiver uma noção já dá pra entender, a linguagem é simples.

Link: http://www.w3.org/TR/REC-CSS2/

Caso tenha alguma dúvida, comente aqui.

Como esta video aula é bem extensa tive que dividi-la em duas partes.

Se quiser saber mais sobre CSS, veja esta pagina no wikipedia: http://pt.wikipedia.org/wiki/CSS

Parte 1
Duração: 8 minutos

Parte 2
Duração: 8 minutos

Ver aula 007

Lembre-se de que para aprender a programar você precisa praticar muito, até se sentir confortavel em fazer tal tarefa.

Assim que terminar de assistir este vídeo, pratique muito HTML e teste diversas formas.
Na programação você aprende muito com erros cometidos, então é melhor você errar no treinamento do que em um projeto, pois assim perderia tempo e talvez não terminasse o mesmo dentro de seu prazo.

Tente fazer uma tabela com 5 colunas e 3 linhas, depois misture com as tags aprendidas nas aulas anterior.

Ver aula 006

Vamos iniciar hoje nossa primeira Video Aula sobre HTML. Vamos usar diversas tags que aprendemos nas aulas anteriores e ver como se cria uma pagina em HTML.

Fiquem com o video

Veja a aula 005

Agora as videoaulas estão com Audio.

Veja abaixo a video-aula:

Abra seu editor preferido e escreva: WEB 2.0
É brincadeira. Alias, você sabe o que é web 2.0?

Se quiser saber mais a respeito: http://pt.wikipedia.org/wiki/Web_2.0

Voltemos a nossa aula. Vou falar agora de algumas tags importantes do html.

<br /> Quebra de linha

<p> </p> Parágrafo

<b> </b> Negrito

<strong> </strong> Negrito

<i> </i> Italico

<em> </em> Italico

<span> </span> É utilizada para a configuração de trechos de parágrafos, muito usado com o css quando você quer mudar as propriedades de um elemento neutro.

<div> </div> Bloco contêiner que vamos utilizar muito durante nosso trabalho. Sem o css, o uso da div é inútil.

<blockquote> </blockquote> É o responsável por dar um efeito de endentação, como se você teclasse o TAB no Word, mas este pega em todo o bloco de texto.

Essas tags são as mais usadas. No decorrer das aulas vamos ver mais tags.
Agora vou escrever um código que use todos essas tags.

Obs: Não vamos usar o Span nem a Div antes de vermos o Css. Por tanto, veremos estes bem em breve.

Coloque o código abaixo em seu editor de HTML e salve-o como html para ver o resultado.

<html>

<head>

<title>Testando Tags HTML</title>

</head>

<body>

Estamos aqui usando diversas tags, testamos agora o <b>negrito</b> e o <i>itálico</i>.<br />

<p> Vemos também a tag parágrafo, muito utilizada para organizar um texto. </p>

<blockquote>

O blockquote é muio interessante, perceba que ele dá um espaço parágrafo em todo o texto, não só na primeira linha como a tag parágrafo. Muito útil esta tag.

</blockquote>

</body>

</html>

Testou em seu navegador?

Você deve estar vendo algo semelhante a isto:

Faça seus testes e veja a melhor forma de usá-los. Qualquer dúvida é só postar aqui no blog.

veja a aula 004

Inicialmente vamos estudar html, nosso ponto de partida. Vamos estudá-lo já da forma correta, vamos ver alguns de seus aspectos principais, testar alguns códigos e compreender seus significados.

Como assim programar html da forma correta?

Pois bem, é muito fácil programar em html, você coloca qualquer tag(depois vamos ver isso bem de perto) e a pagina funciona.
Mas cada tag tem seu significado, por isso o conceito tão famoso chamado web-semântica, Semântica significa significado, com isso queremos dizer que cada tag tem um significado.

Essa tal semântica ajuda ao robô do google encontrar nosso site.

Está com mais dúvidas ainda?

Ok, relaxe e deixe a web fluir em você. Ops! Fluir com você. Ops! Fluir sem você. Ahh!

Deixa apenas a web fluir.

–

Como eu disse, vamos começar a programar. Abra seu dreamweaver, ou algum outro editor de html e digite:

<html>

<head>

<title> </title>

</head>

<body>

</body>

</html>

Nota: No caso do dreamweaver, ao criar uma pagina html, exclua todo o conteúdo da pagina e digite o código acima.

Observe que este conjunto de tags, este código digitado acima é a estrutura de uma página web, poderíamos ficar aqui por horas só falando sobre suas características, mas nesta aula vamos falar somente das características principais.

O que é uma tag?
Tag consiste em estrutura de linguagem de marcação, breve instruções que tem inicio e fim.

O que é linguagem de marcação?
Envolve a codificação simples de seqüências de dados em um arquivo de computador no formato texto-puro.
Simplificando, consiste em marcação de instruções pré-definidas que tem inicio e fim.

Caracteristicas
<html> = Esta tag é a principal, é dentro dela que entra todos os outros dados do html. Todos as outras tags html devem estar localizadas dentro da tag html.

Você colocar por exemplo a tag <br>(quebra de linha) antes da tag html, vai até funcionar, mas não é recomendável e como estamos aqui para aprender o html da forma correta, não iremos fazer desta forma.

<head> = Esta tag comporta diversas outras tags especiais, além de comportar tags que incluem códigos externos.

<title> = Esta tag é o título da página literalmente e o que você colocar dentro dela, aparecerá no topo do navegador.

<body> = Esta é o corpo da pagina, onde todo o conteúdo de uma página web deve ficar.

Agora experimente colocar o seguinte código em seu editor:

<html>

<head>

<title>Aprendendo HTML</title>

</head>

<body>

Olá mundo!

</body>

</html>

Salve-o com a extensão .htm e abra esta página.

Você verá escrito na página: Olá mundo!

Observe que no topo do navegador e não da página, está escrito Aprendendo HTML.

Simples não?

Vamos brincar um pouco com esse código, coloque a tag <b> em volta de onde está escrito Aprendendo HTML. Lembre-se de fechar esta tag.

Ficando dessa forma: <b> Aprendendo HTML </b>

Nota: Para abrir uma tag você usa <tag> e para fechar usamos uma barra na tag ficando dessa forma: </tag>
Toda tag que é aberta precisa ser fechada.

Salve o mesmo documento e abra-o no navegador. Repare que o texto que adicionamos anteriormente foi posto em negrito.

Como prometido na aula anterior, já começamos a programar uma página web, agora você já sabe como inicia a criação de um website. Ainda tem muita coisa pela frente, basta corrermos.

Na próxima aula vamos ver muitas outras tags.

Até lá

Veja a aula 003

Hoje está começando um curso onde vou mostrar a vocês como se tornar um desenvolvedor web.

O curso é gratuito, mas aceito doações.
Você pode deve comentar cada post (Aula), dando sugestões e até mesmo críticas.

Vou começar do zero, indo do básico para o avançado.

Pretendo posteriormente fazer VideoAulas para facilitar o entendimento.

Para tudo ficar mais claro, vamos começar do inicio. Sim! Do inicio.

Só para você ir se preparando, as coisas não entram na sua cabeça do nada, é preciso estudar, e se quiser ser muito bom tem que estudar muito.

Mas é fácil, desde que você se dedique e principalmente goste de web. Pra falar a verdade é indispensável que você ame web.

Você não a ama?

Tudo bem, ela vai te seduzir logo.

Vamos começar a falar como gente grande, nada de bloco de notas. Neste post vamos falar dos softwares usado por profissionais e que são necessários para trabalhar com web.

Necessário na verdade não é, mas eles lhe dão uma assistência que facilita muito e te dá maior performance no desenvolvimento de um projeto.

Na web podemos trabalhar com programação, design, banco de dados, diagramação de informação, Modelação 3D, multimídia e outras coisas mais.

Vou falar sobre os melhores softwares para se utilizar na programação e no desenvolvimento visual para web.

Programação

Dreamweaver

Mundialmente usado este software da Adobe, te possibilita trabalhar com diversas linguagens de programação, te dá auxílio na produção de um projeto e lhe fornece ferramentas úteis para o desenvolvimento.

Zend Development Environment

Muito conhecido por profissionais de Internet. Usado por programadores avançados e permite uma ótima produtividade para programadores em PHP.

Design

Photoshop

O melhor editor de imagens do mundo, da Adobe, usado por profissionais de altíssima qualidade e por crianças de 10 anos para fazer montagens simples – É verdade!

Fireworks

Um software simples, também da Adobe, que supri a grande maioria das necessidades quando se está desenvolvendo para web.
Em meu trabalho, eu uso o Fireworks e quando preciso fazer algo mais complexo uso o Photoshop.

Todos os softwares acima são pagos, mas pode os encontrar no www.superdownloads.com.br em versão Trial, onde você poderá usar o software gratuitamente por um mês.

Na próxima aula já vamos começar programando bem leve com XHTML, vamos estudar Semântica, conhecer o CSS e bater um papo com o Javascript.

Saindo na frente!!
Para você que está com sede de aprender e quer se adiantar, leia os textos dos links abaixo. Siga esta ordem.

• HTML
  
• XML
• XHTML

Veja a aula 02