[HTML]  Diseño (compatible con HTML5 / CSS3) en desarrollo, una gran explicación
Hola, Yo desarrollo mis diseños con mis propias manos, y más o menos así esta quedando el próximo que ando haciendo: Como lo hago? Pues fácil, s...

Hola,

Yo desarrollo mis diseños con mis propias manos, y más o menos así esta quedando el próximo que ando haciendo:

[Imagen: estilo1-370ba63.png]

Como lo hago?

Pues fácil, solo es cuestión de usar lo mas básico del html, dejar de usar etiquetas de tablas, y para que sea html 5 poner hasta el logo metido en el css, dependiendo de la forma del css y si los códigos son avanzados pues podremos lograr que sea la versión 3. Por ejemplo, el diseño que tiene YesildaHosting, comenzó desde lo mas básico, a lo medio luego a lo avanzado, diseño terminado en 35/36 días. Usando bloc de notas para el desarrollo de códigos, y photoshop, claro tenemos que tener conocimientos también. Y todo es cuestión de leer un simple tutorial o hacer un curso en línea que demora 7 días o 14 días. Con eso usted puede ir desarrollando las ideas para formar lo que se hace llamar un diseño, que es algo más original y profesional que estar buscando diseños gratuitos.

Explicación de cada función de etiquetas usadas y el css



Cita:<!DOCTYPE html>


Es usado para identificar el formato del diseño, es obligatorio poner la identificación de su diseño al comienzo del mismo por que esto aparte de que identifica el HTML5, por ser avanzado robots como Google toman en cuenta esto (lo se por qué me he dado cuenta). Esta etiqueta es llamada normalmente <html> la etiqueta vieja y sola mas utilizada del mundo, usada en tutoriales para enseñanza, y aun por algunos sitios antiguos, pero no es correcto que al crear un diseño no terminemos de poner la identificación tal como la tecnología de los navegadores hoy lo piden, ponemos el !DOCTYPE tal como en lo citado.


Cita:<html lang="es">


Esta etiqueta no es muy usada, es opcional y no tiene mucha utilidad, pero es recomendable ponerla después de la antes mencionada para que las arañas (robots) como Google entre otros identifiquen mas rápido el idioma de algún sitio web, con esta etiqueta aparece el sitio web de primero en los buscadores en español luego son indexados de segundo en los que tienen otros idiomas. Hablando de primero y segundo no es que se posicionaran alcanzando a otros sitios, hablo de que al buscar tudominio.com por ejemplo aparecerá primeramente en buscadores de idioma español, primero indexa google luego los demás.


Cita:<head>


Con esta etiqueta iniciamos el encabezado, el encabezado de un sitio web para poner las demás etiquetas como titulo, identificación de los caracteres, las meta etiquetas, y muchas cosas mas, hasta un enlace al css o el mismo css en el encabezado de un sitio web.


Cita:<meta charset="windows-1252" />


Comenzamos por ir reconociendo los caracteres del sitio, y es que al hacer un diseño si queremos usar caracteres especiales, por ejemplo configuración con su carácter especial en la letra; O, tenemos que poner un formato iso o windows, y dependiendo del formato que conozca hay se puede publicar, para esto se habría que buscar una lista en internet de los listados de caracteres existentes, y solo recomiendo UTF-8 para ciertos sitios y el windows que es el que uso, si desean también lo pueden usar, aunque el mas recomendado puede ser el utf8.


Cita:<title>ForoDatos | Demo</title>


Etiquetas titles, son para poner el titulo de la pagina que estamos creando, al menos en el html que estamos trabajando, por que siempre vamos a variar donde dice Demo, por Contacto, Nosotros, Acerca, etcétera según sea el tipo de cada pagina html independiente que vayamos a crear ya que estamos trabajando con html puro, un simple bloc de notas y el pensamiento.


Cita:<style>


Con esta etiqueta iniciamos el estilo, mayormente se usa otro tipo de etiqueta para poner el estilo en una pagina aparte con formato .css, esto del estilo es lo que le da la forma a la pagina, sin esto tenemos una pagina sin forma, y todo descontrolado, por eso al ir desarrollando una pagina tenemos que ir desarrollando el estilo tambien, de cada cosa terminada, desarrollar lo que la estiliza.


Cita:body {
background-color:#019989;
width:800px;
margin-left:auto;
margin-right:auto;
font-family:Times Roman;
font-size:14px;
font-style:normal;
}


