Scribd
Cargar
8 vistas5 páginas

Ficha Del Estudiante SEMANA 18-1 (21 Al 25 Agosto Del 2023)

Cargado por

Profe Ecuador
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
8 vistas5 páginas

Ficha Del Estudiante SEMANA 18-1 (21 Al 25 Agosto Del 2023)

Cargado por

Profe Ecuador
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 5

UNIDAD EDUCATIVA “ANCÓN

SAN JOSÉ DE ANCÓN - SANTA ELENA AÑO LECTIVO


Distrito: 24D01 Circuito: 24D01C01_03 - CÓDIGO AMIE: 24H00179
2023 - 2024
Email: [email protected]
Teléfono: 2906580 - www.colegio_ancon.com

FICHA DEL ESTUDIANTE


SEMANA 18-1 (21 al 25 agosto del 2023)
1. DATOS INFORMATIVOS
DISTRITO: 24D01 CIRCUITO: 24D01C01_03 DIRECCIÓN UEA: AVENIDA EL PETROLERO
DOCENTE(S): Ing. Juan Quirumbay Chávez Nivel Educativo: Bachillerato
Valor de la
Curso: 3 BT informática
semana
Día: Modulo: PROGRAMACION Y BASE DE DATOS
UC 3. Desarrollar sistemas informáticos con lenguajes Desarrollar sistemas informáticos con
de programación y bases de datos, aplicando OBJETIVO lenguajes de programación y base de
UNIDAD DE diferentes metodologías según los requerimientos de ESPECIFICO DEL datos, aplicando diferentes
COMPETENCIA
funcionalidad de la organización o usuario final. MODULO. metodologías según los
requerimientos de funcionalidad.
CONTENIDO ACTIVIDAD DEL APRENDIZAJE
UNIDAD: Introducción a los Sistemas de información Una vez revisado y explicado junto a tu
TEMA: Lenguajes de programación orientada a entornos cliente- servidor. docente de asignatura, es preciso que
Subtema: Introducción a la maquetación con CSS conteste o resuelvas las siguientes
actividades.

Maquetación de una página web permite definir la 1.-Descargue desde el siguiente link
de google drive el proyecto con
estructura y utilizar diferentes tipos de maquetacion, css, hipervinculos,
posicionamiento de capas y elementos flotantes. imganes, etc. Y peguelo en su
htdocs y carpetas de proyectos
web disponible en su computador y
haga que funcione.
El CSS (hojas de estilo en cascada) es un lenguaje que define la apariencia de un
documento escrito en un lenguaje de marcado (por ejemplo, HTML). Así, a los
elementos de la página web creados con HTML se les dará la apariencia que se
desee utilizando CSS: colores, espacios entre elementos, tipos de letra, ...
separando de esta forma la estructura de la presentación.

Paleta de colores

https://htmlcolorcodes.com/es/

Paginas donde bajar banner

https://freefrontend.com/css-banners/#google_vignette

Enlace de paginas para obtener codigos gratuitos de css y html.

https://www.w3schools.com/html/
DESARROLLO DE LA FICHA
Maquetación desde un archivo externo
Se lo realiza con la etiqueta <link> dentro de la etiqueta <head>

<link rel="stylesheet"; href="estilos.css"; media="all"; type="text/css"/>

Y el archive debe estar guradado con la extension . css, dentro de la misma carpeta del proyecto o dendro de una carpeta llamada estilo
ya que puede haber varios códigos ccs para una misma pagina web.

Descargue desde el siguiente link de google drive el proyecto con maquetacion, css, hipervinculos, imganes, etc. Y peguelo en
su htdocs y carpetas de proyectos web disponible en su computador y haga que funcione.

https://drive.google.com/drive/folders/1FPRLtQ31jpAXwZs8sm2WI22yQUoRtCnz?usp=sharing

Observe los captur de la pagina de ejemplo con html y css que se mostrara una vez que la ponga en funcionamiento.
Anexo 1
RETROALIMENTACION - INFORMACION SOBRE MAQUETACION Y CSS
Para indicar que se está usando un fichero CSS en una página web se emplea la etiqueta <link />. Es una misma página web se pueden
indicar varios ficheros CSS que se combinan todos ellos o también se puede indicar de forma que definan estilos alternativos. Los estilos
alternativos se pueden definir para un mismo dispositivo o se pueden definir para distintos dispositivos (ordenador, impresora, teléfono
móvil y otros). Para definir un dispositivo concreto se emplea el atributo media; si no se indica un dispositivo, el estilo CSS se aplica a
todos los dispositivos (equivale a media="all").

Por ejemplo, en el siguiente código se define un estilo CSS que se debe emplear cuando se imprima una página web (media="print") y un
estilo que se debe emplear cuando se visualiza en pantalla:

<link rel="stylesheet" type="text/css" href="home.css" media ="screen" />

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

El navegador selecciona automáticamente el estilo definido para la impresora cuando mandamos a imprimir una página web.

