O que é preciso saber de XHTML e CSS?

[IvanNildo 0]

Fala galera tudo bem? Comecei fazer um curso no senac sobre web design... vão ser 4 módulos: XHTML/CSS; Fireworks; Dreamweaver e Flash (nessa ordem).

 

Comecei a estudar por fora também porque acho mais prático/rápido e que eu aprendo melhor! Mas eu estou com algumas dúvidas, até agora o que eu estudei de XHTML e CSS foi o material do curso, e acho que deva ser meio "básico". Por isso comecei a buscar material por fora de CSS e penso em buscar material de XHTML também. Fora isso estou buscando material de lógica de programação (me recomendaram antes de estudar PHP ou Javascript) e no mês 8 vou começar um curso no Senac também de banco de dados (PHP e Mysql). Esse segundo semestre de 2010 pretendo fazer um tecnologo na Metrocamp de "Sistemas para Internet".

 

Minha idéia é ficar bom em XHTML e CSS, depois partir pra lógica de programação seguindo para JavaScript (por conta) e PHP (curso). Minha idéia está correta? Minha dúvida então seria: o que seria um padrão "bom" de conhecimento para seguir com o barco sem afundar? hehe...

 

Obrigado pela ajuda dos amigos! Comecei tarde nesse "mundo" (aos 20 anos) mas to me divertindo muito estudando isso pois sempre foi uma área do meu interesse e imagino que a variedade de possibilidade de trabalho nessa área é o que eu busco. Grato!

 

Obs: espero ter criado o tópico no local certo... se estiver no lugar errado peço a algum moderador para mover!

[marcus_du 1]

Então...

 

Algumas dicas que acho que são bem válidas;

 

- Não se prenda a estes softwares editores html WYSIWYG, tenha conhecimento do código em si, você pode passar vergonha caso tenha que alterar alguma informação na frente de um cliente em potêncial.

- Vá com calma, você não se tornará um ótimo desenvolvedor web da noite para o dia, vá com calma.

- Pense em acessibilidade, padrões a serem seguidos, W3C é a referência em se tratando de HTML e CSS.

- Aprenda com o futuro, o HTML 5 está chegando, mais perfeito e facinante do que nunca, dê uma pesquisada nisso.

- Flash é bom, mas como disse acima, estamos nos aproximando do HTML 5, este será bem mais viável, não estou dizendo que esqueça o flash, apenas o utilize como alternativa, não como foco principal.

 

No meu caso, sou programador PHP a 6 anos, e digo sim, a lógica é o caminho de tudo para dar certo.

 

E no mais, é, PRATICANDO que se aprende.

 

Qualquer coisa, estamos a disposição!

[Aprendiz CSS 3]

acrescentando...

 

Sempre que fizer algo, teste nos navegadores e entenda o porque renderizam diferente, entenda conceitos de box model e saiba porque falar mal de frames, frameset, iframes, etc..

[Thiago Retondar 18]

Ivan,

 

bem vindo ao fórum.

 

Minha sincera opinião? Eu largaria o curso atual do Senac (a não ser que você esteja em busca de um certificado) e estudaria um ou dois meses com força HTML e CSS. Acho que mais ou menos depois de um mês você já vai estar por dentro de como funciona a Web e aí sim partiria para um curso de PHP e MySQL.

 

PHP é uma excelente linguagem para aprender a programar, pegar a lógica.

 

Bem, sou um pouco suspeito para falar desses cursos, já que o único que eu fiz foi um "mixuruca" onde eu sabia mais que o professor. <_<

 

Obrigado pela ajuda dos amigos! Comecei tarde nesse "mundo" (aos 20 anos)

Não começou tarde não. Te garanto que se você se aplicar, vai ver que não é tão complicado.

 

E como disse o Marcus: E no mais, é, PRATICANDO que se aprende!

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Aprendiz CSS 3]

Senac é um bom curso, vale a pena fazer sim...

 

apenas estude por fora para tirar uma maior proveito do curso.

[IvanNildo 0]

Opa! Obrigado pela resposta galera!

 

Thiago, eu to fazendo o que o Paulo falou... fazendo o curso e estudando por fora, aproveitando pra tirar as dúvidas com o professor porque ele parece entender bem do assunto. Além do mais até o fim do ano já vou ter 2 diplomas do senac e mais uns 2/3 de cursos rápidos de 1 semana ou menos de e-commerce. Acho imortante isso, até melhor do que esperar 2 anos e meio pra pegar o do curso da Metrocamp.

 

