Electivo web: introduccion
21
Electivo de profundización <!--Introducción al Diseño Web-->
-
Upload
jorge-barrera -
Category
Documents
-
view
232 -
download
1
description
introduccion
Transcript of Electivo web: introduccion
Electivo de profundización<!--Introducción al Diseño Web-->
Introducción al Diseño Web
Programación para diseñadores; introducción del frontend y el
backend aplicado al desarrollo Web.
El desarrollo web hace referencia a:
1. la visualización del usuario navegante (front-end),
2. y del administrador del sitio con sus respectivos sistemas
(back-end).
Un lenguaje de programación es un idioma artificial diseñado
para expresar computaciones que pueden ser llevadas a cabo por
máquinas como las computadoras.
No todos los lenguajes que usan código propio pueden ser
considerados como programación
<?php
if($true)
{
echo "true";
}
else
{
echo "false";
}
?>
PHP lenguaje de programación
<?php if( condition ): ?>
[primera condición]
<?php else: ?>
[segunda condición]
<?php endif; ?>
Un lenguaje de marcado o lenguaje de marcas es una forma de
codificar un documento que, junto con el texto, incorpora
etiquetas o marcas que contienen información adicional acerca de
la estructura del texto o su presentación.
También se conoce como lenguaje de etiquetas e históricamente,
se usaba y se usa en la industria editorial y de la
comunicación, así como entre autores, editores e impresores.
Este Lenguaje NO es programación
<anthology>
<poem>
<title>The SICK ROSE</title>
<stanza>
<line>O Rose thou art sick.</line>
<line>The invisible worm,</line>
<line>That flies in the night</line>
<line>In the howling storm:</line>
</stanza>
<stanza>
<line>Has found out thy bed</line>
<line>Of crimson joy:</line>
<line>And his dark secret love</line>
<line>Does thy life destroy.</line>
</stanza>
</poem>
</anthology>
SGML lenguaje de marcado
Front-end y back-end son términos que se se refieren al
principio y el final de un proceso.
En desarrollo web Front-end es el responsable de recolectar y
mostrar los datos de entrada del usuario.
EL back-end es responsable de las respuestas del servidor y de
los cálculos que este haga.
Se ha llamado diseño front a aquel que se encarga de codificar
el diseño visual. Es decir, traduce a una maqueta de códigos, el
dibujo o esquema de un diseño (generalmente a cargo de un
diseñador de interfaz).
Antes se refería a el uso de Html-Css. Hoy se ha incorporado a
esta práctica el uso de Javascript.
1.Contenidos
visualizaciónHTML - CSS
2. Acciones Javascript - Actionscript - Processing
3.Pre procesos
o intérpretePHP - ASP
4.MVC RUBY - JAVA
HTML, siglas de HyperText Markup Language (Lenguaje de Marcado
de Hipertexto), es el lenguaje de marcado para la elaboración de
páginas web. Es usado para describir la estructura y el
contenido en forma de texto.
Usa etiquetas estrictamente definidas a través de un estándar.
El más usado hoy es el Xhtml en su versión 1.0 transitional.
El que está llegando es HTML5.
1. Contenidos / visualización
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
</head>
<body>
<!--acá el contenido visible-->
</body>
</html>
XHTML
CSS,hojas de estilo en cascada (en inglés Cascading Style
Sheets), CSS es un lenguaje usado para definir la presentación
de un documento estructurado escrito en HTML o XML (y por
extensión en XHTML).
1. Contenidos / visualización
Javascript,es un lenguaje de programación interpretado, es decir
que está diseñado para ser ejecutado por medio de un intérprete
(en este caso los navegadores web).
Se utiliza principalmente en su forma del lado del cliente
(client-side), implementado como parte de un navegador web
permitiendo mejoras en la interfaz de usuario y páginas web. Se
añaden transiciones, animaciones, cargas de otras páginas html,
etc.
El uso de frameworks como jquery, mootools, hace más accesible
el uso del lenguaje.
2. Acciones
<script>
window.alert("hola, esta es un aviso emergente...")
</script>
<script>
var numero = 2
function miFuncion (){
var numero = 19
document.write(numero) //exporta 19
}
document.write(numero) //exporta 2
</script>
JAVASCRIPT
Processing es un lenguaje de programación y entorno de
desarrollo integrado de código abierto basado en Java, de fácil
utilización, y que sirve como medio para la enseñanza y
producción de proyectos multimedia e interactivos de diseño
digital.
Exporta un archivo JAVA que puede ejecutarse en la web a través
del plugin. Además tiene la posibilidad reciente de ser
ejecutado a través de javascript con Processing.js
2. Acciones
size(200,200);
background(255);
stroke(0);
fill(150);
rect(50,50,75,100);
PROCESSING
PHP PHP Hypertext Pre-processor
Cuando el cliente hace una petición al servidor para que le
envíe una página web, el servidor ejecuta el intérprete de PHP.
Éste procesa el script solicitado que generará el contenido de
manera dinámica (por ejemplo obteniendo información de una base
de datos) devolviendo el contenido en HTML.
Existen frameworks que hacen su uso más abreviado como CAKEPHP y
entornos integrados como Wordpress.
3.Pre procesos o intérprete
<?php
$ini = "Estimados ";
$fin = "Alumnos";
$todo = $ini.$fin;
echo $todo;
?>
<?php
$n1=1;
$n2=2;
$suma=$n1+$n2;
echo "$n1+$n2". "<br>";
echo "suma = ".$suma;
?>
PHP//usado en Wordpress
<?php
get_header();
if (have_posts()) :
while (have_posts()) : the_post();
the_content();
endwhile;
endif;
get_sidebar();
get_footer();
?>
Modelo Vista Controlador (MVC) es un patrón de arquitectura de
software que separa los datos de una aplicación, la interfaz de
usuario, y la lógica de control en tres componentes distintos.
Modelo: datos y reglas de la aplicación.
Vista: muestra la información del modelo al usuario.
Controlador: gestiona las entradas del usuario.
4. MVC
Receta: Sopa de Tomates
Esta receta está inspirada en el libro de Rose Elliot: "La cocina vegetariana clásica", Editorial Primera Plana, que le recomendamos.
Ingredientes (4 personas):
Dos cucharadas de aceite de oliva
Una cebolla troceada
2 kg de tomates frescos, partidos en cuartos
unas hojas de albahaca
Sal y pimienta negra
una copia de vino dulce o en su defecto una copita de coñac con una cucharadita de azúcar.
Preparación de la Receta Sopa de Tomates:
Paso 1: Calentar el aceite en una cacerola grande a fuego medio, añadir la cebolla troceada, tapar y cocer hasta que empiece a estar blanda, en torno a seis minutos.
Paso 2: Se añaden los tomates, se agrega un vasito pequeño de vino dulce o coñac con un poco de azúcar.... y se continua cociendo todo hasta que se vayan convirtiendo en un puré (unos 15 minutos aproximadamente).
Paso 3: Verter el puré en la batidora y trabajar hasta formar un la sopa propiamente; entonces pasar por un tamiz.
Paso 4. Puede prepararse para servir caliente o fría. Antes de ponerla en mesa. Añadir la sal, y la pimienta con unas hojas de albahaca por encima.