Cuando se definen estilos alternativos (rel="alternate stylesheet") para un mismo dispositivo, es necesario indicar un nombre para cada
estilo con el atributo title. Pueden existir varias hojas de estilo con el mismo nombre, en cuyo caso se aplicarán todas ellas en conjunto al
elegir el nombre que las identifica. Por ejemplo:

<link rel="stylesheet" type="text/css" href="home.css" title="Estilo principal" />

<link rel="alternate stylesheet" type="text/css" href="contrast.css" title="Estilo de alto contraste" />

<link rel="alternate stylesheet" type="text/css" href="big.css" title="Estilo de tamaño grande" />

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

En la Figura 1 se muestra como seleccionar un estilo alternativo en Mozilla Firefox a través del menú Ver, Estilo de página. No todos los
navegadores ofrecen esta opción.

Figura 1: Selección de estilos alternativos en Mozilla Firefox


En CSS existen tres tipos de hojas de estilo:

• Persistente: el atributo rel toma el valor stylesheet y el atributo title no tiene valor. La hoja de estilo se aplica en todas las
situaciones.

• Preferida: el atributo rel toma el valor stylesheet y el atributo title tiene un valor. La hoja de estilo se aplica a menos que el
usuario elija una hoja de estilo alternativa.

• Alternativa: el atributo rel toma el valor alternate stylesheet y el atributo title tiene un valor. La hoja de estilo se aplica cuando el
usuario la selecciona explícitamente; las hojas de estilo alternativas son excluyentes entre sí: sólo se puede aplicar una.

Para maquetar con CSS un formulario existen varias técnicas. Una sencilla consiste en definir un tamaño fijo para las etiquetas de los
controles. Por ejemplo:

<?xml version="1.0" encoding="iso-8859-1"?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Formulario alineado</title>
<style type="text/css" media="screen">
<!--
fieldset {width: 300px; padding: 10px;}
legend {font-weight: bold;}
label {float: left; display: block; width: 100px;}
input {float: none; display: inline;}
.centrado {margin: 10px 100px;}
-->
</style>
</head>

<body>
<form id="form1" action="" method="get">
<fieldset>
<legend>Datos personales</legend>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" />
<br />
<label for="apellidos">Apellidos:</label>
<input type="text" id="apellidos" />
<input type="submit" value="Enviar" class="centrado" />
</fieldset>
</form>
</body>

</html>

En la Figura 2 podemos observar como se visualiza esta página en Microsoft Internet Explorer 7:
Figura 2: Formulario de ejemplo

Aunque en el ejemplo anterior se han escrito las reglas de CSS directamente en la página web con la etiqueta <style>, recuerda que lo
correcto es escribirlas en un fichero separado y enlazarlo con la etiqueta <link />.

Recomendaciones

Algunos consejos para crear una versión impresa correcta de un sitio web:

• Cambia los colores a negro sobre un fondo blanco.


• Cambia el tipo de letra a serif.
• Cambia el tamaño del texto (mínimo 12pt).
• Destaca los enlaces: utiliza el subrayado y un color diferente.
• Elimina los elementos que no sean esenciales, como las imágenes.
• Elimina los elementos de navegación (por ejemplo, la barra de navegación).
• Elimina los elementos dinámicos generados por JavaScript, Java o Flash.
• Incluye la URL de la página.
• Incluye un aviso sobre los derechos de uso (copyright).

Por ahora, la selección del estilo alternativo se tiene que realizar a través de la opción correspondiente en el navegador. En aquellos
navegadores que no dispongan de dicha opción no se podrá realizar dicha selección. En una próxima práctica veremos cómo hacerlo con
JavaScript para que funcione en cualquier navegador.

Además, la selección de un estilo alternativo no se conserva al pasar de página. En una próxima práctica también veremos cómo
mantener el estilo seleccionado con JavaScript y cookies.

¿Cómo se puede comprobar el estilo desarrollado para impresión sin tener que imprimir la página web? Hay dos posibilidades:

• Puedes añadir un estilo alternativo para la pantalla que haga uso del estilo para impresión. Por ejemplo:

<link rel="alternate stylesheet" type="text/css" href="print.css" media="screen" title="Estilo para impresión" />

• Puedes utilizar la opción de Vista preliminar o Vista previa de impresión que ofrecen los navegadores para visualizar en pantalla
la forma de imprimir la página web.

Por último, ¿hoy en día se accede a la Web exclusivamente desde un ordenador? No, es muy normal acceder a la Web desde un
dispositivo móvil como un teléfono inteligente (\emph{smartphone}) y es muy probable que en el futuro se acceda también desde otros
tipos de dispositivos que en la actualidad no contemplamos. Un buen diseño y una buena maquetación es aquella que está preparada
para adaptarse a diferentes dispositivos. ¿Cómo se puede lograr? Una solución que se aplica en la actualidad es el diseño adaptable o
adaptativo (responsive design). ¿Te atreves a aplicarlo a tu práctica

También podría gustarte