El body {} es lo principal, con esto es que empezaremos, para dar color a nuestro fondo con el background-color, el tamaño al diseño con el width, ubicando con los margin, dando formato a las letras con los font, tamaños con font y size, ajustar con font y style, finalmente cerrar con unos {}. Esto depende de lo que usted tenga de conocimiento, yo por lo menos estilizo algún diseño más o menos como esta en el ejemplo.


Cita:div.center {
text-align:center;
}


Esto es para darle forma a los div, como es html 5 posiblemente la vayas a usar para algún caso.


Cita:#fd1 {
background-color:#FF0;
height:80px;
text-align:center;
font-size:60px;
}
#fd2 {
background-color:#00BFFF;
color:#000;
text-align:center;
}
#fd2 a {
color:#000;
}
#fd3 {
background-color:#FF0;
color:#000;
text-align:center;
width:200px;
height:300px;
float:left;
}
#fd4 {
background-color:#FFF;
color:#000;
text-align:center;
height:300px;
}
#fd5 {
background-color:#00BFFF;
color:#000;
text-align:center;
}
#fd5 a {
color:#000;
}


Con estas etiquetas, es un ejemplo de la forma que le dan al html, sus funciones, colores, y posiciones, dependiendo del nombre que le pongas al class por ejemplo el mio tiene fd por que su significado es forodatos, pero para que estas funcionen tengo que poner un # y formar un #fd y dependiendo de lo que paga le voy poniendo #fd1, #fd2, con sus etiquetas de apertura y cierre {}, y por dentro el contenido a formar en el diseño.


Cita:a {
color:#FFF;
text-decoration:none;
}


Con esto le damos estilo a los enlaces del sitio web, que si se fijan siempre tienen un; a, apartado en cada inicio de enlaces. En este caso uso esto en el css así de esta forma para quitarle lo subrayado que acostumbradamente tienen por defecto, esto muchas veces hace que se vea feo el estilo. Con una transformación y decoración, poniendo un none logro hacer que el subrayado desaparezca.


Cita:a img {
border:0;
}


Y de esta forma lo hago con las imágenes, siempre tienen un borde como azul más o menos que les cubre, con esto tenemos una imagen limpia. Con el borde y el 0 quitamos el borde totalmente de una imagen, esto hace que el sitio web se vea mucho mejor.


Cita:a:hover,a:link,a:visited,a:active {
text-decoration:none;
}


Estos son para terminar de quitar los subrayados, de cuando uno para el mouse por encima de X cosa y demás.


Cita:</style>


Con esta etiqueta finalizamos el cierre del estilo, para que este comience a hacer su funcionamiento. Sin estas etiquetas no tenemos estilos, y ciertos códigos antes mencionados ningunos en absoluto funcionarían, ya que hace falta de ciertas etiquetas para identificar.


Cita:</head>


Lo mismo que mencione arriba, sin esta no identifica tampoco la cabeza del sitio web, sin esta etiqueta de head es peor aun por que ni titulo... Digo puede que funcione pero no es debido poner un encabezado sin estas etiquetas ya que fuera un pésimo error de no nos serviría de nada hacerlo.


Cita:<body>


Aquí saliendo del encabezado, iniciamos la etiqueta body con la que vamos a trabajar con el html del sitio web, contenido y forma de estructura. Sin esta etiqueta el sitio seria no solo un desastre, un desastroso ya que esta etiqueta cuando no tiene estilo por ti mismo el navegador lo pone.


Cita:<div id="fd1">
WWW.FORODATOS.COM
</div>


Jugando un poco con los div, etiquetas div son para iniciar una señal de que el estilo debe de hacer alguna función en esa área, no solo para eso, también para darle posición y ubicar, pero como estamos en html 5 siempre usaremos mas los div que otra cosa, menos códigos, menos trabajo, mas cómodo. En este caso si se fijan como lo antes visto esta el fd1, y cuando no es class mayormente usamos un id, y eso hace que el estilo ya escrito comience a funcionar.


Cita:<div id="fd2">
<a href="#">Nombre</a> - <a href="#">Nombre</a> - <a href="#">Nombre</a> - <a href="#">Nombre</a> - <a href="#">Nombre</a> - <a href="#">Nombre</a>
</div>


