Hola que tal, primer foro. Consulta con html5.

juanmatias · 15 May 2012, 04:38 · Solicitar retirada

Nnumero 1:

Que tal, mi nombre es Matías, y básicamente lo que sobre si diseño de páginas es a traves de tutoriales nunca hice curso de nada.

Les voy a presentar mi código html, y css.

[ CÓDIGO HTML ]

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ACCESO-DIRECTO</title>
<link href="css/style1.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/menu.css3prj_files/css3menu1/menustyle.css" rel="stylesheet" type="text/css" media="screen">
</head>

<body>

<div id=contenedor>

<header>

</header>

<nav>
</nav>
<article>
<h1>NOTICIAS</h1>
<section>
<img src="imgs/index/0001img.png" width="280" height="280" class="imgleft">
<h3>Título de Noticia 1</h3>
<p>D<a href="#"></a>esarrollo de noticias 1. Un mini desarrollo de noticias, con un link que diga, <a href="$">ver noticia 1</a></p>
</section>

<section>
<img src="imgs/index/0001img.png" name="Matias" width="280" height="280" class="imgleft" id="Matias">
<h3>Título de Noticia 2</h3>
</section>

<section>
<img src="imgs/index/0001img.png" width="280" height="280" class="imgleft">
<h3>Título de Noticia 3</h3>
</section>
</article>

<article>
<h1> MULTIMEDIA</h1>
<section>
<img src="imgs/index/0001img.png" width="280" height="280" class="imgleft">
<h3>Título de Videos 1</h3>
</section>
<section>
<img src="imgs/index/0001img.png" width="280" height="280" class="imgleft">
<h3>Título de Fotos 2</h3>
</section>
<section>
<img src="imgs/index/0001img.png" width="280" height="280" class="imgleft">
<h3>Título de Música 3</h3>
</section>

</article>
<article>
<h1> PROGRAMAS</h1></article>
<div id="fotos"></div>
<div id="copyright"></div>
</div>
</body>
</html>

[/CÓDIGO HTML]

[CÓDIGO CSS]

@charset "utf-8";
/* CSS Document */
body{
background-image: url(../imgs/index/05.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
margin: 0px;
height: 100%;
width: 100%;

}
#contenedor{
height: 890px;
width: 1005px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 1px solid #333333;

}

header{
width: 1005px;
height: 150px;
float: left;
background-image: url(../imgs/index/logo.png);
background-repeat: no-repeat;

}
nav{
width: 1005px;
height: 40px;
display: block;
float: left;
background-image: url(../imgs/index/nav.png);
background-repeat: no-repeat;
}

article{
width: 313px;
height: 415px;
margin-bottom: 0px;
margin-top: 15px;
margin-left: 15px;
background-repeat: no-repeat;
background-image: url(../imgs/index/article2.png);
margin-right: 0px;
border: 1px solid #333;
float: left;
}
section{
height: 99px;
width: 313px;
margin-top: 16px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 5px;
float: left;

}
#fotos{
float: left;
height: 200px;
width: 1005px;
margin-top: 15px;
background-color: #F93;
margin-right: 0px;
margin-left: 0px;

}

#copyright{
float: left;
height: 40px;
width: 1005px;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-image: url(../imgs/index/copyright.png);

}
.imgleft{
float: left;
height: 90px;
width: 90px;
margin-top: 4px;
margin-bottom: 4px;
margin-right: 5px;
margin-left: 4px;

}

h1 {
font-family: "OCR A Extended";
color: #333333;
font-weight: bolder;
text-align: center;
font-style: normal;
font-variant: normal;
height: auto;
text-transform: capitalize;
margin-top: 0px;
background-color: #FFF;
margin-bottom: 0px;
clear: left;

}
h3{
font-family: "Britannic Bold";
color: #FFFF00;
float: left;
margin-left: 0px;
height: auto;
width: 210px;
margin-bottom: 0px;
margin-top: 4px;
font-weight: bolder;

}

p{
font-family: Tahoma;
font-size: 12px;
font-weight: bolder;
color: #FFF;
margin-top: 0px;
float: left;
height: auto;
width: 204px;
margin-right: 4px;
margin-bottom: 0px;
margin-left: 0px;
clear: right;
text-align: justify;
line-height: normal;

}

a{
font-family: Tahoma;
color: #0C9;
text-decoration: none;

}
a:hover{
font-weight: bolder;
color: #FFF;
text-decoration: underline;

}

[/ CÓDIGO CSS]

======================================================================================================================

El problema que tengo usando dreamweaver 5.5, es que lo que visualizo en el explorardor ya sea Internet Explorer 9, Firefox, o Google Chrome. Cuando privisualizo todo no se muestra como en dreamweaver (que es como quiero que se vea). Y no se porque. Alguien me puede decir porqué gracias.