Valeu pela ajuda de todos! To conseguindo já fazer alguns sites em xhtml e css... nada de especial e ainda buscando exemplos na net mas alguma coisa já tá saindo... alguns testes não tão dando muito certo e outros tão começando a sair já!

 

Em que navegador eu devia testar? Atualmente texto no IE/firefox... mais algum que eu deveria levar em conta? Ainda só sei fazer o frame e iframe básico mesmo... e não sei porque alguém falaria bem ou mal deles kkk vo pesquisar sobre isso também.

[angelorubin 142]

Boa tarde,

 

Pode testar em vários browsers tais como:

 

Internet Explorer ( o problemático - pelo menos a versão 6 );

Mozilla Firefox;

Chrome;

Safari;

Opera;

 

Creio que esses são os mais utilizados.

 

OBS: Para testar as versões do Internet Explorer utilize o IEtester onde podera testar desde a versão 5 até a 8 em uma só instalação.

 

Aqui tem um lista das estatisticas de uso dos navegadores.

 

Estatistica de Uso

 

Espero que ajude.

[Paulo de Tarso F. M. 24]

Olá meu caro IvanNildo. Deixde-me expressar minha opinião também... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

1) Não desista do curso do Senac. O que você está fazendo é muito bom para seu aprendizado, que é ir aprendendo "por fora". Eu só acho que você não devia deixar de lado o material do curso totalmente, porque, estudando por fora, muito provavelmente você terá acesso a conteúdos que muitas vezes nem seriam abordados no curso, mas que poderiam ser, de certa forma, "dependentes" de um "pré-requisito", um conhecimento prévio de alguma outra coisa e tal.

 

Quando eu fiz um curso na Microcamp em 2004 de Web Design (que durou 2 anos), eu não ía estudando por fora, eu fazia assim, acessava os sites, olhava o código fonte de algumas páginas, via tags ou recursos que ainda não conhecia e levava para a aula para discutir com o professor. Depois que eu terminei o curso, fiz um específico na Impacta aqui em São Paulo de 2 semanas sobre XHTML e Tableless. A partir daí eu já estava estudando bastante "por fora", mas eu já tinha uma boa base adquirida no curso da Microcamp.

 

Dessa forma, não ignore o curso do Senac. Mesmo que lá na frente, quando você já estiver familiarizado com tudo isso você vai dizer "por que que eu fiz esse curso?", esses primeiros passos são importantes que sejam dados com base em uma metodologia de ensino, e o Senac é uma instituição que tem um certo "nome no mercado" justamente pela qualidade dos cursos.

 

 

2) Quanto à sequência de estudos, como diria Jack, o Estripador, "vamos por partes...". Calma, meu caro. Não "atropele" as coisas movidos pela vontade de desenvolver algo para ganhar seus primeiros reais com isso. Foque no estudo nesse momento. A hora de errar é agora, enquanto você ainda é um "simples estudante". Tem muita coisa a se aprender, então, um passo de cada vez.

 

Outra dica, em relação aos cursos que você quer fazer: faça-os quando você estiver pronto. Não tenha "vergonha" de admitir que ainda não está dominando totalmente uma linguagem especificamente. É importante conhecer bem a linguagem (X)HTML e CSS. Quando você estiver se aventurando pela linguagem JavaScript, por exemplo, verá que ela irá interferir justamente no HTML e no CSS, e se você não conhecer bem essas duas linguagens, como disse, concorda então que você conhecerá apenas um pouco de cada uma delas? Oras, para tirar proveito de todos os recursos temos que conhecer bem como tudo funciona, não acha? E se você aprender bem a lógica de programação e dominar os principais comandos de JavaScript, é bem provável que terá facilidade iniciar o PHP. Ou seja, minha dica é relembrada: uma parte por vez, um passo de cada vez, calma garoto...

 

 