Aquí estoy jugando un poco con el menú, con etiquetas <a href="#" y sus cierres de la misma forma en que están hago los enlaces, se le quita el subrayado por la función que hace con el; a, aparte de que este; a, tiene de función el hacer enlaces. Donde están los # van los enlaces y donde dice Nombre pues ponemos el nombre de X enlace, en la forma de la que están en este ejemplo formamos el llamado menú del sitio web.


Cita:<div id="fd3">
<br>
Contenido.
<br>
</div>


Aquí estoy iniciando la etiqueta para dar contenido a mi sitio web, y incluyendo etiquetas como br para dar espacio y continuar escribiendo o poniendo cosas en el sitio, también existen los center pero ya esto mayormente se usan por css y demás funciones clásicas de diferentes formas.


Cita:<div id="fd4">
<br>
Contenido.
<br>
</div>


En esta parte, dependiendo de como están las etiquetas float en el CSS, hago que al lado del contenido se inicie una barra del sitio.


Cita:<div id="fd5">
&copy; 2012 <a href="http://forodatos.com">ForoDatos</a>
</div>


Aquí dependiendo de los float también voy haciendo el pie de la página para ir finalizando.


Cita:</body>
</html>


Finalmente cierro mi trabajo, arranco mi diseño y nos vamos Smile

Esta es una explicación breve para que tengan una idea más o menos de como hacer un diseño web, primero se hace el html, luego hacemos el css, pero dependiendo de lo que vayamos desarrollando con html vamos también haciendo parte por parte el css. Dependiendo también de lo que deseamos formar, el pensamiento es el que le va a dar forma y estilo al diseño, ya que como es un diseño propio lo que podamos estar desarrollando tendremos ideas, y mas ideas para ir dando forma, y poniendo las cosas a nuestro estilo, una vez acabado si hay de saber usar photoshop pues le puede dar mas estilo con imágenes desde photoshop, haciendo las imágenes, puliendo cada esquina, y adaptándolas con el css, el resultado final es que tenemos lo que queríamos.

Hablando un poco del javascript, son aquellos complementos u etiquetas en la cual implementamos una función movilizada en el sitio, y mas avanzada claro, podemos poner una galería de imágenes moviéndose, efectos, entre otras coas, para saber javascript primero tenemos que entender bien el html y el css. Ya teniendo los conocimientos básicos y sabiendo hacer un diseño algún día puedan desarrollar hasta su propio script.

Concluyendo con el diseño que acabo de hacer, o estoy haciendo aun formamos esto:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="windows-1252" />
<title>ForoDatos | Demo</title>
<style>
body {
background-color:#019989;
width:800px;
margin-left:auto;
margin-right:auto;
font-family:Times Roman;
font-size:14px;
font-style:normal;
}
div.center {
text-align:center;
}
#fd1 {
background-color:#FF0;
height:80px;
text-align:center;
font-size:60px;
}
#fd2 {
background-color:#00BFFF;
color:#000;
text-align:center;
}
#fd2 a {
color:#000;
}
#fd3 {
background-color:#FF0;
color:#000;
text-align:center;
width:200px;
height:300px;
float:left;
}
#fd4 {
background-color:#FFF;
color:#000;
text-align:center;
height:300px;
}
#fd5 {
background-color:#00BFFF;
color:#000;
text-align:center;
}
#fd5 a {
color:#000;
}
a {
color:#FFF;
text-decoration:none;
}
a img {
border:0;
}
a:hover,a:link,a:visited,a:active {
text-decoration:none;
}
</style>
</head>
<body>
<div id="fd1">
WWW.FORODATOS.COM
</div>
<div id="fd2">
<a href="#">Nombre</a> - <a href="#">Nombre</a> - <a href="#">Nombre</a> - <a href="#">Nombre</a> - <a href="#">Nombre</a> - <a href="#">Nombre</a>
</div>
<div id="fd3">
<br>
Contenido.
<br>
</div>
<div id="fd4">
<br>
Contenido.
<br>
</div>
<div id="fd5">
&copy; 2012 <a href="http://forodatos.com">ForoDatos</a>
</div>
</body>
</html>

Y tenemos nuestro diseño todo en 1, CSS+HTML, y ambos desarrollado al tipo HTML5 y CSS3.

