Desarrollo Web con PHP

Número de Ficha:
2667810
DISEÑO WEB
Layout
PRESENTACIÓN
El desarrollo de una página web tiene como objetivo implementar un
diseño agradable y amigable para el usuario, teniendo en cuenta el
uso de colores, imágenes, sonidos, etc. El diseño web cubre los
aspectos detallados de la preparación y análisis técnico los sistemas
(software y hardware) combinada con una preparación completa en
aspectos legales (Tipos de licencias, derechos de autor, uso de
imágenes, creación de interfaces).
Con un buen diseño web se puede:

❖ Posicionar un producto en el mercado.

❖ Determinar la aceptación o no de un producto por parte del
cliente.
❖ Conocer y saber aplicar los principales estándares y buenas
prácticas del diseño web.
❖ Conocer el diferente software especializados para el diseño web.
❖ Entender el concepto de etiqueta, estilo, prototipo, interfaz
vulnerabilidad
¿Qué es el diseño web?
El diseño web es un área enfocada a planificar, diseñar, mantener y
crear interfaces digitales. En pocas palabras, como su nombre lo
indica, el diseño web se refiere al proceso del diseño de sitios y
páginas web.
Este proceso abarca muchas áreas, como por ejemplo el diseño
de la interfaz, la optimización SEO, y el diseño del sitio web
entre otras cosas.
El diseño web implica trabajo relacionado con el layout, así como la
producción de contenido. A nivel general se considera diseño web
como el diseño del sitio, es decir desde cuestiones como el color de
fondo hasta la elección de la tipografía.
Y este diseño está muy relacionado a hacer más amigable la
experiencia del usuario. En especial porque existen diferentes tipos
de gustos y tendencias, las cuales pueden variar de acuerdo a las
industrias en donde te desenvuelvas.
Qué es Layout

La palabra layout sirve para hacer referencia a la manera

en que están distribuidos los elementos y las formas
dentro de un diseño. Es un vocablo del idioma inglés que
no forma parte del diccionario de la Real Academia
Española. Se traduce al español como 'disposión', 'plan' o
'diseño'.

Se dice que el layout es la representación de un plano

sobre el cual se va a dibujar la distribución de un espacio
específico o determinado.

El layout puede tomarse como base para una página web,

pues es a partir ese plan o diseño que esta se irá a
desarrollar. Dicho de otro modo, el producto inicial de una
página o sitio web es su layout, plantilla o diseño.
DISEÑO Y PRODUCCIÓN WEB

Los componentes básicos de todas las páginas web son HTML , CSS
y JavaScript .

HTML - Hyper Text Markup Language (Lenguaje de

Marcado de Hipertexto)
Es un tipo de lenguaje web que se usa para expresar
contenidos. El HTML es un lenguaje de marcas que anota
el texto para que el ordenador pueda manipularlo con
algún propósito. La mayoría de los lenguajes de marcas
son legibles por los humanos y están diseñados para ser
escritos con un editor de texto plano
 CSS - Cascading Style Sheets (Hojas de
estilo en cascada)

El CSS se puede utilizar para dar estilo al texto de un documento muy

básico, por ejemplo, cambiando el color y el tamaño de los encabezados y
los enlaces. Puede utilizarse para crear un diseño, por ejemplo, para
convertir una columna de texto en un diseño con un área de contenido
principal y una barra lateral para información relacionada. Incluso puede
usarse para efectos como la animación.
❖ Sintaxis de CSS
CSS es un lenguaje basado en reglas: se definen reglas que especifican h1 {
grupos de estilos que deben aplicarse a determinados elementos o grupos color: rojo;
de elementos de la página web. Por ejemplo, "Quiero que el encabezado
principal de mi página se muestre como un texto rojo grande". font-size: 5em;
}
El siguiente código muestra una regla CSS muy simple que lograría el
estilo descrito anteriormente:
JavaScript

JavaScript es un lenguaje de programación basado

