Onofre Cortez Jonathan Michel

No. Control: 15251767 Grupo:T-61 Programación Web

Reglas para un proyecto web
1.- Reunir información: Investigar el historial de la marca, su giro, sus servicio y la competencia.

2.- Plantear un objetivo: El objetivo debe plantearse de acuerdo a la función que hará el sitio en la red.

3.- Conocer los objetivos del cliente: Nunca se debe de olvidar la opinión del cliente, aunque tu como diseñador o
creativo presentes una idea, ésta debe de ir acorde a los objetivos deseados del cliente, sin tu perder estilo.

4.- Conocer el público objetivo: Se tiene que tomar en cuenta todo tipo de datos demográficos sobre las personas que
estarán frente a un monitor visitando la página. La edad, el sexo, gustos, estilo de vida, cultura y hasta lugar de
residencia.

5.- Crear un mapa del sitio: Es importante antes de ponerse a diseñar y programar, bocetar las ideas y hacer distintas
pruebas.

6.- Crea o reúne un contenido atractivo: El contenido tanto tipográfico como visual, debe llamar la atención de la
audiencia.

7.- Planifica: Empezar con las ideas básicas y crear un calendario de avances y metas.

8.- Propón ideas frescas y nuevas al cliente: Puede que el cliente tenga una idea muy definida para su sitio, pero si
éstas no funcionan, se pueden pulir con una buena propuesta de diseño, quedando todos conformes.

9.- Crear: Definir el concepto de la página y no entregar un trabajo que no se entienda y sin ningún estilo.

10.- Has pruebas: Antes de dar por terminado el proyecto, se debe realizar pruebas de que todo funcione, desde
códigos, botones, textos, videos y animaciones para que el cliente no tenga quejas sobre el trabajo entregado.

11.- Crear una web que se mantenga: Decir no a los 404s y a los actualiza

Reglas de HTML
Versiones de HTML
Desde su inicio el lenguaje HTML ha tenido varias versiones, todas ellas muy similares, aunque con algunos
matices o diferencias entre ellas. Las últimas, compatibles con todos los navegadores son el HTML 4.01 y el XHTML
1.0, Los navegadores actuales leen las páginas en cualquiera de estas dos versiones. La diferencia entre estas dos
versiones es que el XHTML es algo más estricto en sus normas. El HTML 4.01 es bastante más permisivo en la forma
de colocar etiquetas, modo de escribirlas, etc.
por lo tanto todo lo que está bien escrito en XHTML lo está también en HTML pero no sucede al contrario.
El XHTML 0.1, es más reciente que el HTML 4.0, y se creó para poner orden en los lenguajes HTML anteriores.
Es, por así decirlo un manual de buenas prácticas para escribir el código. Se puede decir que los navegadores lo
entienden mejor, e intenta eliminar conflictos que pueden surgir entre distintos navegadores para interpretar las mismas
etiquetas.
Aparte de esto, hay una serie de recomendaciones o "buenos hábitos" que se deben seguir para una mejor
claridad y evitar algunos errores al escribir en el editor de textos.
Sin embargo el lenguaje que prevalece entre los programadores de web es el HTML 4.01, hoy día ampliado al
HTML 5.
El HTML5 es una nueva versión, todavía no compatible al 100% con la mayoría de navegadores, que pretende
actualizar la forma de escribir páginas web a una concepción de la web más dinámica e interactiva. HTML5 añade
nuevas opciones (etiquetas, aplicaciones, etc) al lenguaje HTML anterior que simplifican algunas tareas (poner fechas,
completar formularios, etc.)
De creación reciente, Neceitamos normalmente que el usuario tenga actualizado el navegador para que pueda
aprovecharse de todas las novedades de HTML 5. Aun así, hay algunas funciones del nuevo HTML 5 que todavía no
están desarrolladas en algunos navegadores.
Sobre el HTML5 y sus aplicaciones dedicamos varios manuales en la sección Nuevas tendencias. De momento
aquí aprenderemos a usar las versiones HTML 4.01 y XHTML.1 que son las básicas para aprender el lenguaje, sobre
todo el HTML 4.01, y algunas soluciones que propone el XHTML.1 para algunos casos en los que pueda haber conflicto.
Estas versiones son perfectamente compatibles con todos los navegadores.

