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
lenguaje de programación
<?php
<?php if( condition ): ?>
if($true)
[primera condición]
{
<?php else: ?>
echo "true";
[segunda condición]
}
<?php endif; ?>
else { echo "false"; } ?>
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
SGML lenguaje de marcado <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>
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贸n
2. Acciones 3.Pre procesos o int茅rprete 4.MVC
HTML - CSS
Javascript - Actionscript - Processing
PHP - ASP
RUBY - JAVA
1. Contenidos / visualización
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.
XHTML <!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>
1. Contenidos / visualizaci贸n
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).
2. Acciones
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.
JAVASCRIPT <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>
2. Acciones
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
PROCESSING size(200,200); background(255); stroke(0); fill(150); rect(50,50,75,100);
3.Pre procesos o intérprete
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.
PHP <?php
//usado en Wordpress
$ini = "Estimados ";
<?php
$fin = "Alumnos";
get_header();
$todo = $ini.$fin;
if (have_posts())Â :
echo $todo;
while (have_posts())Â :
?>
the_post(); the_content();
<?php $n1=1;
endif;
$n2=2;
get_sidebar();
$suma=$n1+$n2;
get_footer();
echo "$n1+$n2". "<br>";
?>
echo "suma = ".$suma;
?>
endwhile;
4. MVC
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.
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.