3) Em relação ao curso de Sistemas para Internet na Metrocamp: não faça neste ano. Me formei nesse mesmo curso no final do ano passado, só que ministrado pela Veris (ex-IBTA) aqui em São Paulo. O Grupo Veris, que agora se chama Grupo Ibmec, comprou a Metrocamp, além de outras instituições de ensino em outras cidades. E é assim, o conteúdo do curso que quer fazer não é focado em desenvolvimento. Gostei demais do curso, recomendo, mas é importante saber que você terá contato com áreas mais focadas no negócio do que no produto, ou seja, você aprenderá desde como se planeja um projeto web, passando por todas as etapas do desenvolvimento, e também todas as atividades paralelas e relacionadas. É uma visão geral, não focam apenas uma área específica, e esse é o objetivo do curso.

 

Então, meu último conselho é este: aprenda primeiro mais sobre toda essa parte técnica antes de fazer esse curso, porque o tempo do curso é curto (2 anos e meio) e se você tiver que aprender essa parte técnica durante o curso, você ficará sobrecarregado por causa dos trabalhos, das outras matérias (mais chatas rsrsrs), e etc. Se você já souber boa parte do conteúdo técnico, poderá se dedicar mais a essas outras atividades, manja?

 

 

Bom, é isso. Espero que lhe ajude em alguma coisa, e, lógico, essa é a minha opinião apenas, não é a melhor, nem a pior, nem a mais adequada, tampouco a menos recomendada. Cada um pensa de uma forma diferente, cada um chegou nesse ramo de uma maneira, então foi na minha que me baseei para escrever este post.

 

E boa sorte!

 

 

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[IvanNildo 0]

Opa muito obrigado pela resposta moçada! To começando a me preparar pra fazer meu primeiro site em XHTML e CSS... vo fazer pra empresa do meu pai que tem o site todo feito no frontpage usando tabela hehe...

 

Ai eu comecei a pesquisar códigos fontes dos sites que eu visito (sites grandes) e me surgiu uma dúvida... que vantagem maria leva em faze tudo nos padrões da W3C Webstandards? Pq eu vejo todo mundo falando que vale a pena pela velocidade da página... melhor indexação no google e tal... mas então por que sites grandes (como forums e portais) não tem o código escrito assim?

 

Valeu a ajuda!

[mauelement 0]