Un saludo, este tutorial ha salido de mi experiencia y cabeza, si hay de copiarlo poner mi nombre en el o sitio web.
Última modificación: 14 Aug, 2012, 5:58 pm por nicods_20055.
Interesante aunque un poco básico
:)
Cluster
11 Aug, 2012, 3:59 pmCluster escribió:
Interesante aunque un poco básico

Si un poco básico, este diseño lo hice en cuestión de horas hoy, por que voy a hacer un nuevo diseño para el hosting. Pero una vez terminado de esta muestra verán algo más grande y bonito Smile

Lo deje así para expresarlo un poco en la explicación.

Un saludo.
no es por mal, pero menudo tutorial mas malo

<meta charset="windows-1252" /> ? wtf... usa iso o utf8..

luego, aprende que es html5, no has usado ninguna etiqueta html5...

http://nentab.com/blog/tag/sintaxis-html/

JAVASCRIPT? una función movilizada en el sitio ? TOTALMENTE FALSO

tampoco es necesario saber CSS para usar javascript Smile

y no se si sabes que se ha muerto ya el maquetar en px ahora si usa rem (como em, pero definido en valor 1)
¿Porque no webeamos un poco?
[url=https://webeamos.com/][/url]
Ha muerto el maquetar en pixeles O.O? Uso funciones zombie entonces. En la programación se usa lo que existe, y si se logra lo que quieres no importa que este "muerto". No es lo mismo "px vs em" que "<center> vs <div align="center"> vs <div style="text-align: center;"> vs <div class="align_center">". Que yo sepa pixeles aun es usable en contra de <center> que no es recomendado desde hace an~os y de style que lo sera en CSS3.

Y no critiques a los que no usan HTML5 como si fuera un standar desde ya, ni si quiera esta terminado. Si si si, "esta lo suficientemente listo para ser usado blablabla", pero no esta terminado, punto (a menos de que no me alla enterado de algo).
Omar G.
Omar critico porque pone cosas que no son ciertas


Diseño HTML5 + CSS3 en desarrollo, una gran explicación


y si, los pixeles estan muertos, porque cada persona usa una pantalla diferente, una resolución difernete y demás, y pronto llegara que las letras en px no se vean bien.

http://www.forosdelweb.com/f4/px-vs-em-759741/

me parece increible que un moderador diga que no critique cuando es un tutorial "falso" (porque no habla de html5) ni usa roles, ni etiquetas ni nada... y css3 tampoco usa, por lo que...

<center></center> ya no se usa y align="center" ya hace batstante que se esta dejando de usar Smile
¿Porque no webeamos un poco?
[url=https://webeamos.com/][/url]
wsoul
13 Aug, 2012, 11:43 amwsoul escribió:
Omar critico porque pone cosas que no son ciertas


Diseño HTML5 + CSS3 en desarrollo, una gran explicación

Quizas deberia leer los titulos antes de comentar.

wsoul
13 Aug, 2012, 11:43 amwsoul escribió:
y si, los pixeles estan muertos, porque cada persona usa una pantalla diferente, una resolución difernete y demás, y pronto llegara que las letras en px no se vean bien.

http://www.forosdelweb.com/f4/px-vs-em-759741/

Perp los pixeles funcionan cuando no te importa la pantalla del que visita, no? Muchos sitios usan lo que es el fixed width, alli es donde sirve.

wsoul
13 Aug, 2012, 11:43 amwsoul escribió:
<center></center> ya no se usa y align="center" ya hace batstante que se esta dejando de usar Smile

Ya lo se >_>

<center></center> esta desaprobado desde quien sabe cuando, align="" ya no debería de usarse (pero creo aun no esta desaprobado), y style="" estará desaprobado cuando CSS3 sea terminado. Pero los pixeles aun no están desaprobados.
Omar G.
@omar...

el título es


Diseño HTML5 + CSS3 en desarrollo, una gran explicación


igual el que lo debería leer eres tu ¬.¬_

y en html5 la gente no se suele usar px (se puede), pero hoy en día se suele usar rem, y esto de css3 y html5 no tiene nada... (mas que el título)
¿Porque no webeamos un poco?
[url=https://webeamos.com/][/url]
Eso quise decir, yo debería leerlo. Casi nunca leo los títulos. Posiblemente piensa agregar etiquetas HTML / CSS3 con el tiempo.
Omar G.
Tema cerrado
Colaboradores
Omar G. Juliens jrodriguez Jesam Jaizu Cluster
This forum uses Lukasz Tkacz MyBB addons.