Escritura de etiquetas
Onofre Cortez Jonathan Michel
No. Control: 15251767 Grupo:T-61 Programación Web
Veamos ahora las normas que debemos seguir para escribir las etiquetas en HTML.
Apertura y cierre
La mayoría de las instrucciones tienen etiqueta de apertura y etiqueta de cierre. Es necesario poner las dos, y
entre éstas está el elemento afectado. Sin embargo en algunos casos la etiqueta de cierre puede no ponerse, aunque
es conveniente ponerla para evitar confusiones. Tal es el caso de la etiqueta <p> (parrafo) cuando después de la
etiqueta de cierre le sigue otra etiqueta <p>
Podemos escribir: <p> ... </p><p>... </p>
o también: <p> ... <p>... </p>
Aunque es más que recomendable escribir siempre la primera forma, y poner siempre la etiqueta de cierre. El
lenguaje XHTML indica que siempre hay que poner la etiqueta de cierre.
Las instrucciones de etiqueta única (etiquetas que no tienen otra de cierre) se escriben normalmente, si bien en
XHTML se pone una barra inclinada al final para indicar que la misma etiqueta tiene la apertura y el cierre. Por ejemplo
la etiqueta <br> (salto de línea), por su misma naturaleza no tiene etiqueta de cierre, pero en XHTML se escribe <br/>,
con la barra inclinada al final.
Nosotros podemos escribirla de cualquiera de las dos maneras, aunque es más recomendable acostumbrarse a
la forma propuesta por el XHTML (<br/>.
Mayúsculas o minúsculas
En HTML es indiferente escribir las palabras clave de las etiquetas en mayúsculas, minúsculas, o una combinación
de ambas. Podemos escribir por ejemplo <br> o <BR> o incluso <bR>, Si bien en XHTML sólo se admiten las
minúsculas.
nosotros, en este manual las escribiremos siempre en mínusculas, sin embargo muchos programadores las
escriben en mayúsculas, tal vez para diferenciarlas mejor del resto del texto.
Los atributos
Como vimos, las etiquetas pueden llevar atributos, en algunas de ellas es obligatorio. El atributo lleva casi siempre
un valor, el cual se indica mediante el signo igual ( = ) seguido de un número, un porcentaje o una palabra clave. Este
valor se puede poner o no entre comillas.
Podemos escribir : <p align="center"> ... </p>
O podemos escribir : <p align=center> ... </p>
sin embargo en XHTML deben ponerse siempre las comillas.
sin embargo cuando el valor tiene más de una palabra debe ir siempre entre comillas. Nosotros en este manual
lo escribiremos siempre entre comillas, sobre todo cuando no es un número.
Jerarquía de etiquetas
Lo normal es que entre la etiqueta de apertura y la de cierre, no se incluya otra etiqueta sin que tenga también su
etiqueta de cierre. Es decir, que unas etiquetas engloben a otras, no dejando el cierre de una etiqueta secundaria para
después de la etiqueta que la engloba. Aunque HTML admite que eso pueda hacerse, es algo que debe evitarse para
no dar lugar a confusiones. Por ejemplo:
Está bien: <p><b> ... </b></p>
Está mal: <p><b> ... </p></b>
Aunque HTML admite la segunda apción, en algunos navegadores esto puede dar lugar a errores, y en todo caso
XHTML no admite esta opción.
Espacios en blanco y saltos de línea
Cuando escribimos el código fuente en el editor de textos podemos poner varios espacios en blanco entre las
palabras, sin embargo en la página sólo aparecerá uno. y es que el navegador ignora todos los espacios en blanco
entre palabras, excepto uno para separarlas.
Lo mismo ocurre con los saltos de línea. Los saltos de línea que hagamos nosotros al escribir texto en el editor
de textos, serán interpretados por el navegador como un único espacio entre palabras, escribiendo el texto todo
seguido.
Si queremos que en la página se vea más de un espacio en blanco entre palabras o un salto de línea deberemos
indicárselo mediante etiquetas o caracteres especiales.
Un poco de orden al escribir
Según lo anterior, podríamos escribir el código todo seguido, y el navegador lo interpretaría correctamente. Sin
embargo es conveniente escribirlo con un poco de orden: Pondremos cada instrucción en una línea (o en varias si la
instrucción es muy larga); y usaremos las tabulaciones y las líneas en blanco para separar unas instrucciones de otras,
e indicar si unas etiquetas están dentro de otras. En definitiva, se trata de organizar un poco el contenido del código
para que éste quede claro.

Escribir nombres de archivos

Todos los archivos y documentos que formen nuestra web debemos guardarlos y organizarlos dentro de una
misma carpeta a la que llamaremos carpeta raiz.
Esto es imprescindible no sólo para tener nuestro sitio localizado, sino también para poder subirlo a la red. La
carpeta raíz de nuestro ordenador, donde guardamos los archivos de un mismo sitio, le llamamos también el Sitio
 Onofre Cortez Jonathan Michel
No. Control: 15251767 Grupo:T-61 Programación Web
local, en contraposición con la copia de esa carpeta que está en el servidor, y que es la que se ve en Internet, a la cual
se le llama el Sitio remoto.
Dentro de la carpeta raíz organizaremos los archivos y crearemos otras subcarpetas de forma que el sitio quede
lo más ordenado posible.
El nombre de la carpeta raíz puede ser el que tú quieras ("mi web", "carpeta web" o el nombre que quieras ponerle
a tu web).
Al guardar los documentos HTML, las imágenes y otros objetos que formen nuestra web debemos ponerle nombre
a los archivos y carpetas que los contienen. Aunque en principio cualquier nombre de archivo es válido, (salvo algunos
caracteres que no admite Windows), debemos recordar que los nombres de esos archivos y carpetas deben ser leídos
por los navegadores, por lo que es conveniente seguir unas normas básicas, que no sólo ayudarán a que los
navegadores los lean más fácilmente, sino que nos ayudarán también a nosotros a recordar exactamente sus nombres.
Si no seguimos estas normas, es posible que los espacios en blanco, los acentos, las mayúsculas u otros signos,
puedan darnos problemas para que el archivo pueda ser encontrado o leído correctamente.
La mayoría de los diseñadores recomiendan seguir las siguientes normas:

Normas para escribir nombres de archivos y carpetas

▪ Texto en minúsculas: Todo el texto del nombre de archivo se escribirá en minúsculas.
▪ No poner acentos: Escribiremos todas las palabras sin acento, aunque los tengan.
▪ No empezar por un número: El primer carácter o signo que escribamos no debe ser un número, pues algunos
programas podrían interpretar mal el nombre del archivo
▪ No utilizar otros caracteres que no sean letras o números: no utilizar barras, paréntesis, puntos, dos puntos, comas,
comillas, signo más, etc.
▪ Separar las palabras con guión normal - o con guión bajo _ : (preferentente guión bajo) Muchos navegadores
podrían interpretar mal los espacios en blanco, por lo que es preferible sustituirlo por el guión normal o por el guión
bajo. (El guión bajo ( _ ) se escribe pulsando la tecla Mayúsculas y la tecla Guión a la vez).
Con estas sencillas normas tendremos estandarizada la forma de escribir los nombres de los archivos y carpetas
que vayamos creando, sin asaltarnos la duda de si tal o cual palabra la he puesto en mayúscula o minúscula, si habré
o no puesto el acento, etc. y con la seguridad de que los navegadores lo leerán correctamente.

Lenguaje CSS
Mediante el lenguaje HTML podemos llegar a crear páginas bastante completas. Para ello lo normal es que cada
etiqueta necesite varios atributos; el código puede llegar a recargarse bastante, haciéndose complicado si queremos
indicar todas las características del texto en la página.
El lenguaje CSS o "estilo" viene a separar lo que es el texto de su presentación o aspecto. Cuestiones como el
tipo de letra, color, tamaño, ubicación del elemento en la página, etc, pueden ponerse en un código aparte mediante el
lenguaje CSS.
El lenguaje HTML de la página se simplifica bastante de esta forma, ya que no hay que indicarle mediante atributos
todos los aspectos del estilo.
Entendemos con ésto cual es la misión del lenguaje CSS. CSS es un complemento del lenguaje HTML, y en
muchas ocasiones ayuda a resolver de forma simple cuestiones que con el HTML tendrían una solución bastante
complicada (tal es el caso de escribir la página a varias columnas, ubicación de cuadros de texto, etc).
Es por eso por lo que hemos incluido la opción de seguir los dos manuales (HTML y CSS) al mismo tiempo. De
esta manera podremos ver cómo se relacionan estos dos lenguajes.