en texto, que se utiliza tanto en el lado del cliente
como en el del servidor y que permite hacer páginas
web interactivas. HTML y CSS también son lenguajes
pero orientados a la estructura y estilo, mientras que
JavaScript tiene la función de aportar los elementos
interactivos. Un ejemplo básico es el cuadro de
búsqueda de Amazon, o cuando estás en una página
web y al pasar sobre ciertos gráficos estos se mueven
o te dan otras información o algo tan simple como los
videos incrustados en los sitios web.
ETIQUETA HTML

Las etiquetas HTML son fragmentos de texto rodeados

por corchetes angulares < >, que permiten construir
elementos HTML funciones . <etiqueta>
Las etiquetas o tags son la forma de escribir código
HTML.

En HTML existen etiquetas de apertura y etiquetas de cierre, tienen la forma: <etiqueta>

</etiqueta>. Donde <etiqueta> es la etiqueta de apertura y </etiqueta> es la etiqueta de
cierre indicada por la diagonal. HTML tiene definidas gran variedad de etiquetas para
distintos usos.

<etiqueta>contenido</etiqueta>
ETIQUETA HTML
Aunque la mayoría de las etiquetas tienen su etiqueta de apertura y etiqueta de cierre, es
importante aclarar que no todas las etiquetas tienen su correspondiente etiqueta de cierre.
Ejemplo:
Apertura Cierre
<html> </html>
<head> </head>
<body> </body>
<p> </p>
La etiqueta de apertura y la de cierre son las misma con la única diferencia de la diagonal "/" , es
necesario la etiqueta de cierre para limitar el campo de acción de la etiqueta, por ejemplo a
etiqueta <p> nos indica el inicio de un párrafo de texto y una vez que se escribe la etiqueta de
apertura el navegador tomará como párrafo todo el texto que se encuentre después de dicha
etiqueta hasta toparse con la etiqueta de cierre </p> y así con las demás etiquetas según la
función de cada una, la mayoría de las etiquetas de HTML son etiquetas de este tipo
ETIQUETA HTML

Etiquetas sin etiqueta de cierre:

Este segundo grupo de etiquetas no requieren de una etiqueta de

cierre debido a que su campo de acción está limitado al lugar en
donde se incluye la etiqueta.
Etiqueta
<br>
<img>
<hr>
<input>
Etiquetas HTML Básicas
Hay una serie de etiquetas que son las más usadas para crear cualquier documento HTML, a
continuación las explicamos:

• <body> para el contenido

• <head> para información sobre el documento
• <div> división dentro del contenido
• <a> para enlaces
• <strong> para poner el texto en negrita
• <br> para saltos de línea
• <H1>…<H6> para títulos dentro del contenido
• <img> para añadir imágenes al documento
• <ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro de la
lista
• <p> para parágrafos
• <span> para estilos de una parte del texto
 Estructura Básica HTML
1. HTML
<html> está al inicio de un documento HTML e indica a los navegadores que la página tiene código
HTML para que pueda leerlo de esa forma. Siguiendo la sintaxis del lenguaje, la etiqueta de
cierre </html> será el último elemento del documento.
2. Encabezado
<head> es la etiqueta que se utiliza para el encabezado de la página. Su principal función es
contener toda la información del funcionamiento del sitio. Debido a esto, es un código encriptado
que las personas que entran a la página no pueden ver.
3. Título de la página
<title> es la etiqueta que da a tu sitio un nombre para que los usuarios puedan identificarlo. Es el
título que puedes ver en las pestañas del navegador.
4. Cuerpo
<body> es la etiqueta que contiene todos los elementos individuales del sitio. O dicho de otra forma,
comprende todo el contenido visible del sitio. Aquí podrás insertar texto, imágenes, videos o
cualquier otra funcionalidad que desees mostrar.
Estructura Básica HTML
Ejemplo de las cuatro etiquetas esenciales:

<html>
<head>
<title>Mi página de ejemplo</title>
</head>
<body>
Aquí va el contenido
</body>
</html>
Atributos de etiquetas.

Los atributos de HTML son palabras especiales utilizadas dentro de la

etiqueta de apertura, para controlar el comportamiento del elemento.

Las etiquetas tienen atributos que nos sirven para especificar ciertos
detalles de esa etiqueta, por ejemplo, especificar un color de texto o
de fondo, el ancho y alto de algún elemento, su alineación, la
ubicación de un documento o imagen, etc.

Lista de los atributos más usados en HTML

Id =” ”: Para identificar un elemento único.

Atributos de etiquetas.
class =” ”: Identificador múltiple.
align =” ”: Alineación de
contenido.
border =” ”: Para darle borde al
contenido.
style =” ”: Para darle un estilo al
contenido.
background-color =” ”: Para
color de fondo.
href =” ”: Para enlaces html.
height =” ”: Para determinar
altura.
width =” ”: Para determinar
ancho.
src=“ ”: Para imágenes.
Cómo colocar Atributos en HTML
Un atributo se escribe de la siguiente manera: Atributo=“valor” en esa forma, el
nombre del atributo, seguido del signo igual (=) y entre comillas el valor, todo esto
siempre dentro de la etiqueta de apertura.
Por lo tanto el atributo escrito en una etiqueta (por ejemplo párrafo) se ve así: <p>

atributo="valor">Este es un párrafo</p>

<p width="400px" height ="200px" >Este es un párrafo</p>

Valor de un Atributo

Cuando se hace uso de un atributo HTML se debe especificar su

valor, este puede representar una cantidad exacta, característica
especifica o simplemente en que medida se ejecutará dicho atributo.

El valor se expresa entre comillas después del signo de (=), de

acuerdo al atributo, pueden haber una variedad de valores
disponibles. Por ejemplo, en caso dealign puede tomar el valor de
center (centro), right (derecha), left (izquierda), justify (justificado).
Atributos HTML y Sus Valores
A continuación veamos algunos atributos y los valores que puede tomar:

Atributo: valores

• Id.- su valor puede ser cualquier palabra que sirve para identificar un elemento.

• align.- alineación, sus valores pueden ser: center, right, left, justify.

• border-style.- estilo de borde, los valores disponibles

son: solid, dotted, dashed, double, etc.

• bgcolor.- Para color de fondo para ciertos elementos como body, el valor puede ser
cualquier color en formato palabra, hexadecimal, RGB, etc.
ejemplo: red, green, #ff0000, etc.
Atributos HTML y Sus Valores
Atributo: valores

• href .- para enlaces su valor puede ser la dirección de un carpeta o URL.

• height .- para definir altura, su valor puede ser una medida con su unidad de
medida, por ejemplo: 10px, 12em, 100%.

• width.- define el ancho y su valor puede ser cualquier medida con su

respectiva unidad de medida.
Acuerdos de trabajo

A través de la siguiente plataforma realiza

los ejercicios de los Fundamentos del
Desarrollo Web

Sololearm:

https://www.sololearn.com/
Acuerdos de trabajo
Título
Título
Si su presentación requiere incluir el logo de
Gobierno Nacional, deberá ubicarlo cómo se indica
en las siguientes diapositivas:
Título
presentación
Título
texto corto descriptivo
a 2 o 3 líneas
Título
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.
Título
Título
Título
Si su presentación requiere incluir el logo de una
marca externa, deberá ubicarlo cómo se indica en las
siguientes diapositivas:
 El tamaño del logo de la marca
externa no debe superar el
tamaño del logo SENA.

Título
presentación
Marca externa
Título
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.
Título

El tamaño del logo de la marca

externa no debe superar el
tamaño del logo SENA.

Marca externa
Título

Marca externa
Título

Para las diapositivas con fondo

de color verde, es
recomendable colocar la
versión blanca del logo de la
marca externa.

Marca externa