skaparate · 15 May 2012, 21:37 · Solicitar retirada

Hola:

Como he dicho en muchas ocasiones: no se guíen por lo que les muestra Dreamweaver. La vista previa de los programas WYSIWYG generalmente (aunque me atrevería a decir que nunca) es como te la muestra porque interpretan las dimensiones y etiquetas de manera diferente a los navegadores; se podría decir que no siguen los estándares establecidos.

Siempre haz la vista previa en los navegadores y nunca con la vista previa. Hazte esta pregunta: ¿El usuario verá el sitio con la vista previa de dreamweaver o con un navegador?

Saludos.

jesus-fh · 17 May 2012, 05:24 · Solicitar retirada

si en verdad quieres aprender no te bases en un dreamweber, basate en los bloc de notas y haslo todo a travez del codigo, yo todavia no se mucho, pero de ahi he aprendido un poco, y el curso de CCTW me ayudo mucho a iniciar

johnpeterjp · 17 May 2012, 06:00 · Solicitar retirada

skaparate escribió:Hola:

Como he dicho en muchas ocasiones: no se guíen por lo que les muestra Dreamweaver. La vista previa de los programas WYSIWYG generalmente (aunque me atrevería a decir que nunca) es como te la muestra porque interpretan las dimensiones y etiquetas de manera diferente a los navegadores; se podría decir que no siguen los estándares establecidos.

Siempre haz la vista previa en los navegadores y nunca con la vista previa. Hazte esta pregunta: ¿El usuario verá el sitio con la vista previa de dreamweaver o con un navegador?

Saludos.

Sin polémicas... Solo aclarar que la vista previa de Dreamweaver no se basa en un navegador propio del software, sino que es, con un navegador establecido por el usuario. Puede ser Firefox, IExplorer o el que gustes y tengas instalado en tu equipo. Eso te asegura que lo que veas es lo que verás cuando subas tu web a la red.

Por otro lado DW no es un simple editor WYSIWYG es una aplicación tipo Suite que al contrario de lo señalado, en sus últimas versiones si trabaja sujeta a stándares W3 (World Wide Web Consortium). Las versiones originales de la aplicación se utilizaban como simples editores WYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías web como CSS, JavaScript, PHP y algunos frameworks del lado servidor.

Saludos.

skaparate · 17 May 2012, 08:12 · Solicitar retirada

Sin polémicas... Solo aclarar que la vista previa de Dreamweaver no se basa en un navegador propio del software, sino que es, con un navegador establecido por el usuario. Puede ser Firefox, IExplorer o el que gustes y tengas instalado en tu equipo. Eso te asegura que lo que veas es lo que verás cuando subas tu web a la red.

Por otro lado DW no es un simple editor WYSIWYG es una aplicación tipo Suite que al contrario de lo señalado, en sus últimas versiones si trabaja sujeta a stándares W3 (World Wide Web Consortium). Las versiones originales de la aplicación se utilizaban como simples editores WYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías web como CSS, JavaScript, PHP y algunos frameworks del lado servidor.

Saludos.

Claro, solo que yo asumo que están usando las últimas versiones, en las que hay una "vista de diseño" la que muestra el diseño en base a una especie de navegador integrado, lo cual se consideraría un editor WYSIWYG (que a todo esto significa What You See Is What You Get - Lo que ves es lo que obtienes, a pesar de que no es así en casi ningún caso XD).

Aunque yo sí diría que es un simple editor WYSIWYG porque es muy caro (una licencia de Dreamweaver cuesta mucho dinero) y es lo único que ofrece distinto a otros IDE como Netbeans (a través de plugins se puede tener una vista previa sólo en Windows) o Eclipse (que son gratuitos). Lo bueno podría ser el soporte que ofrecen, pero aún así no vale la pena. Photoshop y Flash si podrían ser buenas compras porque no he encontrado similares (en cuanto a calidad).

En fin, es cuestión de gustos (y de presupuestos XD).

Saludos :D.

Rucedry · 19 May 2012, 14:02 · Solicitar retirada

Apoyando jesus-fh voto por un buen editor de texto, en lo personal uso EditPad lite 7. Prefiero tener el control total del codigo de mi pagina, saber exactamente como esta formada mi web y no dejarselo a un programa que segun tengo entendido (no me crean por que nunca los he usado) generan codigo basura, es decir lineas de codigo de mas que puede ser reducido si lo hacemos manual.

paxarin · 22 May 2012, 18:38 · Solicitar retirada

hay que tener cuidado con dreamweaver, yo lo uso mucho.
Pero nunca me fio de como se ve en el o de sus ayudas que luego te llevas el chasco,jjj
tambien hay que tener cuidado ya que muchas cosas de css3 y html5 no se ven en IE, incluso pueden cambiar colores por ejemplo de un navegador a otro.