curso desarrollo frontend: html - css - jquery
Post on 13-Jul-2015
287 Views
Preview:
TRANSCRIPT
CASCADING STYLE SHEETS
FUNDAMENTOS
LENGUAJE DE REGLAS
!3
‣ Disposición
‣ Color
‣ Tipografía
‣ Espaciado
‣ Dimensiones
SINTAXIS
!4
selector { propiedad: valor; }
!
SELECTORES SIMPLES
!5
p
.menu
#nav
Etiquetas
Clases
Identificadores
EJEMPLO
<article id="feature">
<div class="row custom">
<div class="info">
<h4>Customize</h4>
<p>Is a prime example of when a brand new well established.</p>
<p class="tip">Select layout and theme options in preferences.</p>
</div>
</div>
</article>
p {}
.row {}
.custom {}
#feature {}
SELECTORES SIMPLES
!7
p
.menu
#nav
Etiquetas
Clases
Identificadores
SELECTORES COMPLEJOS
!8
.menu p
p.claim
Descendentes
Compuestos
!9
SELECTORES COMBINADOS
‣ > descendientes directos
‣ + adyacentes
EJEMPLO
<article id="feature">
<div class="row custom">
<div class="info tip">
<h4>Customize</h4>
<p>Is a prime example of when a brand new well established.</p>
<p class="tip">Select layout and theme options in preferences.</p>
</div>
</div>
</article>
.info h4 {}
!
p.tip {}
!11
PSEUDO SELECTORES
‣ :hover, :focus
‣ :after, :before
‣ :target
‣ :first-child
!12
UNIDADES DE MEDIDA
‣ px
‣ %
‣ em, rem
HERENCIA
‣ Relativas a tipografía
‣ Enlace <a>
‣ Forzar herencia: inherit
!13
FONT
‣ size
‣ family
‣ weight
‣ variant
‣ style!14
TEXT
‣ transform
‣ align
‣ indent
‣ decoration
‣ text-shadow!15
TIPOGRAFÍA
‣ line-height
‣ letter-spacing
!16
DISPLAY
‣ block
‣ inline
‣ inline-block
‣ none
!17
VISIBILIDAD
‣ visibility
‣ opacity
!18
MODELO DE CAJA
!19
width, height
padding
margin
border
LAYOUT
‣ table
‣ float
‣ position
‣ flexbox
!20
LAYOUT
‣ table
‣ float
‣ position
‣ flexbox?
!21
FLOATS
‣ left, right
‣ none
‣ overflow
‣ clear
!22
POSITION
‣ static, relative
‣ absolute, fixed
‣ left, top, bottom, right
‣ z-index
!23
BACKGROUND
‣ image, repeat, position
‣ color, attachment
!
‣ background-size
!24
CSS3
VENDOR PREFIXES
‣ -webkit-
‣ -moz-
‣ -ms-
‣ -o-
!26
DECORACIÓN COMPLEJA
‣ Multiples fondos
‣ Bordes
‣ Circulos
!27
TRANSFORMATION
‣ transition
‣ transform
‣ animation
!28
RWD
RESPONSIVE
‣ liquid layout
‣ flexible media
‣ em, rem
‣ media queries
‣ meta!30
FLUID LAYOUT
px > %
!
elemento * 100
contexto
!31
FLEXIBLE MEDIA
‣ img { max-width: 100%; }
!32
SCALABLE FONTS
‣ .parent { font-size: 1.2em; }
!33
MEDIA QUERIES
‣ @media (cond) and cond()
‣ max-width desktop->mobile
‣ min-width mobile->desktop
!34
MEDIA QUERIES
‣ orientation
‣ device-width, device-height
‣ device-aspect-ratio
‣ min-device-pixel-ratio
!35
META
‣ <meta name="viewport"
content="width=device-
width, initial-scale=1">!36
OLVÍDATE DEL PIXEL Y PIENSA
EN PROPORCIONES
FUNDAMENTOS HTML, CSS Y
JQUERY
!2
CÓMO FUNCIONA INTERNET
PETICIÓN
CLIENTE SERVIDOR
!3
HTML
JSCSS
LENGUAJES CLIENTE
!4
SEMÁNTICA,ESTRUCTURA REGLAS DE PRESENTACIÓN FUNCIONALIDAD EXTRA
HTML CSS
JS
LENGUAJES CLIENTE
!5
HTML
!
HYPERTEXT MARKUP LANGUAGE
!
HTTP://
!6
ETIQUETA
<h1>Hola!</h1>
!7
ETIQUETA
<h1>Hola!</h1>APERTURA CIERRECONTENIDO
!8
ATRIBUTOS
<p class=”claim”>
!9
DISPLAY
BLOCK INLINE
!10
ANATOMÍA DE HTML
<html> <head> info de página <head> <body> contenido visible </body> </html>
!11
ETIQUETAS COMUNES
H1…H6 P UL, OL, LI, DL, DT, DD A
IMG BR DIV SPAN
SUBLIME TEXT +EMMET
HTML 5
!14
NOVEDADESDECLARACIÓN
NUEVAS ETIQUETAS
NUEVOS ATRIBUTOS
REGLAS
JS APIs
DECLARACIÓN<!DOCTYPE HTML>
HTML Y PUNTO
NUESTRA RESPONSABILIDAD
EL NAVEGADOR CONFÍA
!15
ETIQUETASSEMÁNTICAS Y ESTRUCTURALES
DEFINEN ESTRUCTURA
AFECTAN AL OUTLINE
DIV PARA DECORACIÓN
!16
ETIQUETASSEMÁNTICAS Y ESTRUCTURALES
ARTICLE, ASIDE, FIGURE,
FIGCAPTION, FOOTER, HEADER,
HGROUP, NAV, SECTION, TIME,
AUDIO, VIDEO, CANVAS,
MAIN?, PICTURE? !17
ETIQUETASSECTION
CONTENIDO GENÉRICO
ESTRUCTURADO
!
ARTICLE, ASIDE, NAV!18
ETIQUETASARTICLE
CONTENIDO ESTRUCTURAL
DISTRIBUIBLE DE MANERA
INDEPENDIENTE
!
!19article_01.html
ETIQUETASASIDE
CONTENIDO SECUNDARIO
RELACIONADO A ELEMENTO
!
!20aside_01.html
ETIQUETASNAV
SECCIÓN RELATIVA A ENLACES
DENTRO DEL DOCUMENTO O DE
LA PÁGINA
!
!21nav_01.html
ETIQUETASFIGURE
SECCIÓN DE CONTENIDO VISUAL
MULTIPLES MEDIOS
!22figure_01.html
ETIQUETASFIGCAPTION
LEYENDA O PIE RELATIVO AL
CONTENIDO VISUAL DE FIGURE
UNICO POR FIGCAPTION
PUEDE CONTENER SEMÁNTICA!23figure_01.html
ETIQUETASHEADER
CONTENIDO INTRODUCTORIO
ELEMENTOS NAVEGACIÓN
SUELE CONTENER H
!24header_01.html
ETIQUETASFOOTER
CONTENIDO SECUNDARIO
NO PRESCINDIBLE
!25footer_01.html
!26
LA SEMÁNTICA DE LAS ETIQUETAS
NO DEFINE SU POSICIÓN
EN EL LAYOUT
ETIQUETASTIME
CONTENIDO RELATIVO A TIEMPO
HORAS, SEMANAS, AÑOS...
CONTEXTO ESCRITO
!27time_01.html
ETIQUETASVIDEO & AUDIO
NATIVO, SIN PLUGIN FLASH
USABILIDAD
ATRIBUTOS ESPECÍFICOS
!
FALLBACK !28video_01.html
ETIQUETASCANVAS
DEPENDIENTE DE JS
DINÁMICOS / INTERACTIVOS
JUEGOS
!29canvas_01.html
ATRIBUTOSMÁS ESPECÍFICOS
FUNCIONALES -> UX
!30
ATRIBUTOSFORMULARIOS
EMAIL, TEL, NUMBER, URL,
SEARCH, COLOR, DATE, RANGE
!
AUTOFOCUS, REQUIRED, MAX,
MIN, PLACEHOLDER !31
REGLASMAYOR Y MEJOR SEMÁNTICA
CIERRE DE ETIQUETAS
ANIDACIÓN
ELIMINAR REDUNDANCIA
!32
JAVASCRIPT Y JQUERY
!2
FUNDAMENTOS
FRAMEWORK
JAVASCRIPT
LENGUAJE DE PROGRAMACIÓN
!3
LAS TRES INCÓGNITAS
QUIÉN
CUÁNDO
QUÉ
!4
LAS TRES INCÓGNITAS
QUIÉN
CUÁNDO
QUÉ
ELEMENTOS
EVENTOS
ACCIONES
!5
LAS TRES INCÓGNITAS
QUIÉN
CUÁNDO
QUÉ
HTML (DOM)
USUARIO, CARGAS…
MODIFICACIONES, CÁLCULOS
!6
LAS TRES INCÓGNITAS
a { color: #999; }
a:hover { color: #EEE; }
!
!7
LAS TRES INCÓGNITAS
!
a:hover { color: #EEE; }
!
QUIÉN ELEMENTO
CUÁNDO EVENTO
QUÉ ACCIÓN
QUIÉN
ELEMENTO(s) HTML
WINDOW
DOCUMENT
!8
LAS TRES INCÓGNITAS
CUÁNDO
USUARIO (click, keydown)
CARGAS EXTERNAS
IMPLÍCITAS
!9
LAS TRES INCÓGNITAS
!10
CUANDO: EVENTOS
USUARIO
RUTINAS INTERNAS
!
.on(‘click’), .on(‘load’), .on(‘resize’)
QUÉ
ACCIONES
ABSTRACCIÓN
FUNCIONES (MÉTODOS)
!11
LAS TRES INCÓGNITAS
!12
QUÉ: FUNCIONES
CONJUNTO DE ÓRDENES
DECLARACIÓN Y LLAMADA
!13
controlMenu(); !
!
!
function controlMenu(){ // acciones };
LLAMADA !
!
DECLARACIÓN !
FUNCIONES
!14
!
$(‘.next’).on(‘click’, avanza); !
!
function avanza(){ // acciones };
EJEMPLO
!15
!
alert(‘mensaje’) !
console.log(‘mensaje’)
FEEDBACK
!16
FUNDAMENTOS PROGRAMACIÓN
!17
FUNDAMENTOS
VARIABLES
OPERADORES
SENTENCIAS
VARIABLES
!18
SE DECLARAN UNA VEZ
SE EMPLEAN MUCHAS VECES
ALMACENAN VALORES
CONTENIDO DEFINE SU TIPO
!19
!
var velocidad = 20; !
var nombre = ‘Inés’; !
var misionCompletada = false;
VARIABLES
!20
saluda(‘Pedro’);
!
function saluda(quien){
alert(‘Hola ’+quien)
};
ARGUMENTOS
OPERADORES
!21
ASIGNACIÓN
ARITMÉTICOS
COMPARATIVOS
!22
!
var velocidad = 20; !
velocidad = velocidad + 15; !
OPERADORES
SENTENCIAS
!23
CONDICIONALES
REPETICIÓN
!24
!
if ( velocidad > 50 ){ !
bonus = true; !
}
SENTENCIAS
!25
JQUERY
!26
JQUERY
HTTP://JQUERY.COM/DOWNLOAD/
!
HTTP://API.JQUERY.COM/
!27
JQUERY!
<script src=“jquery.min.js”></script> !
<script src=“jquery.plugin.js”></script> !
<script src=“mi_app.js”></script> !
!28
JQUERY<script src=“jquery.min.js”></script> !
<script> !
// mi código !
</script>
!29
JQUERY: ESTILOS!
.addClass(‘clase’);
.removeClass(‘clase’);
.toggleClass(‘clase’);
!30
JQUERY: ESTILOS!
.css(‘propiedad’, ‘valor’);
.css( { prop1: ’valor1’, prop2: ’valor2’ } );
!
!important
!31
JQUERY: EFECTOS!
.hide()
.show()
.toggle()
!32
JQUERY: EFECTOS!
.fadeOut()
.fadeIn()
.fadeToggle()
.fadeTo(duration, opacity)
!33
JQUERY: DESPLIEGUE!
.slideUp()
.slideDown()
.slideToggle()
!34
JQUERY: EFECTOS!
.animate({ prop1: ’valor1’ }, duration );
!
.stop(true)
.delay(duration)
!35
CALLBACKS
FUNCIÓN A EJECUTAR AL
FINALIZAR LA ACCIÓN
!
EFECTOS, CARGAS…
!36
JQUERY: CALLBACKS.fadeOut(, cb);
.fadeIn(, cb)
.fadeToggle(, cb)
.fadeTo(, cb)
!
.slideDown(, cb)
.slideUp(, cb)
.slideToggle(, cb)
.animate(, cb);
!37
$(this)
THIS
!38
INDIVIDUO RESPECTO AL GRUPO
!
CAMBIA DEPENDIENDO
DE QUÉ LO INVOQUE
!39
THIS$(‘.lista li’).on(‘click’, seleccionaItem);
!
function seleccionaItem(){
$(this).addClass(‘pulsado’);
}
!40
THIS$(‘.hero’).fadeIn(despliega);
!
function despliega(){
$(this).slideDown();
}
!41
QUIEN: ELEMENTOS
SELECTORES CSS
OBJETOS
$(‘.menu a’), $(‘p’), $(window)
!
!42
QUIEN: ELEMENTOS
SELECTORES CSS
OBJETOS
$(‘.menu a’), $(‘p’), $(window)
$(this)
ELEMENTOS
!43
PUNTO DE PARTIDA:
!
GLOBAL VS $(THIS)
!44
ELEMENTOS!
.find(selector)
.parent()
.next()
.prev()
!45
JQUERY: EVENTOSUSUARIO
mouse
keyboard
screen
touch, scroll
SISTEMA
load
!46
MOUSE
click, mousedown, mouseup,
mousemove,
mouseenter, mouseleave,
mouseover, mouseout
JQUERY: EVENTOS
!47
KEYBOARD
keydown, keyup
!
SCREEN
resize
JQUERY: EVENTOS
!48
TOUCH
touchstart
touchmove
touchend
JQUERY: EVENTOS
!49
saluda(‘Pedro’);
!
function saluda(quien){
alert(‘Hola ’+quien)
};
ARGUMENTOS
!50
LA FUNCIÓN ASOCIADA AL OBJETO
MEDIANTE UN EVENTO, RECIBE DE
MANERA IMPLÍCITA EL PROPIO
EVENTO COMO ARGUMENTO
JQUERY: EVENTOS
!51
ARGUMENTOS$(‘.lista li’).on(‘click’, seleccionaItem);
!
function seleccionaItem(e){
// e -> mouseEvent
}
!52
ARGUMENTOS$(‘.menu a’).on(‘click’, seleccionaItem);
!
function seleccionaItem(e){
e.preventDefault();
}
!53
CONTENIDOS!
ETIQUETAS Y ATRIBUTOS
!
getters (obtener valor)
setters (dar valor)
!54
CONTENIDOSETIQUETAS
!
.text()
.text(valor)
.html()
.html(valor)
ATRIBUTOS
!
.attr(‘atributo’)
.attr(‘atributo’, valor)
.data(data)
!55
MANIPULACIÓN.append(obj)
.prepend(obj)
.clone()
.remove()
!56
DIMENSIONES!
.width()
.height()
!
var ancho = $(obj).css(‘width’)
!57
DIMENSIONES.innerWidth()
.innerHeight()
!
.outerWidth(true)
.outerHeight(true)
!58
POSICIONAMIENTORELATIVO
!
.position().left
.position().top
ABSOLUTO
!
.offset().left
.offset().top
!59
FILTROS.first()
.last()
.eq(indice)
$(obj:odd)
$(obj:even)
top related