NOMBRE: MELANY DANIELA CEDEÑO ZUMBA.
CURSO: 2DO BACHILLERATO TÈCNICO PARALELO: "A"
DOCENTE: MSC. ROSA GUASTAY ALVAREZ MÒDULO: DISEÑO Y DESARROLLO WEB
MÒDULOS DE INFORMÀTICA
*DISEÑO Y DESARROLLO WEB
*SISTEMA OPERATIVO Y REDES
*SOPORTE TÈCNICO
*PROGRAMACIÒN Y BASE DE DATOS
-DISEÑO Y DESARROLLO WEB
¿QUÈ ES DISEÑO Y DESARROLLO WEB ?
es un área enfocada en el desarrollo de interfaces digitales, como el diseño de sitios y aplicaciones para web. Para ello, los diseñadores web crean las páginas utilizando lenguajes de marcado como HTML.
¿QUÈ SIGNIFICA HTML ?
HTML (Lenguaje de marcado de hipertexto o HyperText Markup Language por sus siglas en inglés) es un lenguaje descriptivo que especifica la estructura de las páginas web.
¿PARA QUE SIRVE EL BLOC DE NOTA?
Microsoft Bloc de notas es una herramienta de procesamiento de texto incluida con Windows. Puede usarla para crear un archivo de registro que agrega la fecha y hora actual cada vez que se abre el archivo de Bloc de notas.
¿COMO SE CREA UNA PAGINA WEB EN BLOC DE NOTAS ?
CON LOS SIGUIENTES PASOS:
<HTML>
<HEAD>
<TITLE >BIENVENIDA</TITLE>
</HEAD>
<BODY>
BIENVENIDOS AL NUEVO AÑO LECTIVO 2023- 2024
</BODY>
</HTML>
¿PARA QUE SIRVE< BODY BG COLOR="--------">?
SIRVE PARA PONERLE COLOR A LA PÁGINA WEB.
¿PARA QUE SIRVE <BODY BACKGROUND="....... ">?
SIRVE PARA PONERLE FONDO A LA PÁGINA WEB.
¿PARA SIRVE <FONT COLOR=".......">?
SIRVE PARA PONERLE COLOR A LAS LETRAS.
¿PARA QUE SIRVE< FONT SIZE=".....">?
SIRVE PARA PONERLE TAMAÑO A LAS LETRAS.
¿PARA QUE SIRVE <FONT FACE="......">?
SIRVE PARA PONERLE DIFERNTES TIPOS DE LETRAS.
¿QUÈ ES DISEÑO WEB?
El diseño web implica trabajo relacionado con el layout y diseño de páginas online, así como la producción de contenido, aunque generalmente se aplica a la creación de sitios web.
En este caso, los diseñadores web crean las páginas utilizando lenguajes de marcado como HTML o XML.
Por otro lado, la parte visual de los sitios está a cargo del CSS, término utilizado para estilizar los elementos escritos en HTML.
Por lo tanto, es común que los diseñadores web utilicen ambos para construir un site porque juntos definirán cómo aparecerán las páginas en los navegadores.
El proceso de creación de sitios se puede realizar desde herramientas como Adobe Dreamweaver (que requerirá que el profesional sepa más sobre los códigos) y CMS que son plataformas de administración de contenido.
WordPress es uno de los más conocidos y prácticos porque tiene una serie de templates que pueden basar el sitio. El web designer tiene la tarea de instalarlos y personalizarlos según lo que cada cliente quiera.
¿Cuáles son los elementos clave del diseño web?
Cuando hablamos de un buen diseño web, algunos puntos son fundamentales y no pueden faltar en tu sitio. Aquí están los aspectos más destacados:
Responsividad
Como cada vez más las personas acceden a internet solo por teléfono celular, es muy importante que tu sitio sea adecuado para dispositivos móviles, es decir, que sea responsivo.
Escaneabilidad
¿Conoces esos correos electrónicos que tienen un "bloque de texto" porque todo el mensaje está escrito en un solo párrafo? Leerlos es demasiado agotador, ¿no es así? Bueno, lo mismo ocurre con los visitantes de tu sitio si el no considerar la escaneabilidad textual.
Tipografía
Si desde este punto comenzamos a escribir esta publicación con un tipo de letra completamente diferente, tu experiencia de lectura no sería muy agradable, ¿verdad? Después de todo, es una tipografía que no encajaría con el resto del contenido. Lo mismo debería aplicarse a tu sitio.
Velocidad de carga
En un mundo donde todos parecen estar siempre apurados, tener un sitio web de carga rápida es esencial. Según Google, los sitios que tardan más de 2 segundos en cargarse dañan tanto la experiencia del usuario como la indexación del sitio.
¿Cuáles son las ventajas de invertir en un diseño web de calidad?
Estos son los cinco beneficios que puedes tener al invertir en un diseño web profesional:
1. Buenas primeras impresiones
El sitio es la presentación de la empresa que gestionas en los medios digitales. Cada vez que un posible cliente nuevo acude a tu empresa, te preocupas hacer una buena primera impresión.
Bueno, con tu sitio, la situación no es diferente. Debe ser un reflejo inmediato del negocio.
Un sitio web que no sea profesional hace que los visitantes no tengan una buena experiencia e incluso piensen que la empresa está desactualizada. Esto hará que busquen ofertas como la tuya en competidores que tienen un mejor sitio web.
2. Mejores procesos de SEO
SEO o la optimización de motores de búsqueda se refiere a la optimización orgánica de tu sitio web entre los motores de búsqueda actuales y es uno de los puntos de estrategia digital que cada profesional de marketing necesita aprender
Cuando las personas indaga sobre una compañía o servicio específico que satisfaga sus necesidades, buscan términos en los motores de búsqueda como Google. Estadísticamente, estos usuarios visitarán las primeras páginas que aparecen en el resultado de la búsqueda.
Si tu sitio no está actualizado, significa que no contiene el contenido específico necesario para ser seleccionado e indexado por estos motores de búsqueda.
Entonces, en lugar de estar en la primera página de resultados, puede aparecer entre las páginas 5 o 6, por ejemplo, y nunca ser visto por tu audiencia.
Por lo tanto, tener un buen posicionamiento de SEO es uno de los mejores métodos para generar nuevos clientes sin tener que recurrir a anuncios de medios pagados.
2 TRIMESTRE
DISEÑO Y DESARROLLO WEB
tema1:
LISTAS ORDENADAS "HTML"
¿Cómo hacer listas en HTML?
En HTML, podemos enumerar elementos en forma ordenada o desordenada.
Una lista ordenada utiliza números o algún tipo de notación que indica una serie de elementos.
Por ejemplo, una lista ordenada puede comenzar con el número 1 y continuar por el 2, 3, 4, etc. Tu lista ordenada también puede comenzar con la letra A y pasar por B, C, D, etc.
Aquí hay un ejemplo de una lista ordenada con los nombres y calificaciones de los estudiantes.
¿Cómo hacer una lista ordenada con HTML?
En HTML, podemos crear una lista ordenada usando la etiqueta <ol>. La etiqueta ol representa una lista ordenada. Dentro de cada uno de los elementos de la lista ordenada <ol> y <ol />, tenemos que definir los elementos de la lista. Podemos definir los elementos de la lista usando la etiqueta <li>.
Aquí está la estructura HTML completa para una lista ordenada:
<ol>
<li>Eat</li>
<li>Code</li>
<li>Sleep</li>
</ol>El resultado de la lista ordenada anterior es:
Entonces, tenemos la lista de elementos ordenados con un número que comienza con 1 y se incrementa a 2 y 3. Pruebe este CodePen y vea si puede cambiar y jugar usandool-li.
Tipos de listas ordenadas en HTML
¿Qué
pasa si no quieres ordenar tu lista por número? En su lugar, deseas
ordenar usando el alfabeto como A, B, C o a, b, c. Puedes hacerlo
especificando el valor del atributo type de la etiqueta <ol>.
Puedes ordenar la lista usando las letras A, B, C pasando A como valor de type(tipo).
<ol type="A">
<li>Eat</li>
<li>Code</li>
<li>Sleep</li>
</ol>
La salida se ve así:
De manera similar, puedes usar letras minúsculas como a para el valor del tipo y así enumerar los elementos con a, b, c, etc.
<ol type="a">
<li>Eat</li>
<li>Code</li>
<li>Sleep</li>
</ol>
Si desea utilizar números romanos, utilice el valor I para una lista ordenada con números romanos:
<ol type="I">
<li>Eat</li>
<li>Code</li>
<li>Sleep</li>
</ol>Aquí está la salida:
tema2:
CARRUCEL DE IMÀGENES EN "HTML"
Un carrusel es un medio de diversión consistente en una plataforma rotatoria con asientos para los pasajeros. Tradicionalmente los asientos poseen formas de caballos de madera u otros animales, los cuales en muchos casos son desplazados mecánicamente hacia arriba para simular el galope de un caballo. Normalmente, la música se repite mientras el carrusel da vueltas.
Cualquier plataforma rotatoria también se puede llamar carrusel. En términos informáticos o, más concretamente, en el desarrollo Web, el concepto carrusel también está muy presente. Muchas páginas Webs tienen uno y se utilizan principalmente para mostrar publicidad en formato imagen o texto con el principal objetivo de destacar contenido y/o llamar la atención del usuario con su movimiento.
Debido a que este tipo de elementos es muy utilizando hoy en día, en este artículo vamos a ver como crear un carrousel con contenido HTML que está a la espera de que el usuario haga clic en las flechas que aparecen en los laterales del carrousel para pasar al resto de contenido no visible.
Tal como vemos en la imagen el carrousel
está compuesto por elementos que tienen una foto, título y precio. Esto
es un ejemplo. Teniendo la posibilidad de agregar contenido HTML, se puede incrustar cualquier tipo de código en cada elemento.
Para obtener este carrousel en el cuerpo de la págian o dentro de la etiqueta <body> puedes agregar un código similar al siguiente:
<div id="carrusel">
<a href="#" class="left-arrow"><img src="images/left-arrow.png" /></a>
<a href="#" class="right-arrow"><img src="images/right-arrow.png" /></a>
<div class="carrusel">
<div class="product" id="product_0">
<img src="gallery/01.jpg" width="195" height="100" />
<h5>Lorem ipsum 1</h5>
<p>165.00 €</p>
</div>
<div class="product" id="product_1">
<img src="gallery/02.jpg" width="195" height="100" />
<h5>Lorem ipsum 2</h5>
<p>100.00 €</p>
</div>
<div class="product" id="product_2">
<img src="gallery/03.jpg" width="195" height="100" />
<h5>Lorem ipsum 3</h5>
<p>250.00 €</p>
</div>
<div class="product" id="product_3">
<img src="gallery/01.jpg" width="195" height="100" />
<h5>Lorem ipsum 4</h5>
<p>75.00 €</p>
</div>
<div class="product" id="product_4">
<img src="gallery/02.jpg" width="195" height="100" />
<h5>Lorem ipsum 5</h5>
<p>65.00 €</p>
</div>
<div class="product" id="product_5">
<img src="gallery/03.jpg" width="195" height="100" />
<h5>Lorem ipsum 6</h5>
<p>40.00 €</p>
</div>
</div>
</div>En cabecera de la página o dentro de la etiqueta <head> agrega el código jQuery que permite el dinamismo:
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
var current = 0;
var imagenes = new Array();
$(document).ready(function() {
var numImages = 6;
if (numImages <= 3) {
$('.right-arrow').css('display', 'none');
$('.left-arrow').css('display', 'none');
}
$('.left-arrow').on('click',function() {
if (current > 0) {
current = current - 1;
} else {
current = numImages - 3;
}
$(".carrusel").animate({"left": -($('#product_'+current).position().left)}, 600);
return false;
});
$('.left-arrow').on('hover', function() {
$(this).css('opacity','0.5');
}, function() {
$(this).css('opacity','1');
});
$('.right-arrow').on('hover', function() {
$(this).css('opacity','0.5');
}, function() {
$(this).css('opacity','1');
});
$('.right-arrow').on('click', function() {
if (numImages > current + 3) {
current = current+1;
} else {
current = 0;
}
$(".carrusel").animate({"left": -($('#product_'+current).position().left)}, 600);
return false;
});
});
</script>El código anterior también puede ser agregado dentro del cuerpo de la página, justo antes de la etiqueta de cierre.
TEMA 3: USO DEL ELEMENTO DIV-ID
"uso-elemento-div-y-atributo-id.html"
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Ejemplo uso del elemento div y del atributo id</title>
<style>
* {
margin:0;
padding:0;
}
a:link, a:visited, a:hover, a:active {
color:#0f0;
font-size:16px;
}
body {
background:#eee;
font-family:verdana;
}
h1 {
color:#c0c;
font-size:24px;
}
p {
font-size:16px;
}
ul {
list-style-type:none;
}
#cabecera {
color:#ff9;
background-color:#000;
padding:10px;
}
#contenedor {
margin:0 auto;
width:800px;
}
#contenido {
background-color:#ddd;
float:left;
height:500px;
padding:10px;
width:560px;
}
#menu {
background-color:#999;
float:left;
height:480px;
padding:20px;
width:180px;
}
#pie {
background-color:#bbb;
clear:both;
color:#900;
padding:10px;
text-align:center;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<p>Párrafo en la cabecera de la página.</p>
</div>
<div id="menu">
<ul>
<li><a href="enlace-1.html">Enlace 1</a></li>
<li><a href="enlace-2.html">Enlace 2</a></li>
<li><a href="enlace-3.html">Enlace 3</a></li>
</ul>
</div>
<div id="contenido">
<h1>Elemplo: Uso del elemento "div" y del atributo <i>id</i></h1>
<p>Párrafo en el contenido de la página.</p>
</div>
<div id="pie">
<p>Párrafo en el pie de la página.</p>
</div>
</div>
</body>
</html>Visualización en pantalla
TEMA 4:
¿CÒMO PONER ENLACE EN "HTML"?
Cómo crear enlaces o hipervínculos dentro de una entrada
Este capítulo está diseñado para ayudarles a introducir enlaces o hipervínculos en nuestras entradas. El lenguaje con hipervínculos es una de las características fundamentales de la Web 2.0, en la medida que vamos leyendo podremos poner enlaces a palabras de nuestro texto para ampliar la información de la noticia que estamos escribiendo.
Hay un par de maneras de añadir enlaces a tus entradas o páginas. Podremos utilizar el editor visual o el editor de HTML.
Pasos a seguir para crear un hipervínculo con el editor visual
- Resaltar el texto que deseamos vincular y cerciorarse de que tenemos seleccionado el editor Visual.
- Hacer clic en el enlace de la barra de herramientas del editor de texto: “Insertar / Editar Enlace”
.
- En el menú emergente que aparece, introducir la dirección URL a la que se desee establecer el vínculo. Si desea que el enlace se abra en una nueva ventana/pestaña al hacer clic, marcar la casilla “Abrir enlace en una nueva ventana pestaña”.
- Título (opcional) – El título del enlace se hace visible cuando un visitante se cierne sobre el hipervínculo (un texto de ayuda, a modo de nota breve, aparecerá con el título).
- Hacer clic sobre Añadir enlace
Pasos a seguir para crear un hipervínculo con el editor HTML
- Resaltar el texto que deseamos vincular y fijarse de que tenemos activado el editor HTML.
-
Hacer clic en el enlace de la barra de herramientas: “link”
.
- En el menú emergente que aparece, introducir la dirección URL a la que se desee establecer el vínculo. Si desea que el enlace se abra en una nueva ventana/pestaña al hacer clic, marcar la casilla “Abrir enlace en una nueva ventana pestaña”.
- Título (opcional) – El título del enlace se hace visible cuando un visitante se cierne sobre el hipervínculo (un texto de ayuda, a modo de nota breve, aparecerá con el título).
- Finalmente hacer clic sobre Añadir enlace
Pasos a seguir para crear un enlace o hipervínculo a un lugar del propio blog
- Resaltar el texto que deseamos vincular.
- Hacer clic en el enlace de la barra de herramientas: “Insertar / Editar Enlace”
si estamos en modo Visual o “link” 
si estamos en modo HTML. - Si en lugar de enlazar a una web se desea vincular a uno de los propios mensajes o páginas que ya están subidos en el blog, utilizar el cuadro de búsqueda para encontrar rápidamente lo que se está buscando. Basta con introducir una o dos palabras clave que aparezcan en alguna parte del mensaje o la página que desea vincular.
- Hacer clic en el título del mensaje o la página que quieres enlazar, y los campos de URL y el título se llenarán automáticamente.
- Después de haber introducido la dirección URL, haz clic en el botón “Añadir enlace“. En el modo visual: el texto resaltado cambiará al color azul con un subrayado para indicar un enlace:
- En el modo HTML: el texto se envuelve con el código HTML necesario para la creación de un enlace a la URL especificada. El siguiente ejemplo es un enlace a WordPress.com:
TEMA 5:
¿CÒMO HACER TABLAS EN "HTML"?
1. Crea un tabla sencilla
Lo primero que debes hacer para crear una tabla HTML es contar con un editor de texto HTML. Este puede ser tu propio bloc de notas, siempre y cuando admita texto sin formato. Si quieres algo más especializado puedes optar por Notepad++ o alguna alternativa online como GitHub.
Como lo mencionamos al inicio, todo el contenido de las tablas HTML está delimitado por las etiquetas <table> y </table>. Estas serán las principales etiquetas que usarás en el cuerpo de tu editor de texto.
A continuación, debes comenzar a agregar la etiqueta <td> (datos de tabla) e incluir tu primer contenido, por ejemplo:
Si quieres agregar una fila con más columnas, solo debes copiar la etiqueta <td> las veces que desees, actualizando el contenido de tu tabla. Esto debe lucir de la siguiente manera:
Para colocar una segunda fila, debes añadir nuevamente la etiqueta <tr>. Y repite el proceso anterior con la actualización de datos que desees. Recuerda que cada fila debe estar dentro de la etiqueta <tr> con cada celda contenida en un archivo <td>.
El resultado de esta primera tabla HTML sencilla debería ser algo así:
2. Agrega un encabezado
Si bien la tabla anterior ya muestra contenido organizado, lo cierto es que es poco entendible, ¿cierto? Para ello, es necesario agregar un encabezado y lo puedes hacer colocando nuevamente las etiquetas <tr> y <td>. El código de forma completa luciría así:
Y el resultado de la tabla sería el siguiente:
3. Proporciona un estilo
Si además de incluir un encabezado a tu tabla HTML, quieres darle un poco de estilo, por ejemplo, incorporar algún color a alguna columna, también es posible.
Para definir la información de estilo a una columna completa debes hacer uso de las etiquetas <col> y <colgroup>. El ejemplo de código para hacerlo es el siguiente:
El resultado de la tabla está presentado en la imagen a continuación:
Si bien puedes añadir varios estilos, encontrarás algunas limitaciones en cuanto a propiedades, por ejemplo: borde, fondo, ancho y visibilidad. Si quisieras agregar estas y más propiedades debes diseñar cada <td> o <th> en la columna. Sin embargo, esta opción es más compleja que la que te hemos presentado anteriormente.
Este proceso es un tanto complicado, ya que debes repetir la información de estilo en las tres celdas de la columna. Para hacer esta actividad más dinámica puedes especificar la información una sola vez con la etiqueta <col> dentro de un <colgroup>.
Si quieres lograr el mismo estilo en la tabla HTML que hicimos anteriormente, pero sin tantas repeticiones, el código quedaría de la siguiente forma:
Si quisieras aplicar la misma información de estilo a ambas columnas, solo debes incluir la etiqueta <col> con un atributo de intervalo como lo mostramos a continuación:
El elemento span sirve para tomar un valor numérico sin unidades que ayuda a especificar el número de columnas a las que deseas que se aplique el mismo estilo.
Estos son los conceptos básicos para crear tablas en HTML. Si bien es posible aplicar características más avanzadas, antes de avanzar es indispensable que te familiarices con los elementos, etiquetas y demás atributos previo a añadir elementos más complejos.
Como puedes ver, las tablas HTML son altamente funcionales y su creación no es tan compleja como suele pensarse. Solo es cuestión de práctica (y buena memoria) para dominar el lenguaje y volverte todo un experto.
Comentarios
Publicar un comentario