Paulo Tarso falou tudo. bem legal (=

 

Só queria da uma dica tbm... coma livros! rsss

 

E não tem uma referência melhor que o maujor.com pra te dá. Os livros dele são ótimos e vai acelerar muito seu aprendizado, por experiência própria. rsrs.

 

Sobre o uso das webstantadards, quais sites grande você tá falando?

 

Os benefícios você parece ja saber, otimização de códigos, tamanho de arquivos pra transferências que pra portais é uma grande mao na roda, seo, maior controle sobre apresentação em diferentes tipos de dispositivos, modelos personalizados para impressão, organização com a separação da estrutura do estilo e do comportamento, acessibilidade, manutenção rápida, apto a receber novas tecnologicas etc..

 

Fiquei curioso pra saber quais sites c ta falando. rsrs Esses ai além de atrasados, estão perdendo muita coisa! rs

 

um abraço

[IvanNildo 0]

2 exemplos:

 

http://www.hardmob.com.br/ <- css e java na própria página do site... esse forum eu considero "grande" e bem "movimentado" e é sobre computador a maior parte...

 

http://www.tibiabr.com/ <- não que eu ainda jogue... mas é um site "grande" tbm... e ele é todo feito em tabela e ainda por cima tem nos itens o css (as vezes até em xhtml) as modificações nos próprios itens...

 

Fiquei "invocado" de porque 2 sites assim são feitos todos "errados" hehe

 

Edit: só mais um... esse site é da FEF (Faculdade de Ed. Fìsica da UNICAMP) e vejam que frankstein que é o código:

 

http://www.fef.unicamp.br/

[Evandro Oliveira 331]

@IvanNildo, primeiro de tudo, você não começou tarde. Nunca é tarde pra aprender. Segundo, em frente com os cursos, mesmo que você corra o risco de acontecer como aconteceu com o Thiago, de saber mais que o professor, hoje ainda existe muita gente que dá mais valor pra um certificado do que pra conhecimento adquirido. Ainda no próprio fórum, temos o exemplo inverso, de um membro que se destacou no curso e ganhou a oportunidade de ir trabalhar no ramo. Boa sorte.

 

Creio que tudo do essencial já foi falado, coma livros, estude sem parar, pesquise, aprenda, erre bastante, a hora de errar é agora. Já em mãos, posso indicar o rico acervo que esta sessão do fórum pode lhe providenciar. Apesar de já ter coisa ultrapassada, também tem muita coisa que não "sai de moda".

 

Infelizmente, material de qualidade e em grande quantidade ainda é disponível apenas em inglês. É claro que existe muito material bom disponível em português, mas a grande variedade ainda fala a língua do Tio Sam. Então, inglês neles! Pode começar com um site muito simples e didático, que fornece uma área online para que você mesmo faça as modificações e entenda o que cada uma faz: http://www.w3schools.com

 

Se tiver alguns dólares disponíveis, pode optar por fazer o certificado oficial do site.

 

XHTML nada mais é que HTML incorporando regras xml: tags e atributos minúsculos, valores em aspas duplas, tags corretamente aninhadas, fechamento de tags curtas/vazias etc.

 

Então o foco aqui é HTML. O que você vai procurar estudar muito é o uso de semântica. Vai descobrir que existem elementos específicos para cada caso de uso específico e vai descobrir também que em alguns casos o uso varia conforme quem está fazendo a marcação. HTML remete diretamente à usabilidade e acessibilidade do seu site, não necessariamente na visualização do mesmo.

 

A maior "dor de cabeça", se assim posso chamar, das Webstandards está com CSS. Aqui sim você vai ter que quebrar um pouco a cabeça, pensar, testar, errar até mesmo quando já estiver num trabalho "oficial". Vai notar que com CSS também é possível obter resultados iguais de formas diferentes, e descobrir que aquele site que fica maravilhoso visualizado no Firefox pode se tornar um monstro quando aberto no Internet Explorer.

 

HTML5 e CSS3 vêm apenas para cravar o que todo mundo neste tópico já disse, você não pode parar de estudar. Nunca. Novas especificações, regras, dicas, tendências surgem a todo momento. Então não se atenha apenas ao que aprendeu no livro X ou Y porque foi escrito por um autor consagrado ou porque é tido como regra dentro do mundo Webstandard. Use como uma base sólida para aprendizado e comparação. Para ter um ponto de partida quando surgirem dúvidas ou novos desafios.

 

Quanto à dúvida sobre marcação semântica, lay-out com tabelas de portais grandes. É uma falha admitir uma marcação semântica com foco principal a SEO. Hoje indexadores são capazes de 'ler' perfeitamente o conteúdo e indexar a sua página, estejam os elementos dentro de tabelas, divs, ou parágrafos. O Google já indexa até áudio e flash. Como já disse cima, HTML semântico tem como principal foco, acessibilidade. Leitores de tela, impressoras modernas, smartphones, PDA's, etc. HTML semântico abre as portas do seu site para novas mídias de acesso. Um site como Tibia, por exemplo, que trata de um jogo, para desktops (e suporte a poucos celulares), não tem que se preocupar em ser acessível e portável. Tem que se preocupar em exibir um website que funcione, e sirva para seus usuários. Quanto à relevância do termo, a palavra "tibia" em qualquer buscador, aponta primeiro para o jogo, depois para o osso humano. É interessante julgar o custo-benefício de uma marcação semântica, códigos css/javascript externos e até onde vale a pena. Um site que troque constantemente de visual, deve se preocupar de forma que esta troca seja 'indolor' tendo que se preocupar com trocar algumas poucas regras de CSS e estar tudo pronto. Enquanto um outro site que não faça modificações constantes, deve se preocupar em outros focos. Às vezes, fazer uma remodelagem e remarcação de todo o um sistema e estrutura prontos, sai mais caro que pagar alguns dólares mensais a mais por consumo de banda que poderia ser economizado com CSS e Javascript externos.

[André Severino 3]

Bom, se fica de espelho eu começei a me interagir com a web com 20 anos também, hj tenho 21 anos.

 

Como o pessoal ae emcima já disse, não tem pq eu ficar repetindo as palavras :joia:

Caso você queria ler algo + complexo sobre o css + xhtml leia os artigos desse blog que me ajudou bastante

http://revolucao.etc.br/archives/validacao-e-semantica/ aqui no caso é um link sobre a semantica, tente começar depois q você ler um pouco sobre semantica, e coisa do tpw, pelo menos você começa do 'correto'.

[IvanNildo 0]

Opa! Valeu pelas respostas galera... vocês e todo o conteúdo desse site estão me ajudando muito! Hoje tenho cerca de 20 dias de estudo de xhtml e css... fiz esse site baseado no da empresa do meu pai www.bonfimturismo.com.br (podem ver o site... só não vale meter muito o pau kkk), ai como eu não upei ele em lugar nenhum, zipei a pasta (até agr só tem 2 páginas prontas... a inicial e a sobre nós) e upei pro 4shared... se vocês puderem baixar e me dizer o que acham ficaria muito grato! principalmente pela parte do xhtml e do css nem tanto pela aparência atual porque como disse basiei na que já tem pronta! http://www.4shared.com/file/dNaS-2NQ/Bonfim.html

 

Obs: vale a pena eu colocar esse site na parte do fórum de avaliação ou vocês acham que só aqui já é suficiente? Grato!

[Paulo de Tarso F. M. 24]

Bom, aqui será mais avaliado essa questão da marcação HTML mesmo, no fórum de Avaliação será mais focado toda a parte visual do site... Se seu objetivo é discutir o design do site também, poderá utilizar aquele espaço para isso, mas o faça apenas quando tiver alguma coisa on-line para o pessoal poder acessar e tals...

 

Pode utilizar algum host gratuito se desejar.

 

:joia:

[IvanNildo 0]

Opa! Vo espera ver se alguém comenta alguma coisa! hehe... valeu a ajuda irmãozinho... vo procura algum host gratuito (alguma indicação? kkk) se acharem que fica melhor pra avaliar do que fazer o download do arquivo... que vocês acham?

[João Prado 64]

Sim a avaliação é melhor quando o site esta online.

 

Se quiser uma avaliação de um site poste aqui, mas se quiser também pode ser avaliado apenas o layout do site, neste caso poste aqui

[IvanNildo 0]

Consegui por on-line :joia: :clap:

 

http://ivans.hdfree.com.br/

 

vamo ver o que a galera acha!

[Evandro Oliveira 331]

Bom, já que você está em busca de maneiras para melhorar o trabalho, vamos lá:

 

1. A declaração XML não apresenta um charset. Futuramente, isto pode ser um problema.

<?xml version="1.0" encoding="utf-8"?>

 

2. A declaração do DOCTYPE está incorreta:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

3. Documentos XML não permitem tags nem atributos escritos em caixa alta, e tags curtas devem ser fechadas com uma barra:

<meta name="" content="" />

4. Apesar de o logo da empresa estar muito próximo do menu, ele não faz parte do mesmo, deve ser colocado por fora.

 

5. Isso aqui não existe

<p>  ;</p>

procure dar espaçamentos com margin ou padding.

 

6. Você não precisa envolver cada sessão da página em um div em separado. Use o div apenas como um container ou seletor de vários elementos. Procure estudar sobre elementos de bloco e linha e verá que é perfeitamente possível fazer um posicionamento de um 'div' sem sentido com apenas o elemento real. Isto é semântica.

 

7. Mais um alerta à semântica. Em um trecho do site, você usa H1 dentro de uma lista. Então espera-se que os títulos de nível1 façam parte de listas, SEMPRE. O uso de um h1 fora da mesma lista posteriormente vai contra a semântica.

 

8. No rodapé, você define a classe a dois de três elementos. Dê preferência para definir a classe "noclass" para o um elemento, e estilizar os outros dois com base no seu container div#rodape. Você diminui a quantidade de marcação:

 

antes

<div id="rodape">
   <p>Linha 1.</p>
   <p class="estilo">Linha 2.</p>
   <p class="estilo">Linha 3.</p>
</div>

 

depois

<div id="rodape">
   <p class="semestilo">Linha 1.</p>
   <p>Linha 2.</p>
   <p>Linha 3.</p>
</div>

 

Por hora, é só.

[IvanNildo 0]

Opa! Muito obrigado irmão! Assim que chegar em casa vou tentar arrumar isso

 

E vamo que vamo... e vamo que vamo... e vamo que vamo que dá

 

descobri que eu me divirto mto escrevendo os códigos hauhauha a negada lá do curso vive falando que é chato e reclamando... mas eu até que gosto kkk